React进阶笔记5（性能优化）

性能优化

在更新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文件即可

注意只有结尾为.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(
            
        )
    }
}

在以上代码中，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(
            
        )
    }
}

ReactDOM.render(
    ,document.getElementById('root')
)

当你的组件变得更加复杂时，你可以用类似的模式来作一个“浅比较”，用来比较属性和值来判定是否需要组件更新，这种模式十分常见，因此React提供一个辅助的对象来实现这个逻辑。继承自来自`React.PureComponent，一下的代码简单的实现相同的操作。

class CounterButton extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {count: 1};
  }

  render() {
    return (
      
    );
  }
}

大部分情况下，你可以使用React.PureComponent而不必写你自己的shouldComponentUpdate，它只做一个浅比较。但是由于浅比较会忽略属性或状态突变的情况，此时你不能使用它。