React Component Purecomponent Me

    这几个跟react的渲染优化有关的。举个栗子让大家更好理解。

Example

比如，一个组件state里面有两个值，其中一个是某个input的value，另一个是记录something的状态（比如发送请求的状态），这个状态与界面和交互是无关的。那么很明显只有input的value改变的时候才需要调用render重新渲染。通过减少渲染次数来优化用户体验。

React.Component

先说React.Component 中的shouldComponentUpdate(nextProps, nextState) 这个方法，这个方法返回bool，true就是去更新组件，false不更新。他是在render前调用的。按照上面的例子，只要在shouldComponentUpdate比较 this.state.value和nextState.value返回true，其他return false。

React.PureComponent

在React.PureComponent（15.3出的）中是没有shouldComponentUpdate方法的，他的渲染是通过浅比较（比较引用，不比较内部的值）触发的。即如果你想让哪个值改变的时候去渲染，就需要改变它的引用（指针）。

React.memo()

React.memo() 是react16.6出的一个高阶组件，之前的PureComponent只能配合class使用，React.memo() 则可以直接用函数实现。原理依然是浅比较。
使用方法(官方demo)：

function MyComponent(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}
export default React.memo(MyComponent, areEqual);