消除常见react性能问题
1、 Performance面板
1. FPS、CPU和NET
1.png
FPS（frames per second）：是用来分析动画的一个主要性能指标，理论上是越高越好，（但过高的刷新率并没有实际意义，一般人很难分辨出60帧/秒与100帧/秒有什么不同。）能达到60帧/秒的话，在用户体验度的方向上是不错的存在，在FPS图表中如果存在红色的长条，说明帧存在严重的问题，可能导致非常差的用户体验，一般来说，绿色的长条越高，说明FPS越高，用户体验越好。
CPU：鼠标点击CPU图标，下方的Summary面板上会呈现此时刻CPU使用信息，各种颜色代表着在这个时间段内，CPU在各种处理上所花费的时间。
NET：每条彩色横杠表示一种资源。横杠越长，检索资源所需的时间越长。 每个横杠的浅色部分表示等待时间（从请求资源到第一个字节下载完成的时间）
PS 显示实时FPS面板，实时展示页面的FPS指标
1、按下 Command+Shift+P（Mac）或者 Control+Shift+P(Windows, Linux) 打开命令菜单
2、输入Rendering，点选Show Rendering
3、在Rendering面板里，激活FPS Meter。FPS实时面板就出现在页面的右上方。
4、按下Esc关闭FPS Meter
-
Summary面板
2.png
summary面板为总结面板，从宏观层面上概括了浏览器加载的总时间，包括以下几个部分
| 颜色 | 英文 | 中文 |
|---|---|---|
| 蓝色 | Loading | 加载 |
| 黄色 | Scripting | 脚本 |
| 紫色 | Rendering | 渲染 |
| 绿色 | Painting | 绘制 |
| 灰色 | Other | 其他 |
| 白色 | Idle | 空闲 |
-
Bottom-Up和Call Tree
Bottom-Up和Call Tree两者都是直观地分析浏览器对页面的build精确到毫秒级的情况，前者是The Heavy (Bottom Up) view is available in the Bottom-Up tab，类似于事件冒泡；后者是And the Tree (Top Down) view is available in the Call Tree tab，类似于事件捕获。
-
Event Log
3.png
Event Log可以查看某一阶段的日志，点击各个模块的按钮，查看日志信息
2、消除常见react性能问题
-
将经常更新的区域提取为孤立的组件
在react应用程序中最常遇见兼得问题就是渲染问题，当渲染一个大型Dom树时会消耗很多时间，大部分时候，并不需要将整个DOm重新渲染，而是只改变某个分支上的某一个值，频繁的渲染操作将会造成渲染上的浪费，一个比较好的方式是将经常更新的区域拆分成一个单独的组件。
父组件
import React from 'react';
import Title from './Title/index';
export default class SuperList extends React.Component { // 首次渲染会渲染两次
constructor(props) {
super(props)
this.state = {
items: [1, 2, 3],
}
}
addItem = () => {
const self = this;
let {items} = self.state;
items.push(4);
this.setState({ items });
}
render() {
console.log('父组件 render')
const { items, obj } = this.state;
return (
<div>
<ul>
{items.map((e, i) => {
return <li key={i}>数组第{i}个值为：{e}</li>
})}
</ul>
<button onClick={this.addItem}>新增数组值</button>
<Title />
</div>
)
}
}
子组件
import React from 'react';
export default class Title extends React.Component {
constructor(props) {
super(props);
this.state = {
title: 'title',
}
// this.changeTitle = this.changeTitle.bind(this); // 当使用ES5编写函数changeTitle() {}时，必须使用这个
}
changeTitle = () => {
const self = this;
let {title} = self.state;
title = '你好';
this.setState({ title });
}
render() {
console.log('子组件render')
return (
<div>
<div>子组件title值：{this.state.title}</div>
<button onClick={this.changeTitle}>更改title值</button>
</div>
)
}
}
在上述组件中将DOM树拆分存储为两个组件，将频繁渲染DOM的部分单独拆分成一个组件，当富组件渲染时，会带动子组件进行渲染，但子组件渲染时，在此组件条件下，父组件中的DOM不会被重新渲染，需要渲染的DOM树减少，能够增加渲染的速度。
-
使用纯组件方式
使用纯组件的前提是组件的props与之前的props不同，这样的话当前组件才会被重新渲染，实现纯组件的简单方法是使用React.PureComponent，而不是使用默认组件React.Component，React.PureComponent与React.Component的区别在于React.Component没有实现shouldComponentUpdate()，而React.PureComponent通过浅的props和state比较来实现它。
⚠️ React.PureComponent中的shouldComponentUpdate()只是浅解析对象，对于包含复杂的数据结构，可能会出现渲染错误
当使用React.PureComponent时，希望props中具有简单的数据变化，或者当编码人员知道有深层的数据变化时使用forceUpdate()对数据做更新渲染DOM树。
父组件
import React from 'react';
import Title from './Title/index';
export default class SuperList extends React.PureComponent {
constructor(props) {
super(props)
this.state = {
items: [1, 2, 3],
obj: {a: 1, b: 2},
title: '早上好',
}
}
addItem = () => {
const self = this;
let {items, obj } = self.state;
items.push(4);
obj.b = 3;
// this.forceUpdate();
this.setState({ items, obj });
}
render() {
console.log('父组件 render')
const { title, items, obj } = this.state;
return (
<div>
<ul>
{items.map((e, i) => {
return <li key={i}>数组第{i}个值为：{e}</li>
})}
</ul>
<div>对象中的值b为：{obj.b}</div>
<button onClick={this.addItem}>新增数组值</button>
<Title title={title} />
</div>
)
}
}
子组件
import React from 'react';
export default class Title extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
title: 'title',
}
}
// shouldComponentUpdate(nextProps) {
// if (nextProps.title !== this.props.title) {
// return true;
// }
// return false;
// }
changeTitle = () => {
const self = this;
let {title} = self.state;
title = '你好';
this.setState({ title });
}
render() {
console.log('子组件render')
return (
<div>
<div>子组件title值：{this.state.title}</div>
<button onClick={this.changeTitle}>更改title值</button>
</div>
)
}
}
使用React.PureComponent可以解决React.Component在首次渲染时会渲染两次的问题，因为React.PureComponent是浅比较是否有质的改变，当值不存在改变时不会渲染。上面也会出现一个问题，当父组件点击改变数组按钮时，改组件也不会被渲染，因为发生改变的是数组和对象，即使是重新的setState了，但数组和对象的地址并未发生变化，所以不会有渲染发生，随后使用的forceUpdata()方法强制刷新，会使组件重新渲染。
除了使用forceUpdate()函数之外，还可以使用以下几种方式（但都没有forceUpdate（）实行简单）：
- 深拷贝
add() {
let items =JSON.parse(JSON.stringify(this.state.items));//黑科技
items.push(4);
this.setState({ items })
}
- 数组使用concat,对象使用Object.assign()
add() {
let { items } = this.state;
items=items.concat(4) //此时的items是一个新数组
this.setState({ items })
}
当使用了React.PureComponent后不需要使用shouldComponentUpdate()方法，当两者全部使用时会出现如下提示，并且在上述代码中会根据shouldComponentUpdate()来判断是否渲染当前的DOM树
Warning: SuperList has a method called shouldComponentUpdate(). shouldComponentUpdate should not be used when extending React.PureComponent. Please extend React.Component if shouldComponentUpdate is used.
-
避免将新对象作为传递参数
只要props发生变化，就会重新渲染，此时存在一种情况就是，当传入一个对象时，两个对象比较，值未发生改变，但却并不指向同一地址，此时react会认为当前是有改变的，因此会重新渲染。
父组件
import React from 'react';
import Title from './Title/index';
export default class SuperList extends React.PureComponent {
constructor(props) {
super(props)
this.state = {
title: '你好',
name: '我是XXX',
preObj: { title: '你好' }
}
}
addItem = () => {
const self = this;
let { name, preObj } = self.state;
// let { name, preObj, title } = self.state;
name = name + name;
// title = title + title
preObj.title = preObj.title + preObj.title;
// this.setState({ name, title, preObj });
this.setState({ name, preObj });
}
render() {
console.log('父组件 render')
const { title, name, preObj } = this.state;
const obj = {
title
};
return (
<div>
<div>对象中的值b为：{name}</div>
<button onClick={this.addItem}>改变姓名</button>
{/* <Title title={title} /> */}
{/* <Title title={obj.title} /> */}
{/* <Title obj={preObj} /> */}
<Title obj={obj} />
</div>
)
}
}
子组件
import React from 'react';
export default class Title extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
title: 'title',
}
}
render() {
console.log('子组件render')
return (
<div>
<div>子组件title值：{this.props.obj.title}</div>
{/* <div>子组件title值：{this.props.title}</div> */}
</div>
)
}
}
在每次渲染时调用了新的对象，因此props传递给<Title>的值就被视为新值，因此会导致组件重新渲染
-
父组件传递函数时优化
绑定this的方式，一般有以下几种：
1、constructor中绑定（es5）
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this); //构造函数中绑定
}
//然后可以
<p onClick={this.handleClick}>
在es6中可以直接写成以下方式不需要绑定
<p onClick={this.handleClick}>
2、使用时绑定（es5）
<p onClick={this.handleClick.bind(this)}>
3、箭头函数
<p onClick={() => { this.handleClick() }}>
三种方式哪一种的性能更好呢个？
-
第一种，构造函数每一次渲染的时候只会执行一遍；（最nice）
-
第二种方法，在每次render()的时候都会重新执行一遍函数；
-
三种方法的话，每一次render()的时候，都会生成一个新的箭头函数
