PureComponent 纯函数
2022-11-17 20:56:38
PureComponent 与纯函数组件的性能优化及注意事项
一、PureComponent 的基本概念
PureComponent 是 React 提供的一个基类，用于优化组件的性能。它内部实现了 shouldComponentUpdate 方法，通过浅比较（shallow comparison）props 和 state 来决定是否重新渲染组件。如果 props 和 state 在浅比较下相等，则不会触发重新渲染，从而提高了性能。
二、PureComponent 的使用
适用场景：
当组件的 props 和 state 都是不可变数据（immutable data）或者简单数据类型（如数字、字符串、布尔值等）时，PureComponent 可以有效地避免不必要的重新渲染。
适用于 class 组件。
使用方法：
导入 PureComponent：import React, { PureComponent } from 'react'。
让组件继承 PureComponent 而不是 Component。
三、PureComponent 的注意事项
浅比较的限制：
PureComponent 使用浅比较来检查 props 和 state 的变化。这意味着如果 props 或 state 中的对象是嵌套对象或数组，即使内部数据发生了变化，只要引用没有改变（即对象或数组的引用地址没有变化），PureComponent 就会认为数据没有变化，从而不会触发重新渲染。
例如，在上面的例子中，当 obj 的 num 属性发生变化时，由于 obj 的引用也发生了变化（每次 setState 时都创建了一个新的对象），所以 PureComponent 能够检测到变化并触发重新渲染。但如果只是修改了 obj 内部属性的值而没有改变 obj 的引用，那么 PureComponent 将不会触发重新渲染。
性能优化与副作用：
虽然 PureComponent 可以提高性能，但过度依赖它可能会导致一些难以察觉的问题。例如，当组件依赖于外部状态或副作用（side effects）时，PureComponent 的浅比较可能会阻止这些状态或副作用的更新。
因此，在使用 PureComponent 时，需要确保组件的 props 和 state 是可预测和可控的。
不适用于函数组件：
PureComponent 只能用于 class 组件。对于函数组件，React 提供了 React.memo 来实现类似的功能。
四、示例分析
在提供的示例中：
- 当 count 发生变化时，由于 count 是简单数据类型，且每次 setState 时都会创建一个新的值，所以 PureComponent 能够检测到变化并触发重新渲染。
- 当 obj 的 num 属性发生变化时，由于每次 setState 时都创建了一个新的 obj 对象，所以 PureComponent 同样能够检测到变化并触发重新渲染。
- 然而，如果 obj 的引用没有变化（例如，只是修改了 obj 内部属性的值而没有重新赋值给 state），那么 PureComponent 将不会触发重新渲染，这可能会导致界面显示不正确。
五、结论
PureComponent 是一个有用的性能优化工具，但使用时需要注意其浅比较的限制和潜在的问题。在决定使用 PureComponent 之前，需要仔细评估组件的 props 和 state 的复杂性和变化模式。如果组件的 props 和 state 包含嵌套对象或数组，并且这些对象或数组的内部数据可能会发生变化，那么可能需要考虑其他性能优化策略，如使用 React.memo、useMemo、useCallback 等。
热门标签
