React如何避免重渲染-创新互联

组件的重新渲染

我们可以在 React 组件中的 props 和 state 存放任何类型的数据，通过改变 props 和 state，去控制整个组件的状态。当 props 和 state 发生变化时，React 会重新渲染整个组件，组件重新渲染的过程可简化如下图：

译者之前对diff的理解是，对于一个改变 props 的组件，diff能自动计算出组件内部DOM树的不同，然后经过对比，找出真正变化的DOM节点，对变化部分进行渲染。这个是错误的理解，diff算法只是用来计算出改变状态或 props的组件/虚拟节点，而这个组件/虚拟节点，无论多大，它都会重新渲染。

假设有一个渲染完成的组件，如下图：

接下来因为状态改变，需要重新渲染下图的绿色的节点，如下图：

一般的想法是只需要更新下面的三个绿色节点就能够完成组件的更新

然而！只要组件的 props 或 state 发生了变化就会重新渲染整个组件，因此除了上述的三个绿色节点以外，还需要重新渲染所有的黄色的节点

除了必要渲染的三个节点外，还渲染了其他不必要渲染的节点，这对性能是一个很大的浪费。如果对于复杂的页面，这将导致页面的整体体验效果非常差。因此要提高组件的性能，就应该想尽一切方法减少不必要的渲染。

shouldComponentUpdate

shouldComponentUpdate这个函数会在组件重新渲染之前调用，函数的返回值确定了组件是否需要重新渲染。函数默认的返回值是 true，意思就是只要组件的 props 或者 state 发生了变化，就会重新构建 virtual DOM，然后使用 diff 算法进行比较，再接着根据比较结果决定是否重新渲染整个组件。函数的返回值为 false 表示不需要重新渲染。

函数默认返回为 true.

PureRenderMixin

React 官方提供了 PureRenderMixin 插件，插件的功能就是在不必要的情况下让函数 shouldComponentUpdate 返回 false, 使用这个插件就能够减少不必要的重新渲染，得到一定程度上的性能提升，其使用方法如下：

  import PureRenderMixin from 'react-addons-pure-render-mixin';
  class FooComponent extends React.Component {
   constructor(props) {
    super(props);
    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
   }

   render() {
    return 
foo
;
   }
  }

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。