【多角度】react中类组件与函数组件区别

bug收集：专门解决与收集bug的网站

网址：www.bugshouji.com

常见面试题：react中类组件与函数组件的区别

常见的回答：

类组件有生命周期，函数组件没有

类组件需要继承 Class，函数组件不需要

类组件可以获取实例化的 this，并且基于 this 做各种操作，函数组件不行

类组件内部可以定义并维护 state， 函数组件为无状态组件（可以通过hooks实现）

…

函数组件相比较类组件，优点是更轻量与灵活，便于逻辑的拆分复用

今天，分享下下面不同角度上分析的，类组件与函数组件的区别

1、设计思想

• 类组件的根基是 OOP(面向对象编程)，所以它会有继承，有内部状态管理等
• 函数组件的根基是 FP(函数式编程)，与数学中的函数思想类似，所以假定输入和输出存在某种关联的话，那么相同输入必定会有相同的输出

所以相对于类组件，函数组件会更加的纯粹，简单，更利于测试，这就是它们本质上的区别

2、独有能力

类组件是通过各种生命周期函数来包装业务逻辑的，这也是类组件所特有的。

在还没有 hooks 的时代，函数组件的能力是相对较弱的，在那个时候常常用高阶组件包裹函数组件模拟生命周期，当时流行的解决方案是 Recompose，在还没有 hooks 的时代，函数组件的能力是相对较弱的，在那个时候常常用高阶组件包裹函数组件模拟生命周期，当时流行的解决方案是 Recompose。

之后创建了Hooks, 该方案不是让函数组件去模仿类组件的功能，而是提供了新的开发模式让组件渲染和业务逻辑进行分离，设计出如下代码

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

苟有恒 , 何必三更眠五更起