请教下各位 React 的函数组件比类组件好在哪里？

[weeshin]

正在学习中，感觉两种方式写起来是差不多的？😂 在实际工况中这两种写法差距很大吗？

[zhigewuwang]

函数组件 是指 hook 写法吗？
复杂的逻辑我喜欢用类组件，更好管理。 简单的就用 hook 写法。少敲些代码

[ReferenceE]

建议还是用纯函数作为组件
React 官方写过：
1.函数可以直接等级提升，类不会等级提升(大概是会把定义放到最开头)
2.类的函数分了三类 挂载前，更新时，unmount 后
函数用的是 useEffect 一系，功能一样，写法不同

[xinhaiw]

类就是原罪知道吗。

[wobuhuicode]

要理解 hook，首先要理解 react 团队对于 ui 的定义
ui = fn(state)
很纯粹的一个概念。早期由于在纯函数下没有很好的方案去存储状态。所以才用比较普遍的 class 写法。

[JerryCha]

JS 的类容易陷入坑里，能少用还是少用

[aikilan]

类组件 函数组件都写过完整的项目，没啥太大区别，HOOKS 写法的好处是可以把组件细化到很小，HOOKS 封装的好可以省不少工作，而且可以用 useContext 、useReducer 一类的来管理全局变量，省不少事儿。

类的话生命周期比较清晰，一般来说不会犯什么大错误。比如 HOOKS 要判断更新需要自己去管理 dep 一类的，当然一个熟练的工人，这些都是小事儿。

[zhouyg]

简单，逻辑清晰

[rodrick]

写起来舒服点吧 this 的坑也不会有

[HXHL]

代码少，写的舒服。

[kidlj]

Who is this?

[tonytonychopper]

类组件有个好处就是不容易犯错，各种生命周期把你安排得明明白白

[Robertwhite]

自定义 hooks 用来复用 /分离逻辑，还是很爽的，用类的话好像高阶组件、render props 这些方式都不太优雅

[pigspy]

我写的应用不太复杂，先用类组件写了一遍，然后重构成函数组件，感觉区别不大

[yl20181003]

不用写 render 🙊

[copper20]

简而言之，更帅，更优雅

[ryougifujino]

函数式组件样板代码比类要少

[lisongeee]

组件有时候会不可避免地存在多个小功能。类的写法会导致 这些小功能管理起来很混乱，而且互相之间没有作用域隔离，代码很多的时候你需要在多个生命周期函数之间来回跳转。hook/composition-api/ 可以让这些小功能更加内聚，便于管理。

aHR0cHM6Ly92My5jbi52dWVqcy5vcmcvZ3VpZGUvY29tcG9zaXRpb24tYXBpLWludHJvZHVjdGlvbi5odG1sIyVFNCVCQiU4MCVFNCVCOSU4OCVFNiU5OCVBRiVFNyVCQiU4NCVFNSU5MCU4OCVFNSVCQyU4Ri1hcGk=

[shabbyin]

19 年在团队内部分享的时候我说过一个我自己的观点
> Hooks 组件的目标并不是取代类组件，而是增加函数式组件的使用率，明确通用工具函数与业务工具函数的边界，鼓励开发者将业务通用的逻辑封装成 React Hooks 而不是工具函数。
对普通组件来说用类和 class 写起来完全没有任何区别

但是 hook 好的一点在于 可以有自己内部的状态 可以自己获取 redux 的数据去做处理
那么就不需要我们自己写一个 util 然后往里面传一堆参数来复用同一套业务逻辑了
更不用说 hook 还能做 memo 自定义事件挂载卸载可以在一个 useEffect 里完成这些东西
而 hook 只能用在函数组件中 所以那就开始用呗
毕竟函数式编程也是流行趋势

[huai]

1.不需要理解 this , 虽然也不是很复杂，就几个规则记住即可

2.在调试的时候， 函数组件，没有那么多嵌套（我基本不调试，对我没差

[lanten]

@ReferenceE 只有用 function 关键字才会提升吧？在用 TS 的情况下，似乎只能用箭头函数的方式赋予 React.FC 泛型，还有 React.memo，也不能用 function 关键字声明。

函数式组件每一次 rerender 都会执行函数体内的所有代码，需要通过 useEffect 和 useCallback 优化，增加了开发者的心智负担，尤其对于新手而言更容易写出低性能代码。

函数式组件还不能被继承，我认为函数式组件除了 hooks 复用一无是处