2022 年，学习 React 还需要学 class component 吗?

[jaywhen]

迫于感觉考研失败，最近在准备春招，之前写 React demo 都是用的 Hooks ，没有了解过类式组件。想问问老哥们工作中类式组件用得多吗，面试会问到这方面的内容吗?

[Puteulanus]

工作中还是不少吧，很多时候都是维护老代码，会还是得会的

[karott7]

基本上是不写了，不过可以偶尔写写或者看些文章了解下区别

[geist]

要的，还是有一些使用场景：

1. Error Boundaries 没有一个 FC 的接口，如果你需要定义还是要嵌套 Class Component 。(你可以用 FC 去嵌套包裹实现它，但有多个错误边界需要处理时，Class 仍旧是最好的方案。)
2. 当你需要对外扩展一个继承组件接口时，Class 能够帮助更好的提供对外的接口定义。FC 一般会使用组合、HOC 等方式。当你需要编写库、抽象逻辑时，很可能两种都需要兼容 (组合与继承)。
3. 维护过时代码时。一些旧的代码库本身就是 Class 实现，或是代码本身引用了一些只兼容 Class 的第三方依赖。如第三方库中对组件使用了 `Component.prototype.render` 的判断；第三方库依赖了 IoC 模式等，这会约束你只能写 Class Component 。

[jaywhen]

@Puteulanus
@karott7
@geist

#1 #2 #3

明白了，感谢！

[ch2]

老代码你不用吗？不是所有的组件都是 function

[meteor957]

要

[izoabr]

component 学习成本很低啊，基本没啥门槛吧，把生命周期了解一下，然后就是照猫画虎直接用了

[AyaseEri]

不怎么用，但有的场景 class component 比 functional component 好写一些

[siteshen]

我觉得 Hooks 就是个异类，纯粹是为了解决 FC 不支持状态的问题而生的。如果需要用状态，为什么不用 class component ，而要用 FC 呢？

ps：本人后端开发，偶尔兼职前端，可能有些理解不到位。

[molvqingtai]

@siteshen hooks 是为了逻辑复用，当然 class extend or minxs 也行，没有 hooks 灵活

[siteshen]

@molvqingtai 可能是因为工作经历的差异吧，我觉得 class mixins 是更好的复用方式（我后端用 Django 比较多，出于复用的考虑，几乎没写过 functional view ，都是 class-based view ）。



`Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.`

在我看来，useState 是引入了一个全局的外部变量，然后通过某种特殊的方式和函数调用返回的组件关联（这句话里 other React features 接触太少，不作评论）。个人是非常厌恶全局变量的，即使是个隐式的全局变量。同理，能放在 state 的，我也不会用 redux （也是个大型的全局变量）存。

[gengchun]

点进来发现是找工作的，……

不过虽然点进来了，还是说两句。国内现在 vue.js 肯定是比 react 的多的。如果是 React 的话，说明初始技术栈，就是 2015 年的样子构建的。那么按理，入坑 React 肯定得维护老项目。

我自己当时有个小项目，当时前端是自己硬着头皮用 React 实现的，搞完一年后发现没有人接盘……后面因为自己也不是真的前端就没有跟进 React 了。所以维护就一直放在低功耗状态，不想再升级了。

[inhal]

看公司，初创型没有历史负担意味着可以 Hook 梭哈，比如我现在公司才两年，都是 FC

[CodingNaux]

hook 优先，class component 学习下也废不了多少时间.
主要就是个生命周期吧，https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

[fernandoxu]

老哥头像从哪里弄的？

[jaywhen]

@fernandoxu 某宝找画师画的，国外也有画 notion style 头像的服务，只不过贵几倍😄

[magicdawn]

个人愚见
class component 优点: 简单，直接
functional component 优点: 易组合，易于逻辑代码复用

并不一定要完全摒弃 class component. 有时候简单的 class implementation 比你费尽心思 useMemo useCallback React.memo 写出来的性能更好

[fernandoxu]

@jaywhen #16 刚买了个 20 刀😭，没想到去某宝......

[jaywhen]

@fernandoxu 😄我就是觉得 20 刀贵了就在某宝 9RMB 买的

[fernandoxu]

@jaywhen #19 😥😥😥😥😥亏死了