react组件性能优化

1.减轻state

state中只存放和组件渲染相关的状态数据,和组件渲染无关的比如定时器id等状态数据可以直接放在组件实例this上,这样一样能够通过this在组件别的地方进行共享,尽可能的减轻state的重量,这样能够提高react渲染更新时的效率

2.避免不必要的渲染

因为react的组件更新机制,只要父组件更新状态重新渲染它的子组件树也会跟着重新渲染,有时我们仅仅只希望部分组件重新render,那么我们就可以在组件重新渲染之前shouldComponentUpdate钩子函数里做手脚,通过条件判断后返回true/false来决定是否要走render.

手动实现:拿到最新的state和props和组件当前的state和props进行对比决定是否要更新

纯组件实现:通过继承React.PureComponent替代手动实现shouldComponent进行state和props的比较,它内部自己对state和props进行了比较来决定是否要更新

React.PureComponent纯组件内部比较原理:shallow compare(浅层对比),当state或者props的值有引用类型的字段时,比较的是地址值,所以这里有坑,造成修改了对象的属性值不会重新渲染

解决方法: 创建一份新数据进行修改,不要直接修改原对象引用上的属性