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

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

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

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

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

@Puteulanus
@karott7
@geist

#1 #2 #3

明白了，感谢！

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

要

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

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

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

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

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

@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 （也是个大型的全局变量）存。

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

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

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

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

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

老哥头像从哪里弄的？

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

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

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

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

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

@jaywhen #19 亏死了

稍微看一下就可以了,看得懂就行

@siteshen class mixins 最大的问题在于命名冲突。其次，由于 JS 不支持多重继承，在处理多个代码逻辑复用时需要多重继承，实现起来非常臃肿和繁杂。而 hooks 的出现则是基于 [组合优于继承] 的理念，使用起来十分优雅。

你说你十分厌恶全局变量，但是 Hooks 全局变量的细节都被 React 隐藏起来了，实际上 hooks 实现是通过 JS 闭包，并不少挂载在 window 上的全局变量，在编码过程实际上没有什么思想上的负担。