性能优化
在更新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
,它只做一个浅比较。但是由于浅比较会忽略属性或状态突变的情况,此时你不能使用它。