React 生命週期詳解

React生命週期概述

React生命週期大概有三個階段，能夠分爲掛載、渲染和卸載。當渲染後的組件須要更新時，咱們會從新渲染組件，直至卸載。所以生命週期又能夠分爲兩類：

• 當組件掛載或者卸載時；
• 當組件接受新的數據時更新時；

下面按照分類的方式闡述生命週期(爲了簡潔代碼只展現重要部分)

1.組件掛載與卸載

1.1組件的掛載（componentWillMount, componentWillMount）

組件的掛載主要是初始化組件的狀態，把組件的dom插入到頁面中。生命週期函數執行順序： componentWillMount --> render --> componentDidMount;
若是組件不被卸載 componentWillMount 和 componentWillMount 之會執行一次；

...
class App extends Component {
  // 組件將要掛載到頁面
  componentWillMount() {
      console.log(document.getElementById('con')); // null
  }
  // 組件已經掛載到頁面
  componentDidMount() {
      console.log(document.getElementById('con')); // <div id="con">...</div>
  }
  
  render() {
    return (
      <div id="con">組件的掛載</div>
    );
  }
  
}
...
複製代碼

1.2組件的卸載（componentDidMount）

組件的卸載能夠這麼理解：該組件中全部的dom都從頁面中刪除（注意是刪除不是隱藏）；
一般在componentWillUnmount中咱們經常會執行一些清理方法，好比定時器或者是時間回收

...
class App extends Component {
  // 組件將要卸載
  componentWillUnmount() {
      
  }
  
  render() {
    return (
      <div id="con">組件的卸載</div>
    );
  }
  
}
...
複製代碼

2.組件的數據更新過程

組件的數據更新過程的生命週期函數有：componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、componentWillUpdate、componentDidUpdate;
執行順序：
1.若是父組件向下傳遞props時執行順序爲：
componentWillReceiveProps --> shouldComponentUpdate --> componentWillUpdate --> render --> componentDidUpdate
2.若是隻是組件的自身state更新了執行順序爲： shouldComponentUpdate --> componentWillUpdate --> render --> componentDidUpdate

...
class Con extends Component {
  // nextProps 爲父組件傳遞的新props
  // nextState 爲子組件新的state

  // 只在父組件傳遞的props更新時執行
  componentWillReceiveProps(nextProps) {

  }
  
  // return 布爾值判斷是否要從新渲染該組件
  shouldComponentUpdate(nextProps, nextState) {

  }
  
  // 組件更新前時執行
  componentWillUpdate(nextProps, nextState) {

  }
  
  // prevProps prevState 分別爲更新前的props和state
  // 組件更新完成時執行
  componentDidUpdate(prevProps, prevState) {

  }
  
  render() {
    return (
      <div id="con">組件的更新</div>
    );
  }
  
}
...
複製代碼

shouldComponentUpdate是一個特別的方法，它接受新的props和state，讓開發者增長必要的條件判斷，讓其在須要的時候更新，不須要的時候不更新。所以，當該方法返回false時，組件再也不向下執行生命週期的方法。