bug收集：专门解决与收集bug的网站
网址：www.bugshouji.com
常见面试题：react中类组件与函数组件的区别
常见的回答：
类组件有生命周期，函数组件没有
类组件需要继承 Class，函数组件不需要
类组件可以获取实例化的 this，并且基于 this 做各种操作，函数组件不行
类组件内部可以定义并维护 state， 函数组件为无状态组件（可以通过hooks实现）
…
函数组件相比较类组件，优点是更轻量与灵活，便于逻辑的拆分复用
今天，分享下下面不同角度上分析的，类组件与函数组件的区别
1、设计思想
- 类组件的根基是 OOP(面向对象编程)，所以它会有继承，有内部状态管理等
- 函数组件的根基是 FP(函数式编程)，与数学中的函数思想类似，所以假定输入和输出存在某种关联的话，那么相同输入必定会有相同的输出
所以相对于类组件，函数组件会更加的纯粹，简单，更利于测试，这就是它们本质上的区别
2、独有能力
类组件是通过各种生命周期函数来包装业务逻辑的，这也是类组件所特有的。
在还没有 hooks 的时代，函数组件的能力是相对较弱的，在那个时候常常用高阶组件包裹函数组件模拟生命周期，当时流行的解决方案是 Recompose，在还没有 hooks 的时代，函数组件的能力是相对较弱的，在那个时候常常用高阶组件包裹函数组件模拟生命周期，当时流行的解决方案是 Recompose。
之后创建了Hooks, 该方案不是让函数组件去模仿类组件的功能，而是提供了新的开发模式让组件渲染和业务逻辑进行分离，设计出如下代码
代码语言：javascript复制import React, { useState, useEffect } from 'react';
function App() {
const [data, setData] = useState({ posts: [] });
useEffect(() => {
(async () => {
const result = await fetchPosts();
setData(result.data);
}()
}, []);
return (
<ul>{data.posts.map(p => <li>{p.title}</li>)}</ul>
);
}
export default App;3. 使用场景
从上面的内容咱们能够总结出：
- 在不使用 Recompose 和 Hooks 的情况，如果需要使用生命周期，那么就用类组件，限定场景比较固定
- 但在 recompose 或 Hooks 的加持下，这样的边界就模糊化啦，类组件和函数组件的能力边界是完全相同的，都可以使用类似生命周期的能力
4. 设计模式
在设计模式上，类组件是可以实现继承的，而函数组件没有继承能力
但是在react中官方是不推荐使用继承的，因为继承的灵活性更差，细节屏蔽的过多，所以就有了 组合高于继承 的铁律
5. 性能优化
类组件是通过 shouldComponentUpdate 生命周期函数去阻断渲染
函数组件是通过React.Memo 函数来优化，但它并不是去阻断渲染，具体怎么做的呢，请参考：《如何避免生命周期的坑》。
6. 未来的发展趋势
由于 React Hooks 的诞生，现在 函数组件成了React 社区主推的方案
React 团队从 Facebook的实际业务场景出发，通过探索时间切片和并发模式，以及考虑性能的进一步优化和组件间更合理的代码拆分后，认为 类组件的模式并不能很好地适应未来的趋势，它们给出了以下3个原因：
this 的模糊性
业务逻辑耦合在生命周期中
React 的组件代码缺乏标准的拆分方式
而使用 Hooks 的函数组件可以提供比原先更细粒度的逻辑组织和复用，且能更好的适用于时间切片和并发模式
参考：https://zhuanlan.zhihu.com/p/375853620
苟有恒 , 何必三更眠五更起
