<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}这种形式
- 前端组件的高度拆分和抽象，以便做到最大极限的灵活拼接。
