通过Pure Render和Immutable实现React中的性能优化

简要介绍：React中的render存在着不必要的渲染，可以通过Puer Render（PureComponent）来减少渲染的次数，但是Puer Render只是进行浅比较，无法实现深层对象上的性能优化。Pure Render结合Immutable可以减少渲染次数。

1 . React中的render

仅通过React中的render，存在着不必要的渲染，这种不必要的渲染分为两大类。

（1）自身的state没有改变

在React的render中，只要发生setState行为，就会去重新渲染，即使setState的属性前后并没有发生变化，比如：

class TestComponent extends React.Component{
   
  constructor(props){
    super(props);
    this.state={
      count:0
    }
  }
  componentDidMount(){
    let self=this;
    setTimeout(function(){
      self.setState({
        count:0
      })
    },1000)
  }
  componentDidUpdate(){
    console.log('组件更新了');
  }
  render(){
    return <div>1</div>
  }
}

在这个组件中，我们setState的值在前后并没有发生改变，但是调用此组件会输出：

//组件更新了

说明只要setState发生了，即使值在前后没有发生变化，组件也会重新render。

（2）父组件传递的props会引起所有子组