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