2022 年，学习 React 还需要学 class component 吗?
jaywhen · 2022-02-13 00:26:11 +08:00 · 4148 次点击这是一个创建于 1012 天前的主题，其中的信息可能已经有所发展或是发生改变。
迫于感觉考研失败，最近在准备春招，之前写 React demo 都是用的 Hooks ，没有了解过类式组件。想问问老哥们工作中类式组件用得多吗，面试会问到这方面的内容吗?
 |
1
Puteulanus 2022-02-13 00:39:50 +08:00  1
工作中还是不少吧，很多时候都是维护老代码，会还是得会的
|
 |
2
karott7 2022-02-13 00:40:49 +08:00 via iPhone 1
基本上是不写了，不过可以偶尔写写或者看些文章了解下区别
|
 |
3
geist 2022-02-13 06:06:30 +08:00 1
要的，还是有一些使用场景：
1. Error Boundaries 没有一个 FC 的接口，如果你需要定义还是要嵌套 Class Component 。(你可以用 FC 去嵌套包裹实现它，但有多个错误边界需要处理时，Class 仍旧是最好的方案。) 2. 当你需要对外扩展一个继承组件接口时，Class 能够帮助更好的提供对外的接口定义。FC 一般会使用组合、HOC 等方式。当你需要编写库、抽象逻辑时，很可能两种都需要兼容 (组合与继承)。 3. 维护过时代码时。一些旧的代码库本身就是 Class 实现，或是代码本身引用了一些只兼容 Class 的第三方依赖。如第三方库中对组件使用了 `Component.prototype.render` 的判断；第三方库依赖了 IoC 模式等，这会约束你只能写 Class Component 。 |
 |
4
jaywhen OP |
 |
5
ch2 2022-02-13 11:05:32 +08:00 via iPhone 1
老代码你不用吗？不是所有的组件都是 function
|
 |
6
meteor957 2022-02-13 12:43:24 +08:00 1
要
|
 |
7
izoabr 2022-02-13 12:51:38 +08:00 1
component 学习成本很低啊，基本没啥门槛吧，把生命周期了解一下，然后就是照猫画虎直接用了
|
 |
8
AyaseEri 2022-02-13 13:02:19 +08:00 1
不怎么用，但有的场景 class component 比 functional component 好写一些
|
 |
9
siteshen 2022-02-13 14:37:44 +08:00 1
我觉得 Hooks 就是个异类，纯粹是为了解决 FC 不支持状态的问题而生的。如果需要用状态，为什么不用 class component ，而要用 FC 呢？
ps：本人后端开发，偶尔兼职前端，可能有些理解不到位。 |
 |
10
molvqingtai 2022-02-13 14:48:20 +08:00 via Android 1
@siteshen hooks 是为了逻辑复用，当然 class extend or minxs 也行，没有 hooks 灵活
|
|
11
siteshen 2022-02-13 15:47:39 +08:00 1
@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 （也是个大型的全局变量）存。 |
 |
12
gengchun 2022-02-13 17:11:18 +08:00 1
点进来发现是找工作的，……
不过虽然点进来了，还是说两句。国内现在 vue.js 肯定是比 react 的多的。如果是 React 的话，说明初始技术栈，就是 2015 年的样子构建的。那么按理，入坑 React 肯定得维护老项目。 我自己当时有个小项目，当时前端是自己硬着头皮用 React 实现的，搞完一年后发现没有人接盘……后面因为自己也不是真的前端就没有跟进 React 了。所以维护就一直放在低功耗状态，不想再升级了。 |
 |
13
inhal 2022-02-13 23:30:52 +08:00 via Android 1
看公司，初创型没有历史负担意味着可以 Hook 梭哈，比如我现在公司才两年，都是 FC
|
 |
14
CodingNaux 2022-02-14 10:20:56 +08:00 1
hook 优先，class component 学习下也废不了多少时间.
主要就是个生命周期吧，https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ |
 |
15
fernandoxu 2022-02-14 10:34:00 +08:00
老哥头像从哪里弄的？
|
|
16
jaywhen OP @fernandoxu 某宝找画师画的，国外也有画 notion style 头像的服务，只不过贵几倍😄
|
 |
17
magicdawn 2022-02-14 15:49:41 +08:00 via Android 1
个人愚见
class component 优点: 简单，直接 functional component 优点: 易组合，易于逻辑代码复用 并不一定要完全摒弃 class component. 有时候简单的 class implementation 比你费尽心思 useMemo useCallback React.memo 写出来的性能更好 |
|
18
fernandoxu 2022-02-14 16:06:48 +08:00
@jaywhen #16 刚买了个 20 刀😭，没想到去某宝......
|
|
19
jaywhen OP @fernandoxu 😄我就是觉得 20 刀贵了就在某宝 9RMB 买的
|
|
20
fernandoxu 2022-02-14 16:21:26 +08:00
@jaywhen #19 😥😥😥😥😥亏死了
|
 |
21
zooeymango 2022-02-14 17:16:40 +08:00 1
稍微看一下就可以了,看得懂就行
|
 |
22
prayx 2022-06-23 10:52:55 +08:00
@siteshen class mixins 最大的问题在于命名冲突。其次，由于 JS 不支持多重继承，在处理多个代码逻辑复用时需要多重继承，实现起来非常臃肿和繁杂。而 hooks 的出现则是基于 [组合优于继承] 的理念，使用起来十分优雅。
你说你十分厌恶全局变量，但是 Hooks 全局变量的细节都被 React 隐藏起来了，实际上 hooks 实现是通过 JS 闭包，并不少挂载在 window 上的全局变量，在编码过程实际上没有什么思想上的负担。 |
Select Language