React 源码解析之 Component 和 PureComponent

在 React v16.8.0 版本之前，我们总是习惯大多数的使用 React.Component 来创建一个组件，那么 React.Component 是怎么来的呢？本文将带你一探究竟，同时深入浅出地解析 Component 和 PureComponent 的工作原理，并探讨如何在项目中合理使用它们来优化性能。

React.Component 的前世今生

React.Component 的前身是 React.PureComponent，它在 React v0.14 版本中引入，目的是为了解决组件更新过多的问题。在当时，React 使用的是一个名为 “Virtual DOM” 的技术，该技术通过比较组件的旧状态和新状态来决定是否需要更新组件。然而，如果组件的 state 或 props 没有发生变化，那么组件就不需要更新。

为了解决这个问题，React.PureComponent 引入了 shouldComponentUpdate() 方法，该方法允许组件决定是否需要更新。如果 shouldComponentUpdate() 返回 false，则组件将不会更新，即使它的 state 或 props 发生了变化。

Component 和 PureComponent 的比较

Component 和 PureComponent 都是 React 中的组件类，它们都继承自 React.Element。Component 是 React 中最基本、最常用的组件类，而 PureComponent 是一个更高阶的组件类，它提供了 shouldComponentUpdate() 方法来优化组件的性能。

下表列出了 Component 和 PureComponent 的主要区别：

特性	Component	PureComponent
性能	较低	较高
使用场景	一般组件	性能敏感的组件
shouldComponentUpdate() 方法	无	有

如何选择合适的组件类

在选择组件类时，您需要考虑以下因素：

• 组件的性能要求：如果组件需要高性能，那么您应该使用 PureComponent。
• 组件的复杂性：如果组件非常复杂，那么您应该使用 Component。
• 组件的更新频率：如果组件经常更新，那么您应该使用 PureComponent。

总结

Component 和 PureComponent 都是 React 中非常重要的组件类，它们都可以用来创建出色的 React 组件。在选择组件类时，您需要考虑组件的性能要求、组件的复杂性和组件的更新频率。