關(guān)于render渲染優(yōu)化
除初始化組件渲染外，組件會在以下兩種情況下發(fā)生重渲染：
1、當調(diào)用setState()函數(shù)時刁标，組件會發(fā)生重渲染，即使組件的state未發(fā)生改變址晕；
2膀懈、當父組件發(fā)生重渲染時，其全部子組件都會重渲染谨垃。
在父組件中通過調(diào)用異步函數(shù)修改了某一參數(shù)值启搂，將其傳遞給子組件后，在子組件的componentDidMount()函數(shù)中獲取到的仍然是未修改之前的值:原來父組件傳遞的參數(shù)改變后刘陶，子組件會重新渲染的只有render函數(shù)
雖然React的重渲染機制是嚴謹?shù)母於模且彩欠浅：臅r的，我們有兩種方式來阻止組件不必要的重渲染匙隔。
shouldComponentUpdate(nextProps,nextState)
shouldComponentUpdate(nextProps,nextState )是重渲染時render函數(shù)調(diào)用之前被調(diào)用的函數(shù)疑苫，它接收兩個參數(shù)：nextProps和nextState，分別表示下一個props和下一個state的值纷责，并且捍掺，當函數(shù)返回false時，阻止接下來的render()函數(shù)的調(diào)用碰逸，阻止組件重渲染乡小，而返回true時，組件照常重渲染饵史，React默認返回true满钟。
import React from 'react'; class Test extends React.Component {
constructor(props) {
super(props);
this.state = {
strTest: "render測試" //設(shè)state中strTest值
}
}
//這里調(diào)用了setState但是并沒有改變setState中的值
handleClick = () => {
const prestrTest = this.state.strTest;
this.setState({
prestrTest: this.state.strTest
})
}
//在render函數(shù)調(diào)用前判斷：如果前后state中的內(nèi)容不變，通過return false阻止render調(diào)用
shouldComponentUpdate (nextProps, nextState) {
if (nextState.strTest == this.state.strTest) {
return false
}
}
render () {
//當render函數(shù)被調(diào)用時胳喷，打印當前的strTest
console.log(this.state.strTest)
return (
<h1 onClick={this.handleClick}>
{this.state.strTest}
</h1>)
}
}
export default Test;
PureComponet
PureComponet原理：只需要把組件的繼承類從Component換成PureComponent即可湃番。PureComponent 自動加載了shouldComponentUpdate 函數(shù)，當組件更新時吭露，shouldComponentUpdate 對props和state進行了一層淺比較吠撮，如果組件的props和state都沒有發(fā)生改變，render方法就不會觸發(fā)讲竿，省去Virtual DOM的生成和對比過程泥兰，達到提升性能的目的弄屡。
但是由于PureComponent對props和state只進行了淺比較，所以對與嵌套的對象并不適用鞋诗。
render渲染優(yōu)化
- 屬性傳遞優(yōu)化
- 比較this綁定五種方法的性能
- 父向子傳遞對象時膀捷，應將其先定義再使用
- 在傳遞props/state時，只傳遞需要的參數(shù)
- shouldComponentUpdate(nextProps,nextState)：比較值未改變時削彬，阻止render
- PureComponet：自動加載了shouldComponentUpdate 函數(shù)全庸，進行淺比較，故不適用于嵌套的對象
