react中pureComponent和Component区别

13,657 阅读2分钟

0、核心问题:为什么要使用pureComponent?

答:当使用component时,父组件的state或prop更新时,无论子组件的state、prop是否更新,都会触发子组件的更新,这会形成很多没必要的render,浪费很多性能;pureComponent的优点在于:pureComponent在shouldComponentUpdate只进行浅层的比较,只要外层对象没变化,就不会触发render,减少了不必要的render,当遇到复杂数据结构时,可以将一个组件拆分成多个pureComponent,以这种方式来实现复杂数据结构,以期达到节省不必要渲染的目的,如:表单、复杂列表、文本域等情况;

1、区别:

pureComponent通过prop和state的浅比较(shallowEqual)来实现shouldComponentUpdate,component是需要开发者在shouldComponentUpdate钩子函数中自己写render逻辑的,在某些情况下可以使用pureComponent来提升性能。

浅比较(shallowEqual):是react源码中的一个函数,它代替了shouldComponentUpdate的工作, 只比较外层数据结构,只要外层相同,则认为没有变化,不会深层次比较数据。

2、pureComponent的优缺点:

   pureComponent的优点:

    不需要开发者使用shouldComponentUpdate就可使用简单的判断来提升性能;

   pureComponent的缺点:

    由于进行的是浅比较,可能由于深层的数据不一致导致而产生错误的否定判断,从而导致页面得不到更新;

3、为什么使用pureComponent可以提升性能?

主要在于pureComponent可以减少不必要的render,从而提高了性能,另外就是,不需要再手写shouldComponentUpdate里面的代码,从而节省了代码量;

当组件更新时,pureComponent的shouldComponentUpdate函数里对props和state做了一个浅对比,如果组件的state和prop都没有发生变化,就不会触发render方法,省去了virtual DOM的diff和重新生成的过程,从而提升了性能;也正是因为是浅对比,所以不适合使用在含有多层嵌套对象的state和prop中。

4、总结:

pureComponent能够节省大部分不必要的渲染,尤其在表单等复杂组件中,将组件拆分成简单的pureComponent,使得组件变得可维护;

5、参考文章:

www.jianshu.com/p/eaf64bd66…

www.cnblogs.com/BillyYoung/…