pureComponent

PureComponent是优化react应用程序最重要的方法，可以减少不必要的render次数，提高性能。

原理

组件发生更新时，组件的props和state没有改变，render方法就不会触发，省去虚拟dom生成和对比的过程，其实就是react自动帮忙做了一个浅比较

if(this._compositeType === CompositeTypes.PureClass){
  shouldUpdate = !shallowEqual(prevProps,nextProps)||!shallowEqual(inst.state,nextState)
}

而 shallowEqual 又做了什么呢？会比较

1. Object.keys(state | props) 的长度是否一致，
2. 每一个 key 是否两者都有，
3. 是否是一个引用。
   也就是只比较了第一层的值，确实很浅，所以深层的嵌套数据是对比不出来的。

易变数据不能使用一个引用

数据类型如果是引用类型，需要注意

import React,{PureComponent,Component} from 'react'
class App extends Component/PureComponent {
  state = {
    items: [1, 2, 3]
  }
  handleClick = () => {
    const { items } = this.state;
    items.pop();
    this.setState({ items });
  }
  render() {
    return (<div>
      <ul>
        {this.state.items.map(i => <li key={i}>{i}</li>)}
      </ul>
      <button onClick={this.handleClick}>delete</button>
    </div>)
  }
}

export default App;

如果是Component，点击delete会得到li的减少
如果是PureComponent，li不会改变，因为items用的是一个引用，所以shallowEqual结果是true。

可以改正为：

handleClick = () =>{
  const {items} =this.state
items.pop()
this.setState({items:[].concat(items)})
}

每次改变都会产生一个新数组，就可以render了，但是很容易造成，数据没有改变，仍然render，浪费性能。

与 shouldComponentUpdate 共存

如果 PureComponent 里有 shouldComponentUpdate 函数的话，直接使用 shouldComponentUpdate 的结果作为是否更新的依据，没有 shouldComponentUpdate 函数的话，才会去判断是不是 PureComponent ，是的话再去做 shallowEqual 浅比较。

// 这个变量用来控制组件是否需要更新
var shouldUpdate = true;
// inst 是组件实例
if (inst.shouldComponentUpdate) {
  shouldUpdate = inst.shouldComponentUpdate(nextProps, nextState, nextContext);
} else {
  if (this._compositeType === CompositeType.PureClass) {
    shouldUpdate = !shallowEqual(prevProps, nextProps) ||
      !shallowEqual(inst.state, nextState);
  }
}

有很多还不是很理解
http://www.wulv.site/2017-05-31/react-purecomponent.html