React中优化

渲染优化,避免重复渲染

  • 当state和props的改变会造成页面重新渲染。
  • props组件diff算法只是计算出发生改变的数据找到虚拟dom,但还是全部重新渲染。

如何解决

  • 使用shouldComponentUpdate。
  • shouldComponentUpdate函数是函数要渲染前要执行的函数,函数返回false时不渲染,反之渲染。
  • 函数接受两个参数,参数一:nextProps,参数二:nextState。

如何使用

  • 函数组件中

  • // shouldComponentUpdate 渲染前触发,返回true则渲染,返回false不渲染,避免重复渲染
    shouldComponentUpdate = (nextProps, nextState) =>{
      /* eslint-disable */
      if( !this.props.pageComponent && (JSON.stringify(this.state) === JSON.stringify(nextState)) && (JSON.stringify(this.props) === JSON.stringify(nextProps))){
        return false
      }
      return true;
      /* eslint-enable */
    }
    
  • 函数组件中

  • // react。memo来控制,参数一:组件,参数二:相当于shouldComponentUpdate函数
    
    function RefreshComponent (prevProps, nextProps){
      if(JSON.stringify(prevProps) === JSON.stringify(nextProps)){
        return true;
      }
      return false;
    }
    
    export default React.memo((Form.create())(AddNewAsset),RefreshComponent)  ;
    

相关插件使用

  • PureRenderMixin(不必要的情况下让函数 shouldComponentUpdate 返回 false, 使用这个插件就能够减少不必要的重新渲染,得到一定程度上的性能提升)

  • import React from 'react';
    import { immutableRenderDecorator } from 'react-immutable-render-mixin';
    
    @immutableRenderDecorator
    class Test extends React.Component {
      render() {
        return <div></div>;
      }
    }