React源码系列：剖析组件的分类与差异

Component 与 PureComponent 的异同

共同点：

• 都是 React 的基类组件。
• 都具有生命周期方法，如 componentDidMount、componentDidUpdate 等。
• 都可以使用 props 和 state 来管理组件的状态和数据。

不同点：

• PureComponent 通过实现 shouldComponentUpdate 方法来优化组件的性能。
• PureComponent 仅在检测到 props 或 state 发生变化时才会重新渲染组件，而 Component 则会在每次 props 或 state 发生变化时都重新渲染组件。
• PureComponent 适用于那些频繁更新但状态变化很少的组件，例如纯展示组件或只包含少量状态的组件。
• Component 适用于那些状态变化频繁或需要复杂逻辑的组件，例如表单组件或带有复杂状态管理的组件。

PureComponent 的内部实现：
PureComponent 内部实现了一个 shouldComponentUpdate 方法，该方法会比较当前的 props 和 state 与上一次渲染时的 props 和 state，如果发现它们没有变化，则返回 false，阻止组件重新渲染。

shouldComponentUpdate(nextProps, nextState) {
  return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState);
}

何时使用 PureComponent？

• 当组件的状态很少变化时
• 当组件的渲染开销很大时
• 当组件被频繁重新渲染时

何时使用 Component？

• 当组件的状态经常变化时
• 当组件的渲染开销很小时
• 当组件不经常重新渲染时

Function Component

Function Component 是 React 中的一种函数式组件，它是一种更轻量级的组件类型，不需要定义类或使用 this 。Function Component 使用 ES6 箭头函数或普通函数来定义，并接受 props 作为参数，返回一个 React 元素。

Function Component 的优点：

• 简洁： Function Component 的语法更简洁，更容易理解和维护。
• 性能： Function Component 的性能通常优于 Class Component，因为它们不需要创建实例和管理生命周期方法。
• 跨平台： Function Component 可以轻松地跨平台使用，无论是在浏览器中还是在服务端渲染的应用程序中。

Function Component 的缺点：

• 有限的功能： Function Component 无法使用生命周期方法，因此它们不适合用于需要复杂状态管理或复杂逻辑的组件。
• 可重用性： Function Component 通常不如 Class Component 可重用，因为它们不能被继承。

何时使用 Function Component？

• 当组件很简单，只需要渲染一些数据时
• 当组件不需要任何生命周期方法时
• 当组件不需要任何状态管理时
• 当组件需要在跨平台的环境中使用时

总结

Component、PureComponent 和 Function Component 是 React 中的三种不同的组件类型，每种类型都有自己的特性、优缺点和适用场景。在选择组件类型时，您需要考虑组件的复杂性、性能要求、跨平台需求等因素。