React之Component和PureComponent区别

1 两者区别

抓住最根本的区别：PureComponent内置了shouldComponentUpdate方法，自动进行了判断，使用的是浅比较判断state和props是否变化，由于是浅比较使用的是===，即判断的是引用地址是否变化，当无变化返回false，不更新render，返回true，更新render。

我们知道继承Component后，默认的shouldComponentUpdate返回true，即只要你不重写该方法，则如果进入该方法则每次都会更新render，而PureComponent为我们重写了该方法，如果你在PureComponent中手动重写该方法会有警告，且不会调用你写的方法。

1.1 组件props和state是基础数据类型

这种情况下，Component和PureComponent产生的结果是相同的，因为只要props或state变化，浅比较结果都是true，这和Component默认的方法结果相同，都会重新render

1.2 组件props和state含有引用数据类型

如果props和state含有js对象或者数组等引用数据类型，则浅比较结果无法判断出该对象是否改变，从而导致如果改变引用数据类型，页面不会触发render

而继承Component的组件则不会出现这种情况，因为每次更改state或props其默认都会进行重新渲染

1.3 父组件继承Component，子组件继承PureComponent

这种情况下，父组件正常更新，而子组件按照上两种情况更新

1.4 父组件继承PureComponent

此时，父组件按照1.1和1.2进行更新，即父组件state和props中引用数据类型的改变无法触发重新render，子组件无论继承何种都不会更新

2 适用范围

两种组件对state和props都在一定场景下表现出性能优势

如果组件的state和props含有引用数据类型，只能使用：继承Component组件
如果组件state和props更新频繁，首选：继承Component组件（频繁的浅比较也是很消耗性能）
如果需要进行自定义判断是否render，只能使用：继承Component组件
如果state和props只包含基础数据类型，推荐使用：继承PureComponent组件