最近工作用的是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哦。這只是一個性能的發現，更多的性能調優的發現請看第二篇