通过Pure Render和Immutable实现React中的性能优化-阿里云开发者社区

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

2018-06-26 3788

简介：

+关注继续查看

简要介绍：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会引起所有子组件render

父组件中的值传递给子组件，即使某些子组件中不需要重新渲染，也会重新render。举例来说，父组件为Father：

class Father extends React.Component{
  constructor(props){
    super(props);
    this.state={
      obj:{
        title:'test immutable',
        childZero:{
          name:'childZero',
          age:0
        },
        childOne:{
          name:'childOne',
          age:1
        },
        childTwo:{
          name:'childTwo',
          age:2
        }
      }
    }
  }
  componentDidMount(){
    let self=this;
    let {obj}=this.state;
    setTimeout(function(){
      self.setState({
        obj:obj
      })
    },1000)
  }
  render(){
    const {obj}=this.state;
    return <div>
             <ChildZero obj={obj}/>
             <ChildOne obj={obj}/>
             <ChildTwo obj={obj}/>
           </div>
  }
}

父组件有3个子组件：

class ChildZero extends React.Component{
  constructor(props){
    super(props);
  }
  componentDidUpdate(){
    console.log('childZero触发了更新')
  }
  render(){
    return <div>3</div>
  }
}
class ChildOne extends React.Component{
  constructor(props){
    super(props);
  }
  componentDidUpdate(){
    console.log('childOne触发了更新')
  }
  render(){
    return <div>3</div>
  }
}
class ChildTwo extends React.Component{
  constructor(props){
    super(props);
  }
  componentDidUpdate(){
    console.log('childTwo触发了更新')
  }
  render(){
    return <div>3</div>
  }
}

我们在父组件的componentDidMout方法中，setState然后观察子组件的更新情况，发现所有的子组件都会更新，具体输出为：

//childZero触发了更新
//childOne触发了更新
//childTwo触发了更新

2 . Pure Render可以减少浅层对象上不必要的更新

通过定义组件为Pure Render可以通过浅层比较，减少不必要的更新。我们通过使用PureComponent。同样的我们以1（1）中的为例：

class TestComponent extends React.PureComponent{
  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>
  }
}

通过PureComponent来代替Component，此时如果仅仅是浅层对象属性，当setState前后属性不变时，那么就不会有不必要的渲染。但是对于深层对象而言，pure Render无法实现。

3 .通过Immutable实现深层对象的性能优化

Immutable实现了js中的不可变数据结构，immutable具有不可变性，持久性等特点，通过数据共享的方式，修改相应的属性实现深度克隆的过程只会影响父类属性。

通过immutablejs可以方便进行深层对象的“相等”判断。在React的性能优化中，在生命周期函数shouldComponetUpdate中判断在是否需要更新，进行前后props和前后state的深层比较。

shouldComponentUpdate(nextProps,nextState){
    //进行深层判断使用immutable
    const thisProps=this.props;
    if(Object.keys(thisProps).length!==Object.keys(nextProps).length){
      return true;
    }

    for(const key in nextProps){
      console.log(is(thisProps[key],nextProps[key]));
      if(!is(thisProps[key],nextProps[key])){
        return true;
      }
    }
    return false;
  }