（React）React类式组件和函数式组件的区别

语法不同、设计思想不同。

• 函数式组件是函数式编程思想，而类组件是面向对象编程思想。面向对象编程将属性和方法都封装起来了，屏蔽了很多细节，不利于测试。

生命周期、状态变量

• 类式组件：使用state对象定义状态变量，componentDidMount、componentDidUpdate、shouldComponentUpdate等生命周期钩子函数。

• 函数组件：没有this，试用了一系列的内置hooks实现对应的功能，比如使用useState创建状态变量，使用useEffect实现类似于componentDidMount、componentDidUpdate 等生命周期钩子函数功能。

复用性

• 类式组件：使用了hoc（高阶组件）、render props 实现组件的逻辑复用、扩展组件的功能。
• 函数组件：使用自定义hooks实现组件的逻辑复用。

优缺点

• 函数组件

  优点：

  1. 相对于类组件 代码量少，代码更简洁，可读性更强。
  2. 更易于拆分组件和测试。

  缺点：

  1. 在业务逻辑很复杂 ，状态依赖关系错乱的情况下，使用useEffect、useMemo等hooks，对其依赖项的思考给开发者带来更大的心理负担。
  2. 不具备处理错误边界等业务情况的hooks。

• 类组件

  优点：

  1. 功能完善，具有componentDidsCatch、getDerivedStateFromError 等钩子函数处理边界错误。

  缺点：

  1. 在复用性上，hoc组件会出现嵌套地狱，重名props被覆盖，难以拆分和测试等问题。