React 生命周期方法

我們接觸較多的應(yīng)該是 render()方法，其實這也是React的生命周期方法之一。還有幾個方法可以在React ES6類組件中被覆寫。
現(xiàn)在已經(jīng)知道能夠用在ES6類組件中的生命周期方法 ：

• constructor() .和 render() .

1. constructor(構(gòu)造函數(shù)) 只有在組件實例化 并插入到DOM節(jié)點中的時候才會被調(diào)用。
   組件實例化的過程稱作組件的掛載（mount）.
2. render() 方法會在組件掛載的過程中被調(diào)用，同時組件更新的時候也會被調(diào)用。
   每當(dāng)組件的狀態(tài)（state）或者屬性（props）改變時，組件的render（）方法都會被調(diào)用。

• react 有更多的生命周期方法。
  在組件掛載的過程中還有另外兩個生命周期方法、：componentWillMount()和componentDid-Mount().
  構(gòu)造函數(shù)(constructor)最先執(zhí)行，componentWillMount()會在render()方法之前執(zhí)行。
  思考：當(dāng)組件的狀態(tài)或者屬性改變的時候用來更新組件的生命周期是什么樣的呢？
  總的來說，一共有5個生命周期方法用于組件的更新，調(diào)用順序如下:

  1. componentWillReceiveProps()
  2. shouldComponentUpdate()
  3. componentWillUpdate()
  4. render()
  5. componentDidUpdate()

  最后但同樣重要的 組件卸載也有生命周期 。 只有一個生命周期方法 ：componentWillUn-mount()。

• 即使在一個很大的React應(yīng)用中，除了constructor() 和render() 比較常用外，你只會用到一小部分生命周期函數(shù)

  • constructor(props) 它在組件初始化時被調(diào)用。在這個方法中，你可以設(shè)置初始化狀態(tài)及綁定類方法。
  • componentWillMount() 它在render() 方法之前被調(diào)用。這就是為什么它可以用作去設(shè)置組件內(nèi)部的狀態(tài)，因為它不 會觸發(fā)組件的再次渲染。但一般來說 推薦 在constructor()中初始化狀態(tài)。
  • render() 這個生命周期方法是必須有的，它返回作為組件輸出的元素。這個方法應(yīng)該是一個純函數(shù)，因此不應(yīng)該在這個方法中修改組件的狀態(tài)。它把屬性和狀態(tài)作為輸入并且返回（需要渲染的）元素。
  • componentDidMount() 它僅在組件掛載后執(zhí)行一次。這是發(fā)起異步請求去API獲取數(shù)據(jù)的絕佳時期。獲取到的數(shù)據(jù)將被保存在內(nèi)部組件的狀態(tài)中 然后在render()生命周期方法中展現(xiàn)出來。
  • componentWillReceiveProps(nextProps) 這個方法在一個更新生命周（update lifecycle）中被調(diào)用。新的屬性會作為它的輸入。因此你可以利用this.props來對比之后的屬性和之前的屬性。基于對比的結(jié)果去實現(xiàn)不同的行為。此外，你可以基于新的屬性來設(shè)置組件的狀態(tài)。
  • shouldComponentUpdate(nextProps,nextState) 每次組件因為狀態(tài)或者屬性更改而更新時，它都會被調(diào)用。你將在成熟的React應(yīng)用中使用它來進行性能優(yōu)化。在一個更新生命周期中，組件及其子組件將根據(jù)該方法返回的布爾值來決定是否重新渲染。這樣你可以阻止組件的渲染生命周期（render lifecycle）方法，避免不必要的渲染。
  • componentWillUpdate(nextProps,nextState) 這個方法是render()執(zhí)行之前的最后一個方法。你已經(jīng)擁有了下一個屬性和狀態(tài)，他們可以在這個方法中任由你處置。你可以利用這個方法在渲染之前進行最后的準備。 注意：在這個生命周期方法中你不能觸發(fā)seState(). 如果想基于新的屬性計算狀態(tài)，你必須利用 --> componentWillReceiveProps（）；
  • componentDidUpdate(prevProps,prevState) 這個方法在render()之后立即調(diào)用。你可以用它當(dāng)成操作DOM 或者執(zhí)行更多異步請求的機會。
  • componentWillUnmount() 它會在組件銷毀之前被調(diào)用。 你可以利用這個生命周期方法去執(zhí)行任何清理任務(wù)。

之前可能你已經(jīng)用過了 constructor() 和 render() 生命周期方法。對于 ES6 類組件來說他們是 常用的生命周期方法。實際上 render() 是必須有的，否則它將不會返回一個組件實例。

• 還有一個 生命周期方法 ：componentDidCatch(error,info) . 它在React16 中引入 。用來捕獲組件的錯誤。

參考資料

the road to learn react http://leanpub.com/the-road-to-learn-react-chinese/ by Robin Wieruch and JimmyLv