React shouldComponentUpdate生命周期詳解

React通過虛擬DOM在真實DOM和js之間加了一個緩存的效果，之后React組件在更新的過程中，會通過React內部的diff算法來算出最終需要操作的最小DOM節點，以達到渲染上的一個優化，性能最優的一個效果。

對於我們開發者來說，如果碰到一些比較特別的組件，我們可以通過shouldComponentUpdate生命周期函數來來判斷當前組件所在的props、state和context發生改變時，當前組件還是否需要進行更新操作(可以認為為當前組件自定義一個diff算法)，以達到性能的最大優化。

舉個栗子，我們拿上一篇博文的例子來改一下，需求是當傳遞給子組件Person的no和子組件內的state.no都是偶數時Person組件才進行更新操作，否則就不進行更新的操作，代碼如下:

<div id="root"></div>
<script type="text/babel">
class Person extends React.Component{         //定義一個子組件Person
  constructor(props){
    super(props);
    this.state = {no:props.no+100}
  }
  shouldComponentUpdate(newProps,newState){
    console.log(newProps.no,newState.no)
    return (newProps.no%2==0 && newState.no%2==0) ? true: false;
  }
  componentWillUpdate(newProps,newState){        
    console.log('trigger:componentDidMount')
  }

  render (){
    return <div>
              <button onClick={e=>this.setState({no:this.state.no+1})}>子組件按鈕(用於修改state)</button>
              <p>props.no:{this.props.no}</p>
              <p>state.no:{this.state.no}</p>
           </div>
  }
}

class App extends React.Component{      //定義一個父組件App,它會引用子組件，並且修改子組件的props
  constructor(props){
    super(props)
  }
  state = {no:1}
  render(){
    return  <div>
              <button onClick={e=>this.setState({no:this.state.no+1})}>父組件按鈕(用於修改props)</button>
              <Person no={this.state.no} />
            </div>
  }
}
ReactDOM.render(<App/>,root)
</script>

渲染如下:

 writer by:大沙漠 QQ:22969969

我們在Person組件內注冊了componentWillUpdate生命周期函數，改函數在控制台打印了trigger:componentDidMount字符，當我們點擊兩個按鈕時將分別修改Person組件的props.no和Person組件內的state.no,如下:

可以發現在Person組件內當props.no或者state.no都是偶數時，才會觸發componentWillUpdate生命周期函數，Person組件才會進行渲染，如果shouldComponentUpdate生命周期函數返回false,表示當前Person組件不會進行更新操作，因此componentWillUpdate生命周期函數也不會觸發。