六、【React拓展】Component的2个效率问题

1、Component的2个问题

1. 只要执行 setState()；即使不改变状态数据，组件也会重新 render() —— 效率低
2. 只要父组件重新 render(), 子组件就会自动重新 render()，纵使子组件没有用到父组件的任何数据 —— 效率低

2、期望

• 只有当组件的state或props数据发生改变时才重新render()

3、原因

• Component中的shouldComponentUpdate()总是返回true

4、解决方案

4.1、方案一

• 重写 shouldComponentUpdate() 方法

比较新旧state或props数据, 如果有变化才返回true，如果没有返回false

4.2、方案二

• 使用 PureComponent 替换 Component

PureComponent 重写了 shouldComponentUpdate()，只有 state 或 props 数据有变化才返回 true

注意:
只是进行 state 和 props 数据的浅比较，如果只是数据对象内部数据变了，返回 false
不要直接修改 state 数据，而是要产生新数据

• 项目中一般使用 PureComponent 来优化

4.3、函数式组件方案

• 使用 React.memo