React13性能优化之PrueComponent

• PureComponent是内部制定了shouldComponentUpdate生命周期的Component

           *它重写了一个方法来替换shouldComponentUpdate生命周期方法

•  平常开发过程中设计组件能使用PureComponent的地方都尽量使用
• 想要使用PrueComponent特性要记住两个小原则：  

            《1》确保数据类型是值类型

            《2》如果是引用类型，确保地址不变，同时不应当有深层次数据变化。

• 使用PrueComponent可以省去shouldComponentUpdate生命周期的代码，代码会简单很多

 

示例:

• 父组件：

    

 

• 子组件Title：

    

 

• 子组件Count

    

 

此时就会发生一个问题，子组件Count每次随着父组件传入的props的改变都会发生重新渲染，而Title组件也会发生渲染。

• 解决，在Title组件：

      

 

使用PureComponent去代替我们的生命周期：

注：PureComponent组件就会帮我们去比较状态是否有改变，判断是否应该去更新重新渲染。试想，如果接受的props有很多的话，shouldComponentUpdate里面需要写的判断代码就很多了，处理有些麻烦。所以PureComponent很好的解决了这个问题。