组件性能优化
-
减少state中的数据:
-
state 中只存储跟组件渲染相关的数据
-
对于一些不用做渲染的数据不要放在 state 中,例如定时器id等
-
对于这些渲染中不需要的数据直接放在 this 中就可以
-
-
避免不必要的重新渲染:
-
组件的更新机制:父组件的更新也会引起子组件的更新
-
出现问题:子组件没有任何变化的时候,也会重新渲染
-
解决方式:使用 钩子函数 shouldComponentUpdate(nextProps, nextState)
-
通过设置返回值决定组件是否要重新渲染。返回true 表示重新渲染,返回 false 表示不重新渲染
-
该钩子函数实在更新阶段的钩子函数,组件重新渲染前执行
-
//解释案例
shouldComponentUpdate(nexrProps, nextState) {
//nextProps : 最新的 props 值
//nextState : 最新的 state 值
return false // true
}
// 如果上次的数值结果与这次相同的话,就不用重新渲染 shouldComponentUpdate(nextProps, nextState) { if(nextState.num == this.state.num) { return false } return true }
- **纯组件:**
- 纯组件: React.PureComponent 和 React.Component 功能相似
- 在纯组件中,自动实现了 shouldComponentUpdate 这个钩子,不需要手动进行判断
- 内部实现:纯组件内部通过 **shallow compare(浅层对比)** 对比了前后两次的 props 和 state 的值,从而来判断是否重新渲染组件
- 浅层对比:
- 对于普通值类型:比较两个值是否相等
- 对于引用值类型:只比较了对象的引用地址是否相同----不能直接在原数据上直接修改了,否则页面不会重新渲染,需要重新创建一个对象。
```javascript
state = {
obj : {
num : 1
}
}
handleClick = () => {
//使用扩展运算符创建一个新对象
const newObj = {...this.state.obj, num : 2}
this.setState(() =>{
return {
obj = newObj
}
})
}
```