pureComponent
作用
当使用component时,父组件的state或prop更新时,无论子组件的state、prop是否更新,都会触发子组件的更新,这会形成很多没必要的render,浪费很多性能;pureComponent的优点在于:pureComponent在shouldComponentUpdate只进行浅层的比较,只要外层对象没变化,就不会触发render,减少了不必要的render,当遇到复杂数据结构时,可以将一个组件拆分成多个pureComponent,以这种方式来实现复杂数据结构,以期达到节省不必要渲染的目的,如:表单、复杂列表、文本域等情况;
区别
pureComponent通过prop和state的浅比较(shallowEqual)来实现shouldComponentUpdate,component是需要开发者在shouldComponentUpdate钩子函数中自己写render逻辑的,在某些情况下可以使用pureComponent来提升性能。
浅比较(shallowEqual):是react源码中的一个函数,它代替了shouldComponentUpdate的工作, 只比较外层数据结构,只要外层相同,则认为没有变化,不会深层次比较数据。
优缺点
pureComponent的优点:
不需要开发者使用shouldComponentUpdate就可使用简单的判断来提升性能;
pureComponent的缺点:
由于进行的是浅比较,可能由于深层的数据不一致导致而产生错误的否定判断,从而导致页面得不到更新;
为什么可以提升性能
主要在于pureComponent可以减少不必要的render,从而提高了性能,另外就是,不需要再手写shouldComponentUpdate里面的代码,从而节省了代码量;
当组件更新时,pureComponent的shouldComponentUpdate函数里对props和state做了一个浅对比,如果组件的state和prop都没有发生变化,就不会触发render方法,省去了virtual DOM的diff和重新生成的过程,从而提升了性能;也正是因为是浅对比,所以不适合使用在含有多层嵌套对象的state和prop中。
总结
pureComponent能够节省大部分不必要的渲染,尤其在表单等复杂组件中,将组件拆分成简单的pureComponent,使得组件变得可维护;
参考文章:
https://juejin.cn/post/6844904094021206024