如何使用React中的Component、PureComponent、Immutable及使用时机

一、前言

React虚拟DOM再快，也比不上直接操作DOM。并且直接使用React.Component还时常会出现大量重复渲染的情况。
性能提升，说到底，其实只是对React生命周期中shouldComponentUpdate这个方法的优化。

二、Component和PureComponent的区别

在Component中shouldComponentUpdate一直返回true，即只要变化，就一定渲染全部。

1个父组件下有1万个子组件，其实只有1个父组件和1个子组件变化，但变化导致需要全部渲染。
结果：比较次数0，渲染次数10001。

在PureComponent中shouldComponentUpdate会对props和state的所有属性做浅比较，没变化则不渲染。

1个父组件下有1万个子组件，其实只有1个父组件和1个子组件变化，每个子组件都进行了props和state的浅比较，变化的才渲染。
结果：比较次数10000（1个组件的props和state的全部属性浅比较，算1次），渲染次数2。

三、PureComponent问题

1、数组和对象的浅比较，只比较引用，所以数组和对象内部产生变化，但引用未变的话，则不会重新渲染。而Component不会有这问题。
2、浅比较也要计算，也需要花费时间。

四、为什么要使用Immutable

Immutable就是要解决浅比较所出现的问题。

原先

// 当userList内部项变了，依然不会重新渲染，因为userList的引用未变
const userList = [1,2,3]
<继承PureComponent的组件 list={userList}>

使用Immutable

// 原先
// 使用Immutable的方法改变userList，会返回改变后的数据和新的引用，所以会重新渲染
const userList = Immutable([1,2,3])
<继承PureComponent的组件 list={userList}>

五、只要拷贝数组和对象，并改变引用，PureComponent就不会有问题，为什么还要使用Immutable?

因为Immutable比较高效

六、element.react 和 ant-design 如何处理这些

element.react 未看到有使用shouldComponentUpdate，PureComponent的痕迹。
ant-design 在可能发生重复渲染影响性能的组件上，都重写了shouldComponentUpdate方法，根据具体情况返回true或false，主要还是进行浅比较。

七、何时使用Component或PureComponent

1、当组件是独立的，组件在页面中的个数为1或2的，组件有很多props，state，并且当中还有些是数组和对象的，组件需要每次都渲染的，使用Component
2、当组件经常作为子组件，作为列表，组件在页面中数量众多，组件props, state属性少，并且属性中基本没有数组和对象，组件不需要每次都渲染，只有变化了才渲染，使用PureComponent

凭主观，我觉得
以下组件适合Component

Button
Input

以下组件适合PureComponent

Radio
Checkbox
Option