React -- 类式组件的性能优化

26 阅读1分钟

在 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 :页面有倒计时效果!!