React生命週期簡明寶典

介紹

React的生命週期是咱們掌握React工做過程所必須掌握的知識，同時也是部分公司的面試考點

概要

React嚴格定義了組件的生命週期，其主要經歷了以下三個過程

• 裝載過程(Mount): 組件第一次在DOM樹中渲染的過程
• 更新過程(Update): 組件從新渲染的過程
• 卸載過程(Unmount): 組件從DOM中刪除的過程

裝載過程

組件第一次被渲染的時候，依次調用的函數爲：

• constructor
• getInitialState
• getDefaultProps
• componentWillMount
• render
• componentDidMount

1. constructor

ES6中每一個類的構造函數，要建立一個組件的實例就要調用相應的構造函數。 可是並非每一個組件都要定義本身的構造函數，好比無狀態的React組件。一個組件調用構造函數，每每是爲了兩個目的：

• 初始化state
• 綁定成員函數的this環境

getInitialState和getDefaultProps

getInitialState：該函數返回值用來初始化state getDefaultProps: 該函數返回值用來初始化props

這二者只有用React.createClass方法創造的組件類纔會發生做用，而且React.createClass已經被Fb官方廢棄，因此這裏不細講了

2. componentWillMount

這個函數沒什麼存在感，由於在這個時候沒有任何渲染出來的結果，調用setState修改狀態也不會觸發從新渲染，而且在這裏作的事情徹底能夠提早到constructor中去作

3. render

能夠說React組件中最重要的函數，由於React組件的父類React.Component類對除render以外的生命週期函數都有默認實現

render並不作渲染工做，只是返回一個JSX描述的結構，最終由React庫根據返回對象決定如何渲染

render應該是一個純函數，徹底根據state和props來決定返回結果，而不產生反作用，因此render中調用setState是錯的，由於純函數不該該引發狀態的改變

4. componentDidMount

componentDidMount並非在render調用後當即調用，其調用的時候render返回的JSX已經渲染了

componentWillMount能夠在服務端和瀏覽器端調用，可是componentDidMount只能在瀏覽器端調用(由於"裝載"過程是不可能在服務端完成的)

異步請求數據通常都在該函數內進行。

更新過程

更新過程會依次調用如下生命週期函數：

• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• render
• componentDidUpdate

更新過程並不老是執行全部函數

1. componentWillReceiveProps

只要是父組件的render函數被調用，在render裏渲染的子組件就會經歷更新過程，無論父組件傳遞給子組件的props有沒有改變，都會觸發componentWillReceiveProps。

注意經過setState觸發的更新過程不會調用這個函數，否則豈不是死循環了?

2. shouldComponentUpdate

應該是除了render以外最重要的函數了。它決定了一個組件何時需不須要渲染。 render和shouldComponentUpdate是React中惟二須要有返回值的函數，shouldComponentUpdate返回一個布爾值，告訴React是否須要繼續更新，若爲true則繼續，爲false則中止更新，不會觸發以後的從新渲染。

3. componentWillUpdate

即將render時執行，初始化render時不執行。在這裏一樣不能setState， 這個函數調用以後，就會把nextProps和nextState分別設置到rops和state中，緊接着調用render

4. render

同上

5. componentDidUpdate

組件更新完成後執行，初始化render時不執行

卸載過程

卸載過程只有一個函數componentWillUnmount，當react組件要從DOM樹上刪除前，該函數會被調用，因此這個函數適合作一些清理工做。

eg: 在componentDidMount中用非react方法建立的DOM元素，若是不處理可能會發生內存泄漏，所以能夠在該函數中將其清理乾淨

總結

React的生命週期函數並無想象中的那麼複雜

參考於《深刻理解React》