React篇(006)-什么是 Pure Components?

有网友碰到这样的问题“React篇(006)-什么是 Pure Components?”。小编为您整理了以下解决方案，希望对您有帮助：

解决方案1：

React 中的 Pure Components 是一种性能优化的手段，指的是 React.PureComponent。

定义与继承：

React.PureComponent 是 React 提供的一个基类，与 React.Component 类似，但它在内部实现了 shouldComponentUpdate() 方法。

当你创建一个组件并继承自 React.PureComponent 时，你无需自己编写 shouldComponentUpdate() 方法。

浅比较机制：

React.PureComponent 通过浅比较（shallow comparison）来检查 props 和 state 是否发生变化。

浅比较仅比较对象的引用是否相同，而不深入比较对象的内部属性是否发生变化。

如果 props 或 state 的引用没有变化（即指向同一个对象），则 shouldComponentUpdate() 返回 false，组件不会重新渲染。

如果 props 或 state 的引用发生了变化（即指向了一个新的对象），则 shouldComponentUpdate() 返回 true，组件会重新渲染。

性能优化：

使用 React.PureComponent 可以避免不必要的重新渲染，从而提高应用的性能。

特别是在大型应用中，减少不必要的渲染可以显著提升用户体验。

注意事项：

浅比较仅适用于对象和数组的引用比较，对于基本数据类型（如字符串、数字、布尔值等）的比较是值比较。

如果你的 props 或 state 包含的是可变对象（即对象的内部属性可以变化但引用不变），那么 React.PureComponent 可能无法正确检测到变化，从而导致组件不更新。

在这种情况下，你可能需要手动实现 shouldComponentUpdate() 方法或使用其他性能优化手段（如使用 React.memo、useMemo、useCallback 等）。

另外，由于 React.PureComponent 进行了浅比较，因此在使用时需要注意避免在 props 或 state 中直接修改对象或数组的属性，而应该创建新的对象或数组来触发更新。

与 React.Component 的区别：

React.Component 是 React 的基础组件类，没有内置的 shouldComponentUpdate() 方法实现。

在 React.Component 中，如果你需要控制组件的更新行为，你需要自己实现 shouldComponentUpdate() 方法。

相比之下，React.PureComponent 通过内置的浅比较机制来自动控制组件的更新行为，从而简化了性能优化的过程。

使用场景：

React.PureComponent 适用于那些 props 和 state 比较简单且变化不频繁的场景。

在这些场景中，使用 React.PureComponent 可以有效地减少不必要的渲染并提高性能。

然而，在复杂的场景中（如 props 或 state 包含深层嵌套的对象或数组），React.PureComponent 可能无法正确检测到变化，此时需要考虑其他性能优化手段。

综上所述，React.PureComponent 是 React 提供的一种性能优化手段，通过内置的浅比较机制来自动控制组件的更新行为。在使用时需要注意避免在 props 或 state 中直接修改对象或数组的属性，并根据具体场景选择合适的性能优化手段。