简单谈谈开发过程中React组件的性能优化

<b>浏览器的重绘和重排版(reflows & repaints)（DOM操作都会引起）才是导致网页性能问题的关键。而React虚拟DOM的目的就是为了减少浏览器的重绘和重排版。</b>

一、react中的问题

有时候组件的render方法会在不必要的情况下被调用。比如：组件渲染的过程中，并没有使用props或者state的值，或者组件的props或者state并没有在父组件重新绘染时发生改变。这意味着重新绘染这个组件会得到和已知虚拟DOM一模一样的结果。

• 性能检测
  安装 react 性能检测工具 npm i react-addons-perf --save
  在程序中 import Perf from 'react-addons-perf'就可以了

使用方法：先运行Perf.start()开始检测，然后进行若干操作，运行Perf.stop停止检测，然后再运行Perf.printWasted()即可打印出浪费性能的组件列表。在项目开发过程中，要经常使用检测工具来看看性能是否正常。

二、优化关键shouldComponentUpdate

组件更新生命周期中必调用shouldComponentUpdate，字面意思是组件是否应该更新。shouldComponentUpdate默认返回true，必更新。所有当我们判断出组件没必要更新是，shouldComponentUpdate可以返回false，就达到优化效果。

• PureRenderMixin 优化
  React 最基本的优化方式是使用PureRenderMixin，安装工具 npm i react-addons-pure-render-mixin --save，然后在组件中引用并使用。
  //官方例子
  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 <div className={this.props.className}>foo</div>;
      }
  }
  

• Immutable.js 优化
  适用于数据结构层次很深的情况，本人没有用过。

<b>总结</b>：优化还是要从设计着手，尽量把数据结构设计的扁平一些，这样既有助于优化系统性能，又减少了开发复杂度和开发成本。

三、如何这种类似功能一致性

现总结两点：

• 后端返回数据的高度统一性，例如都是{data: [...], hasMore: true}这种形式
• 前端组件的高度拆分和抽象，以便做到最大极限的灵活拼接。