React組件生命週期

此文章適合 React@17 以前的版本，React@16.3.0，添加了一些新的生命週期函數，同時準備廢棄一些會形成困擾的生命週期函數。全部若是在React@17 發佈以前，這篇文章仍是適用的。
新的生命週期請看官網 blog 文章 React v16.3.0: New lifecycles and context API。

前言

組件會隨着組件的 props 和 state 改變而發生變化，它的 DOM 也會有相應的變化。

一個組件就是一個狀態機：對於特定的輸入，它總會返回一致的輸出。

React組件提供了生命週期的鉤子函數去響應組件不一樣時刻的狀態，組件的生命週期以下：

• 實例化
• 存在期
• 銷燬期

鉤子函數是咱們重點關注的地方，下面來詳細瞭解下生命週期下的鉤子函數調用順序和做用。每一個生命週期階段調用的鉤子函數會略有不一樣。下面的圖片或許對你有幫助。

能夠查看 CodePen 在線 Demo React 生命週期

實例化

首次調用組件時，有如下方法會被調用（注意順序，從上到下前後執行）：

• getDefaultProps

  這個方法是用來設置組件默認的 props，組件生命週期只會調用一次。可是隻適合 React.createClass 直接建立的組件，使用 ES6/ES7 建立的這個方法不可以使用， ES6/ES7 可使用下面方式：

  // es7
  class Component {
    static defaultProps = {}
  }
  // 或者也能夠在外面定義es6
  // Compnent.defaultProps

• getInitialState

  設置state初始值，在這個方法中你已經能夠訪問到 this.props。 getInitialState 只適合 React.createClass 使用。使用 ES6 初始化state方法以下：

  class Component extends React.Component{
    constructor(props){
      super(props);
      this.state = {
        render: true,
      }
    }
  }

  或者這樣

  class Component extends React.Component{
    state = {
        render: true
    }
    render(){return false;}
  }

• componentWillMount

  改方法會在組件首次渲染以前調用，這個是在 render 方法調用前可修改 state 的最後一次機會。這個方法不多用到。

• render

  這個方法之後你們都應該會很熟悉，JSX 經過這裏，解析成對應的虛擬 DOM，渲染成最終效果。格式大體以下：

  class Component extends React.Component{
    render(){
      return (
         <div></div>
      )
    }
  }

  ​

• componentDidMount

  這個方法在首次真實的 DOM 渲染後調用（僅此一次）當咱們須要訪問真實的 DOM 時，這個方法就常常用到。如何訪問真實的 DOM 這裏就不想說了。當咱們須要請求外部接口數據，通常都在這裏處理。

存在期

實例化後，當props或者state發生變化時，下面方法依次被調用：

• componentWillReceiveProps

  沒當咱們經過父組件更新子組件 props 時（這個也是惟一途徑），這個方法就會被調用。

  componentWillReceiveProps(nextProps){}

• shouldComponentUpdate

  字面意思，是否應該更新組件，默認返回 true。當返回 false 時，後期函數就不會調用，組件不會在次渲染。

  shouldComponentUpdate(nextProps,nextState){}

• componentWillUpdate

  字面意思組件將會更新，props 和 state 改變後必調用。

• render

  跟實例化時的render同樣，很少說

• componentDidUpdate

  這個方法在更新真實的 DOM 成功後調用，當咱們須要訪問真實的 DOM 時，這個方法就也常常用到。

銷燬期

銷燬階段，只有一個函數被調用：

• componentWillUnmount

  沒當組件使用完成，這個組件就必須從DOM中銷燬，此時該方法就會被調用。當咱們在組件中使用了 setInterval，那咱們就須要在這個方法中調用 clearInterval。若是手動使用了 addEventListener 綁定了事件，也須要解綁事件。

參考文章

• An Introduction to Life Cycle Events in React.js