这是一个创建于 1139 天前的主题，其中的信息可能已经有所发展或是发生改变。
正在学习中，感觉两种方式写起来是差不多的？😂 在实际工况中这两种写法差距很大吗？
 |
1
zhigewuwang 2021-10-12 14:41:50 +08:00
函数组件 是指 hook 写法吗？
复杂的逻辑我喜欢用类组件，更好管理。 简单的就用 hook 写法。少敲些代码 |
 |
2
ReferenceE 2021-10-12 14:42:51 +08:00 via Android
建议还是用纯函数作为组件
React 官方写过： 1.函数可以直接等级提升，类不会等级提升(大概是会把定义放到最开头) 2.类的函数分了三类 挂载前，更新时，unmount 后 函数用的是 useEffect 一系，功能一样，写法不同 |
 |
3
xinhaiw 2021-10-12 14:50:16 +08:00
类就是原罪知道吗。
|
 |
4
wobuhuicode 2021-10-12 14:52:05 +08:00 via iPhone
要理解 hook，首先要理解 react 团队对于 ui 的定义
ui = fn(state) 很纯粹的一个概念。早期由于在纯函数下没有很好的方案去存储状态。所以才用比较普遍的 class 写法。 |
 |
5
JerryCha 2021-10-12 14:58:46 +08:00
JS 的类容易陷入坑里，能少用还是少用
|
 |
6
aikilan 2021-10-12 15:04:43 +08:00  1
类组件 函数组件都写过完整的项目，没啥太大区别，HOOKS 写法的好处是可以把组件细化到很小，HOOKS 封装的好可以省不少工作，而且可以用 useContext 、useReducer 一类的来管理全局变量，省不少事儿。
类的话生命周期比较清晰，一般来说不会犯什么大错误。比如 HOOKS 要判断更新需要自己去管理 dep 一类的，当然一个熟练的工人，这些都是小事儿。 |
 |
7
zhouyg 2021-10-12 15:14:34 +08:00
简单，逻辑清晰
|
 |
8
rodrick 2021-10-12 15:21:14 +08:00
写起来舒服点吧 this 的坑也不会有
|
 |
9
HXHL 2021-10-12 15:26:48 +08:00 via iPhone
代码少，写的舒服。
|
 |
10
kidlj 2021-10-12 15:39:59 +08:00
Who is this?
|
 |
11
tonytonychopper 2021-10-12 15:54:10 +08:00
类组件有个好处就是不容易犯错，各种生命周期把你安排得明明白白
|
 |
12
Robertwhite 2021-10-12 16:28:36 +08:00
自定义 hooks 用来复用 /分离逻辑，还是很爽的，用类的话好像高阶组件、render props 这些方式都不太优雅
|
 |
13
pigspy 2021-10-12 16:34:55 +08:00
我写的应用不太复杂，先用类组件写了一遍，然后重构成函数组件，感觉区别不大
|
 |
14
yl20181003 2021-10-12 16:39:10 +08:00
不用写 render 🙊
|
 |
15
copper20 2021-10-12 16:39:10 +08:00
简而言之，更帅，更优雅
|
 |
16
ryougifujino 2021-10-12 16:39:58 +08:00
函数式组件样板代码比类要少
|
 |
17
lisongeee 2021-10-12 17:53:35 +08:00
组件有时候会不可避免地存在多个小功能。类的写法会导致 这些小功能管理起来很混乱，而且互相之间没有作用域隔离，代码很多的时候你需要在多个生命周期函数之间来回跳转。hook/composition-api/ 可以让这些小功能更加内聚，便于管理。
aHR0cHM6Ly92My5jbi52dWVqcy5vcmcvZ3VpZGUvY29tcG9zaXRpb24tYXBpLWludHJvZHVjdGlvbi5odG1sIyVFNCVCQiU4MCVFNCVCOSU4OCVFNiU5OCVBRiVFNyVCQiU4NCVFNSU5MCU4OCVFNSVCQyU4Ri1hcGk= |
 |
18
shabbyin 2021-10-12 17:58:43 +08:00
19 年在团队内部分享的时候我说过一个我自己的观点
> Hooks 组件的目标并不是取代类组件，而是增加函数式组件的使用率，明确通用工具函数与业务工具函数的边界，鼓励开发者将业务通用的逻辑封装成 React Hooks 而不是工具函数。 对普通组件来说用类和 class 写起来完全没有任何区别 但是 hook 好的一点在于 可以有自己内部的状态 可以自己获取 redux 的数据去做处理 那么就不需要我们自己写一个 util 然后往里面传一堆参数来复用同一套业务逻辑了 更不用说 hook 还能做 memo 自定义事件挂载卸载可以在一个 useEffect 里完成这些东西 而 hook 只能用在函数组件中 所以那就开始用呗 毕竟函数式编程也是流行趋势 |
 |
19
huai 2021-10-12 18:05:21 +08:00
1.不需要理解 this , 虽然也不是很复杂，就几个规则记住即可
2.在调试的时候， 函数组件，没有那么多嵌套（我基本不调试，对我没差 |
 |
20
lanten 2021-10-13 09:38:15 +08:00
@ReferenceE 只有用 function 关键字才会提升吧？在用 TS 的情况下，似乎只能用箭头函数的方式赋予 React.FC 泛型，还有 React.memo，也不能用 function 关键字声明。
函数式组件每一次 rerender 都会执行函数体内的所有代码，需要通过 useEffect 和 useCallback 优化，增加了开发者的心智负担，尤其对于新手而言更容易写出低性能代码。 函数式组件还不能被继承，我认为函数式组件除了 hooks 复用一无是处 |
|
21
lanten 2021-10-13 09:47:02 +08:00
@Robertwhite 考虑一下把高阶组件换成修饰器，需要复用的东西采用抽象派生，那才叫优雅
|
 |
22
danytdlemon1900 2021-10-13 17:45:22 +08:00
@lanten 很难不赞同❤
|
 |
23
biguokang 2021-10-14 03:41:22 +08:00
以前没有 hook 的时候，类组件的抽象能力高，复用性强，组装起来灵活（虽然使用起来很繁琐，比如高阶组件看的脑壳疼），所以不得不用类组件
现在有了 hook，就可以使用函数组件 |
|
24
ReferenceE 2021-10-15 19:00:58 +08:00 via Android
@lanten 各有各的看法吧，上家的规范就是要求全部 function
|
Select Language