这是一个创建于 1460 天前的主题，其中的信息可能已经有所发展或是发生改变。
正在学习中，感觉两种方式写起来是差不多的？ 在实际工况中这两种写法差距很大吗？
 | 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