在 React 中,需要性能优化的地方其实就是,避免一些不必要的重新渲染!!eg:父组件自身的状态更新,自己重新渲染,带着子组件也一起重新渲染,但其实子组件大可不重新渲染,因为子组件自身状态没有更新....
<1> shouldComponentUpdate()
控制组件自身,或者子组件是否需要重新渲染,通过返回true
or false
来进行控制!!!
<2> PureComponent
PureComponent
是在Component
之外为我们提供了 PureComponent,来为我们完成这种对比逻辑。
它会自动帮我们比较新 props 和 旧 props 、新 state 和 旧 state (值相等或者对象含有相同的属性,且属性值相同),自行决定 shouldComponentUpdate()
返回true
or false
,从而控制要不要重新更新!!
注意:
PureComponent
并不是适合任何情况,如果我们的 state 或 props 需要频繁更新,那使用PureComponent
就背道而驰了,因为如果就是要更新,就直接更新好了,使用PureComponent
还要多花比较的时间。eg :页面有倒计时效果!!