函数组件和类组件

• 组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思
• 相同点
  • 它们都可以接收属性并且返回 React 元素
• 不同点
  • 编程思想不同：类组件需要创建实例，是基于面向对象的方式编程，而函数式组件不需要创建实例，接收输入，返回输出，是基于函数式编程写的
  • 内存占用：类组件需要创建并保存实例，会占用一定内存，函数组件不需要创建实例，可以节约内存占用
  • 捕获特性：函数组件具有值捕获特性
  • 可测试性：函数式组件更方便编写单元测试
  • 状态：类组件有自己的实例，可以定义状态，而且可以修改状态更新组件，函数式组件以前没有状态，现在可以使用 useState 使用状态
  • 生命周期：类组件有自己完整的生命周期，可以在生命周期内编写逻辑，函数组件以前没有生命周期，现在可以使用 useEffect 实现类似生命周期的功能
  • 逻辑复用：类组件可以通过继承实现逻辑复用，但官方推荐组件优于继承，函数组件可以通过自定义 hooks 实现逻辑的复用
  • 跳过更新：类组件可以通过 shouldComponentUpdate 和 PureComponent 来跳过更新，而函数式组件可以使用 React.memo 来跳过更新
  • 发展前景：未来函数式组件将会成为主流，因为它可以更好的屏蔽 this 问题、规范和复用逻辑，更好的适合事件分片和并发渲染

捕获特性例子：

function FunctionComponent() {
  let [number, setNumber] = React.useState(0);
  const handleClick = () => {
    setTimeout(() => {
      console.log(number);
    }, 1000);
    setNumber(number+1)
  }

  return (
    <div>
      <p>{number}</p>
      <button onClick={handleClick}>+</button>
    </div>
  )
}

ReactDOM.render(
  <React.StrictMode>
    <FunctionComponent />
  </React.StrictMode>,
  document.getElementById('root')
);