在React中当我们的组件被调用时,那么被调用的组件的render函数都会被调用一次,也就是组件会被渲染出来,但是当我们只改变其中一个组件的值,只想让那一个改变的组件的render函数被重新调用而其他组件不调用时,这时候可以用到 sholdComponentUpdate() 这个生命周期来阻断render函数。
没调用sholdComponentUpdate前
在这个生命周期中会传过来两个参数 分别时最新的props和最新的state 由于我们的组件中依赖counter这个属性 而不想阻断这个属性重新渲染render 这个时候就需要将最新的state与旧state进行比较了 当两个不相等时返回true 也就是不阻断render函数的调用。大大提升了页面的性能。这个时候couter改变才会重新render 其他属性改变不会重新render。
用这个方法还是比较麻烦的,因为当一个页面需要依赖很多属性值的时候,我们就要要一个一个的去判断需不需要调用render,并且这个方法在函数式组件中是不适用的,这个时候就是我们的PureComponent与memo出场的时候了。
当组件是类组件的时候就用PureComponent,是函数式组件的时候就用mome。他们的作用都是将组件中依赖的值自动进行浅层比较,以达到优化性能的目的。
在类组件中只要让组件继承自PureComponent就可以了。当使用了PureComponent时,react内部回去判断构造函数的原型上是否有isPureReactComponent这个属性,然后对新旧props以及新旧state进行浅层比较,如果发生改变则返回true,反之返回false
而函数式组件则是通过用memo包裹函数组件来实现浅层比较的。形式如下: