-
React.PureComponent 是 React 15.3 版本添加的一个与 React.Component 同级的 API，适用于类组件；
-
React.memo 是 React 16.6 版本新增的一个高阶函数 API，适用于函数组件；
-
这两个 API 本质上都是为了性能优化而生，通过使用这两个 API 可以减少页面不必要的重新渲染，提高页面性能；
纯组件概念
在 React 中，
纯组件是指在其 props 和状态没有变化的情况下，组件的输出 （即渲染结果） 是恒定的；换句话说，
纯组件的渲染过程只依赖于 props 和 state 的值，当它们相同时，组件不会重新渲染；这种行为使得
纯组件在性能上具有优势，可以有效减少不必要的渲染，优化应用的性能；
纯组件特点
相同的输入产生相同的输出：对于相同的 props 和 state，纯组件总是返回相同的渲染结果；
优化性能：通过实现浅比较，纯组件能够避免不必要的渲染，从而提升性能；
简化开发：纯组件使得组件变得更加可预测，降低了因状态和 props 变化引起的渲染复杂性；
纯组件工作原理
-
使用 PureComponent、React.memo 的组件会在组件的 shouldComponentUpdate 生命周期方法中自动执行
浅比较；这意味着，React 会比较当前的 props 和 state 与下一个 props 和 state 的值，如果它们相同，则不会重新渲染组件； -
浅比较是指比较对象的引用，而不是深层比较对象的每个属性；这意味着，只有当 props 或 state 的引用发生变化时，纯组件才会重新渲染；
手动实现 PureComponent
class MyPureComponent extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
// 执行浅比较来决定是否更新组件
// 注意：这只是一个简化的示例，实际的浅比较可能需要更复杂的逻辑来处理嵌套对象和数组
const keys = Object.keys(this.props);
const nextKeys = Object.keys(nextProps);
if (keys.length !== nextKeys.length) return true; // 键的数量不同，必然需要更新
for (let key of keys) {
if (this.props[key] !== nextProps[key]) return true; // 如果值不同，返回 true 以更新组件
}
return false; // 所有键和值都相同，返回 false 以阻止更新
}
render() {
// 组件的渲染逻辑...
}
}
手动实现 React.memo
// 手动实现一个简单的React.memo
function memo(Component) {
const cache = new Map();
class MemoizedComponent extends React.PureComponent {
render() {
const propsKey = JSON.stringify(this.props);
if (cache.has(propsKey)) {
console.log('使用缓存的结果渲染组件');
return cache.get(propsKey);
} else {
const renderedComponent = React.createElement(Component, this.props);
cache.set(propsKey, renderedComponent);
console.log('首次渲染组件，将结果存入缓存');
return renderedComponent;
}
}
}
return MemoizedComponent;
}
// 使用示例
function MyComponent(props) {
console.log('MyComponent渲染');
return <div>{props.value}</div>;
}
const MemoizedMyComponent = memo(MyComponent);
// 渲染组件
ReactDOM.render(
<div>
<MemoizedMyComponent value="A" />
<MemoizedMyComponent value="A" />
<MemoizedMyComponent value="B" />
</div>,
document.getElementById('root')
);
纯组件的使用场景
-
大型应用：在大型 React 应用中，组件的性能至关重要，使用纯组件可以减少不必要的渲染，提升应用的响应速度和性能； -
可预测的输出：如果组件的输出是根据 props 和 state 计算得出的，且没有副作用，那么使用纯组件将使得组件变得更加可预测，便于测试和维护； -
状态管理库的使用：在使用如 Redux 等状态管理库的应用中，组件往往会接收来自全局状态的 props，此时纯组件能够有效地避免因为状态的微小变化引起的频繁渲染；
纯组件的限制
-
不支持深比较：由于纯组件只执行浅比较，对于嵌套对象的变化，纯组件可能无法检测，这意味着，如果传递一个对象作为 props，而这个对象的属性发生了变化，但引用未变，纯组件不会重新渲染 （更新对象时返回一个新的对象即可）； -
组件的副作用：如果组件在渲染时会产生副作用，例如发起网络请求或修改 DOM，使用纯组件可能会导致不可预测的结果； -
需要手动实现的优化：对于需要深比较或特定优化的组件，开发者可能仍需手动实现 shouldComponentUpdate 方法，而不是简单地使用 PureComponent；
React✍️ Context 上下文
上一篇
