reactbenchmark

简单的说一下如何在 react 开发中&＃xff0c;进行 benchmark&＃xff0c;并且会简单的说一些可以提升性能的小技巧。

Performance

既然想要进行 benchmark&＃xff0c;那么就需要一个指标来衡量。react 官方已经提供了这样的工具供开发人员使用。

官方的文档可以参考这里Performance Tools&＃xff0c;在这里我再做个简单的介绍。

引入

import Perf from &＃39;react-addons-perf&＃39;;

就可以将Performance Tool引入到当前的 react app 中使用了。

使用

Performance Tool的使用十分方便&＃xff0c;在上一步引入的 Perf 本身是个对象&＃xff0c;可以直接调用其方法&＃xff0c;来进行性能测试。

获取指标的方法

Perf.start(): 开始记录
Perf.stop(): 停止记录
Perf.getLastMeasurements(): 获取最后一条记录

输出指标的方法

以下这些方法&＃xff0c;如果不传入参数的话&＃xff0c;都会调用Perf.getLastMeasurements()方法&＃xff0c;获取最新的 measurements

Perf.printInclusive(measurements): 输出组件 lifecirlifecyclecle 全部执行完的时间
Perf.printExclusive(measurements): 只输出组件渲染所用的时间&＃xff0c;不包括 componentWillMount和componentDidMount的执行时间
Perf.printWasted(measurements): Wasted的是指页面中的 dom 实际并没有发生变化&＃xff0c;但是组件仍然被渲染的操作&＃xff0c;printWasted就是输出这些无意义操作所用的时间
Perf.printOperations(measurements): 详细输出每一个组件dom 操作(包括 innerHTML 和 remove)所用的时间和相关信息

一个实例截图

一个截图

一些优化技巧

functional

举个简单的例子&＃xff0c;假设我们需要渲染一个并没有交互的组件&＃xff0c;例如一句话&＃xff0c;那么这个组件其实也不存在 lifecycle&＃xff0c;那么可以直接使用函数式的方法输出这个组件

我做了个简单的 demo&＃xff0c;可以 clone 下来自己看下

// 使用 component class Text extends React.Component {render () {return (

{ this.props.text }

)}
}
export default Text// 使用匿名函数
export default (text) &＃61;> {return ({ text }
)
}

看下 Performance Tool输出的结果

一个截图

可以明显的看到Benchmark > FunctionWrap的总时间要小于Benchmark > ComponentWrap和Benchmark > PureComponentWrap所用的时间

这是因为使用匿名函数&＃xff0c;省掉了 lifecycle 的一系列函数调用的时间&＃xff0c;Benchmark > PureCompnent耗时最长是因为React.PureComponent会在shouldComponentUpdate中默认进行shallowEqual的操作&＃xff0c;所以初始化渲染会比较慢。

使用 PureComponent

React.PureComponent和React.Component的区别就在于PureComponent会默认带一个shouldComponentUpdate的方法&＃xff0c;通过shallowEqual对比当前的 component 是否需要进行重新渲染。

有了这样的一个简单的判断&＃xff0c;在不手动写shouldComponentUpdate方法时&＃xff0c;也可以获得一定的性能提升。

具体的测试&＃xff0c;同样可以看这个demo&＃xff0c;里面有相关的测试。

一个隐形的坑

通常在可交互的组件上&＃xff0c;我们会绑定一些事件&＃xff0c;例如下面的例子

class User extends React.Component {render () {console.log(&＃39;render user&＃39;)return (

is a component

name: { this.props.data.name }

id: { this.props.data.id }

)}
}class PureUser extends React.PureComponent {render () {console.log(&＃39;render pure user&＃39;)return (is a pure component
name: { this.props.data.name }
id: { this.props.data.id }
)}
}class Anonymous extends React.Component {constructor (props) {super(props)this.state &＃61; {data: Foo}}render () {return ({ this.renderUser() }{ this.renderPureUser() }
        
)}changeData () {Pref.start()this.setState({data: Foo})}renderUser () {return }renderPureUser () {return }
}

在这个例子中会将state.data传递给自组件&＃xff0c;同时会传递一个 onClick 的事件回调给子组件。

在运行这个例子时&＃xff0c;我们会发现即使我们使用React.PureComponent&＃xff0c;并且并没有实际改变 state.data的值&＃xff0c;但是这个组件还是会跟组件一样&＃xff0c;会重复被渲染。

究其原因&＃xff0c;在于onClick这里使用了.bind方法&＃xff0c;将changeData绑定到了当前的作用域内&＃xff0c;但是.bind方法返回的是个匿名函数&＃xff0c;所以事实上每次传入到子组件内的props都是不同的&＃xff0c;PureComponent也会被重新渲染。

为了避免这种情况&＃xff0c;可以将.bind方法前置&＃xff0c;改在constructor中预先绑定&＃xff0c;这样onClick将指向一个固定的函数&＃xff0c;例子:

class PublicClassFields extends React.Component {constructor (props) {super(props)this.state &＃61; {data: Foo}this.changeData &＃61; this.changeData.bind(this)}...... }

这样的话&＃xff0c;PureUser在执行 changeData后就不会被重新渲染了。