ReactJS之生命週期方法
阿新 • • 發佈：2019-02-06
這些方法是嵌入到ReactJS元件生命週期內的鉤子函式，可以在ES6類元件中使用，但是不能在無狀態元件中使用。
先了解下constructor和render：
constructor：
會在元件例項化並插入DOM時才會呼叫，元件例項化過程被稱為元件的掛載（mount）。
render：
會在元件例項化過程中或者在元件更新過程中被呼叫。當元件的state或者props變動時，render也會被呼叫。
元件掛載過程中4個鉤子函式及執行順序：
- constructor()
元件初始化時會被呼叫，在這個方法中你可以設定初始化狀態及類方法的繫結。 - componentWillMount()
可以設定元件內部的狀態，因為它不會觸發元件的再次渲染，一般情況下都是在建構函式constructor中設定初始化狀態。 - render()
必備，它返回作為元件輸出的元素。它應該是一個純函式，不應該在其中修改元件的狀態，它把屬性和狀態作為輸入並返回需要渲染的元素。 - componentDidMount()
僅在元件掛載後執行一次，非同步請求獲取資料是在這裡進行的。
元件更新過程中的鉤子函式及執行順序：
- componentWillReceiveProps(nextProps)
新的屬性會作為輸入，可以使用this.props對比之前和之後的屬性，根據結果去處理不同的業務，當然也可以根據新的屬性去設定元件的狀態。 - shouldComponentUpdate(nextProps, nextState)
每次元件因為狀態或者屬性更改時，該方法都會呼叫。可以用它來進行效能優化，用它來阻止不必要的渲染。 - componentWillUpdate(nextProps, nextState)
獲取到下一個屬性和狀態，不能再觸發setState()，如果想基於新的屬性計算狀態，必須利用componentWillReceiveProps(nextProps)。 - render()
- componentDidUpdate()
在render之後立即呼叫，可以用來操作DOM或者傳送非同步請求
元件解除安裝過程中的鉤子函式：
componentWillUnmount()
元件銷燬前被呼叫，用來執行清理任務
元件出現錯誤時的鉤子函式：
componentDidCatch(error, info)