性能优化
在更新UI时，React在内部使用几种巧妙的技术，以此来最小化DOM的操作量，对于许多应用来说，React不需要做太多的优化工作就可以快速创建用户界面。
使用生产版本
在React中检测性能时，需要使用压缩过的生产版本。
在默认情况下React中包含很多开发过程中需要的警告模块，然而这会导致React更大更慢，因此在部署发布的时候，确认使用的是生产版本，不是开发版本。
如果还不确定构建的过程是否正确，可以安装React开发者工具（chrome）。
（类似vue的开发者工具），当你访问一个生产模式的React页面的时候，工具图标会有一个蓝黑色的背景。
[图片上传失败...(image-aefc3d-1534304297449)]
当访问一个开发模式的页面的时候，会有一个红色的背景。[图片上传失败...(image-d7a398-1534304297450)]
建议在开发的时候使用开发模式，部署发布的时候使用生产模式。
以下是构建生产应用的流程。
Create React App 流程
如果你的项目是以Create React App创建的，运行如下代码：
cnpm run build //项目构建
这将会在项目的 build/文件夹下创建一个生产版本的应用。
注意只有发布正常版本的时候才需要这样做，
平时正常开发只需要 cnpm start运行就可以了。
单文件生产版本
使用已经提供的React和ReactDOM文件即可
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
注意只有结尾为.min.js的React文件才是适合生产使用的。
Brunch
为了创建最高效的Brunch生产版本，需要安装uglify-js-brunch 插件:
# If you use npm
npm install --save-dev uglify-js-brunch
# If you use Yarn
yarn add --dev uglify-js-brunch
接下来构建生产版本，在build命令后添加-p参数：
brunch build -p
注意只有生产版本需要这样操作。不要在开发环境中安装这个插件或者使用-p参数，因为它会隐藏掉有用的React警告并使构建过程更慢。
为了构建生产版本，务必添加这些设置指令 (参数很重要):
-
envify该插件确保正确的编译环境，全局安装（-g）。 -
uglifyify该插件移除了开发接口。全局安装（-g）。 -
bundle-collapser该插件用数字替代了长长的模块ID。 - 最后，以上结果都被输添加至
uglify-js来得到整合。(了解原因).
Webpack
注意：
如果你正在使用Create React App方式，参考上述文档。
本节只适用于直接配置Webpack的情况。
为了创建最高效的 webpack 生产版本，需要在生产版本的配置中添加这些插件。
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin()
了解更多参见Webpack文档.
注意只有在生产环境中需要这样做， 不需要再开发环境中安装UglifyJsPlugin和DefinePlugin，因为他们会忽略掉有用的Reacr警告，并且使得构建的过程变得更慢。
使用 Chrome Performance 归档组件
在开发模式中，使用支持的浏览器内的性能工具可以更加直观的了解，组件何时挂载，更新和卸载。
[图片上传失败...(image-4830a9-1534304297450)]
chrome浏览器内：
①在项目地址栏内添加查询字符串 ?react_perf（例如， http://localhost:3000/?react_perf）。
②打开Chrome开发工具Performance 标签页点击Record.
③执行你想要分析的动作。不要记录超过20s，不然Chrome可能会挂起。
④停止记录
⑤React事件将会被归类在 User Timing标签下。
更多的详细操作，请参考 BenSchwarz 的这篇文章。
注意由于这些数字是相对的，因此组件在生产版本中会运行更快。然而，这也能够帮助你了解何时会有无关的组件被错误的更新，以及你的组件更新的深度和频率。
目前浏览器中仅有Chrome，Edge和IE支持此特性，但是我们使用此标准用户Timing API，因此我们期待更多的浏览器对其添加支持。
避免重复渲染
React在渲染出的UI内部 建立和维护一个内层的实现方式，他包括从组件返回的React元素。
这种实现方式使得React避免了一些不必要的创建和关联dom的节点。因为这样做可能比直接操作javascript对象会更慢一些。有时候被称为“虚拟DOM”，但是他其实和 React Native的工作方式是一样的。
当一个组件的props或者state改变时，React通过比较新返回的元素和之前渲染的元素，来决定是否有必要更新实际的DOM。当他们不相等时，会更新dom。
有一些情况下，你的组件可以通过重写这个生命周期函数shouldComponentUpdate来提升速度，他在重新渲染过程开始之前触发。这个函数默认返回true，可以使用React执行更新。
shouldComponentUpdate(nextProps,nextState){
return true;
}
如果你想要你的组件在某些情况下不需要更新，可以控制在这个生命周期函数中返回false来跳过整个渲染的过程，这个过程包括了之后对这个组件调用render()是指令。
shouldComponentUpdate()的应用
这是一个组件子树，对其中每个组件来说，scu 表明了每个组件 shouldComponentUpdate() 的返回内容，vDOMEq表明了待渲染的React元素与原始元素是否相等，最后圆圈的颜色表示这个组件是否需重新要渲染。
[图片上传失败...(image-7cbbeb-1534304297450)]
从图中可知：
由于以C2为根的子树shouldComponentUpdate返回了false，React不会渲染C2，甚至不会尝试渲染C4和C5.
对于C1和C3来说，shouldComponentUpdate返回true,因此React会深入到分支中并检查他们C6,C7,C8，其中C6的shouldComponentUpdate返回了true，由于待渲染的元素与原始元素不相等，React会更新这个DOM节点。
最后一个有趣的情况是C8，React需要渲染这个组件，但是由于组件元素的返回值与原元素相等，因此并没有更新这个dom节点。
注意其中React只需要更新C6，因为他是不可避免的，对于C8而言，他通过比较待渲染的元素和原始元素来避免了渲染。对于C2的子树和C7，他们甚至都没有执行比较，因为我们设置了shouldComponentUpdate返回false，render并没有调用。
案例：
如果只想让组件在props.color或者state.count的值变化时重新渲染，你们可以像下面这样设定shouldComponentUpdate
class CounterButton extends React.Component{
constructor(props){
super(props);
this.state={count:1};
}
shouldComponentUpdate(nextProps,nextState){
if(this.props.color!==nextProps.color){
return true;
}
if(this.state.count!==next.count){
return true;
}
return false;
}
render(){
return(
<button color={this.props.color}
onClick={()=>{this.setState(state=>({count:state.count+1}))}}
>
Count:{this.state.count}
</button>
)
}
}
在以上代码中，shouldComponentUpdate只检查props.color和state.count的变化，如果这些值都没有变化，这些值就不会更新。
class CounterButton extends React.Component{
constructor(props){
super(props);
this.state={count:1};
}
shouldComponentUpdate(nextProps,nextState){
if(this.props.color!==nextProps.color){
return true;
}
if(this.state.count!==nextState.count){
return true;
}
return false;
}
render(){
return(
<button color={this.props.color}
onClick={()=>{this.setState(state=>({count:state.count+1}))}}
>
Count:{this.state.count}
</button>
)
}
}
ReactDOM.render(
<CounterButton/>,document.getElementById('root')
)
当你的组件变得更加复杂时，你可以用类似的模式来作一个“浅比较”，用来比较属性和值来判定是否需要组件更新，这种模式十分常见，因此React提供一个辅助的对象来实现这个逻辑。继承自来自`React.PureComponent，一下的代码简单的实现相同的操作。
class CounterButton extends React.PureComponent {
constructor(props) {
super(props);
this.state = {count: 1};
}
render() {
return (
<button
color={this.props.color}
onClick={() => this.setState(state => ({count: state.count + 1}))}>
Count: {this.state.count}
</button>
);
}
}
大部分情况下，你可以使用React.PureComponent而不必写你自己的shouldComponentUpdate，它只做一个浅比较。但是由于浅比较会忽略属性或状态突变的情况，此时你不能使用它。
