react的类组件和函数组件

react的最小单位是组件

相同点

• 实际用途是一样的，都可作为基础组件展示UI
• 在现代浏览器中，除极端场景下，类（类组件）和闭包（函数组件）的性能差异不大

区别点

• 代码实现思想
  • 类组件的根基是OOP，面向对象编程
  • 函数组件的根据是FP，函数式编程
• 使用场景
  • 类组件使用生命周期
  • 函数组件使用react hooks实现类似生命周期的能力
• 设计模式
  • 类组件可以实现继承
  • 函数组件缺少继承能力

    react前端思想：组合优于继承（继承的灵活性差，细节屏蔽过多）

• 性能优化
  • 类组件依靠shouldComponentUpdate函数阻断渲染
  • 函数组件依靠React.memo()来优化

    React.memo 并不是阻断渲染，而是跳过渲染组件的操作并直接复用最近一次渲染的结果，这与 shouldComponentUpdate 是完全不同的。

• 未来趋势
  • 基于hooks的加持，react社区主推函数组件

优劣性

• 类组件
  • this的模糊性
  • 业务逻辑散落在生命周期中
  • 类组件缺乏标准的拆分方式
• 函数组件
  • 基于函数式编程的优点（输入输出恒定，无副作用等），函数组件更纯粹、简单、易测试。
  • 闭包捕获的值优于this的模糊性，捕获的值永远是确定且安全的
  • 更细腻的逻辑组织和复用，更好的作用于时间切片与并发模式
  • 由于函数组件的执行从来都是自顶向下，依赖于dom diff算法不至于频繁渲染