最近工作用的是react，2个项目做下来算是入门啦，哈哈 O(∩_∩)O，利用空闲时间精读官方文档在性能一节有很多感悟，想写点东西下来，如果能够帮助到正在看的你，我会很开心
第一篇讲一下，谷歌浏览器的performance怎么使用，不感兴趣直接看结论的请看下篇 https://www.cnblogs.com/wzcsqaws/p/10870741.html
刚开始使用performance的时候，感觉特别复杂，不知道点哪里，网上的教程又太复杂了，就想写个简单的，能用就行，没什么厉害的操作
调试之前首先把代码写好，随便写点复杂的，耗内存的操作，是这这么写的（其实是网上抄的_）
import React,{Component} from 'react'
export class Par extends Component {
constructor(props){
super(props)
this.state={
name:'',
age:'',
person:[],
}
}
onChange = (stateName, stateValue) => {
this.setState({[stateName]: stateValue});
}
composeChange = (name) => {
let tt = (e) => {
this.onChange(name, e.target.value)}
return tt;
}
submit(e){
const {name,age} = this.state
var arr = [...this.state.person]
arr.push({name,age})
this.setState({
person:arr
})
}
render(){
console.log(this.state.person)
const {name,age,mm} = this.state
return(
<div>
<span>name:</span><input value={name} name='name' type="text" onChange={this.composeChange('name')}/>
<span>age:</span><input value={age} name='age' type="text" onChange={this.composeChange('age')}/>
<button onClick={this.submit.bind(this)}>确认</button>
<div>
{ this.state.person.map((e,index)=>(
<Child key={index} name={e.name} age={e.age}></Child>
))
}
</div>
</div>
)
}
}
class Child extends Component {
componentWillReceiveProps(newProps){
console.log(`我新的props的name是${newProps.name}，age是${newProps.age}。我以前的props的name是${this.props.name}，age是${this.props.age}是我要re-render了`);
}
render(){
return (
<div>
<span> 姓名: </span>
<span>{this.props.name}</span>
<span> 年龄: </span>
<span>{this.props.age}</span>
</div>
)
}
}
copy下来直接运行，这么简单的代码，相信大家都看的懂，就是利用props改变，所有子组件跟着改变来进行损耗性能的操作
看图，随便写点东西，然后一直点确认，因为子组件越来越多也就渲染越来越慢，这时就可以用上performance了
第一步
选择performance 然后cpu选择4x slowdown（就是控制cpu的运行速度好让你更方便的测试性能）
第二步
点击这个灰色按钮就可以跑了，然后你就赶紧进行你的耗时操作吧（我这里就是疯狂点确认），点6、7秒就可以点中间的stop了，这步我就不截图了
第三步，终于开始查看了
Screenshots是选择是否显示当前页面的缩小版，Memory是查看你的当前内存使用情况
图片上标注的 1 2 3分别讲解
- 第一部分
有个时间条，告诉你什么时候你在进行什么操作（大家都知道，我他妈是在说废话吧），
黄色的代表js操作，越大自然就表示执行的时候吃性能
红色的线条表示警告，已经超负荷了，红色越深，性能越慢，可能会出现卡顿等现象，如果观察仔细可以发现一开始是没有红线的，因为子组件少，渲染的次数也少些，自然不是那么耗性能 - 第二部分
用户的耗时操作会记录在里面，点开看看，你会发现里面有几个你熟悉的react方法 - 第三部分 你进行的操作
点击有右上角有红色的三角的一行，下面就会跟着变化，可以看出是这个componentWillReceiveProps生命周期特别耗性能，我们还可以在最右边点击文件打开看一下到底是哪里特别慢
结论
可以发现componentWillReceiveProps这个生命使用了之后特别特别特别消耗性能，当你把这个生命周期注释后，再多次执行，红色的警告会在6、7倍的子组件数量的时候才会出现
所以以后在代码中尽量不要写componentWillReceiveProps哦。这只是一个性能的发现，更多的性能调优的发现请看第二篇