1. 程式人生 > >react 生命周期

react 生命周期

struct 生命 const sets 靜態加載 傳值 com render 後臺

1、void constructor函數,構造函數,後面的博文會仔細研究該函數。

2、void componentWillMount();

組件初始化會執行這個函數,字面意思是組件將要掛載了,這個函數只在組件掛載前執行,在以後的更新渲染過程中並不參與,重要的是在這個函數內進行ajax請求後臺的數據,然後調用setState進行渲染並不會去調用更新函數,這裏的好處是不會因為setState而影響初始化的過程。

3、render

react的核心的函數,通過return進行界面渲染,千萬不要在此處調用setState或者其他重新渲染的函數,否則。。死循環。

4、void componentDidMount();

也是組件初始化會調用該函數,但是和 componentWillMount不同的是此處執行setState會調用更新函數,所有界面數據請求還是寫在componentWillMount中效率高。

5、void componentDidUnmout();

組件卸載函數,說是卸載,但是如果刷新瀏覽器或者關閉瀏覽器都不會執行該函數,初步研究是在組件被替換後執行。

6、void componentWillReceiveProps(props);

在這裏把擁有這些函數的組件稱為子組件而把這個組件被引用的組件稱為父組件,該子組件被引用是可以有些屬性的,這些組件是父子間對話的通道,父組件可以向子組件傳值,子組件可以調用父組件的方法來到達子向父傳值。當父組件的render函數重新執行時會調用子組件的 componentWillReceiveProps的這個方法,這裏註意父組件初始化時並不會調用這個方法,當父組件更新時才會調,還有個需要註意的是只有該子組件是靜態加載時才會有調這個方法的可能,靜態的意思是在父組件的render函數中而不是通過父組件的setState去加載。

7、void componentShouldUpdate(props,state);

在任何更新前都會執行這個函數,作用是判斷是否執行更新,做法是通過返回true來執行更新false阻止更新,目前還沒有用到過阻止更新的。。。但願也用不到。

8、void componentWillUpdate();

字面意思是組件將更新,在 componentShouldUpdate 返回true後會執行該函數。

9、void componentDidUpdate();

組件更新完後會執行該函數。


react 生命周期