1. 程式人生 > >react生命週期詳解

react生命週期詳解

React的生命週期分為三個階段:1.初始化階段 2.更新階段 3.銷燬階段 一,初始化階段 (1) 方法:getDefaultProps(); 作用:作用於元件類,只調用一次,獲取預設的props,也可以用dufaultProps設定元件的預設屬性; 注意: (2) 方法:getInitialState(); 作用:作用於元件例項,例項建立時呼叫一遍,用於初始化每個例項的state,此時可以訪問this.props; 注意:在es6的class語法中,沒有這個鉤子函式,可以直接在構造器constructor中定義this.state,此時可以訪問this.props; (3) 方法:constructor();

作用:獲取到父元件傳下來的的props,context,如果你想在constructor建構函式內部使用props或context則需要傳入super物件; 注意:如果在構造器中只用到一種或者沒有用到引數,可以不進行引數傳遞; (4) 方法:componentWillMount(); 作用:元件將要渲染的時候呼叫,處於元件剛經歷constructor初始化完資料但是元件還沒有進入渲染render時期; 注意:此方法更多的用於服務端渲染; (5) 方法:render(); 作用:組價渲染,render函式插入生成的dom(文件物件模型)結構,react會生成虛擬dom樹,在每一次元件更新的時候,react會通過diff演算法比較更新前後的dom樹,找到最小的有變化的dom節點進行重新渲染; 注意:在react16中render函式允許返回一個數組,單個字串等; (6) 方法:componentDidMount();
作用:元件渲染結束後呼叫,只調用一次; 注意:可以在這個方法裡呼叫ajax請求,返回資料setState後元件會重新渲染; 二,更新階段 (1) 方法:componentWillReceiveProps(nextProps); 作用:接受父元件改變後的props,需要重新渲染時呼叫,接受的引數nextProps和this.props進行對比,將setState(nextProps)為當前元件的state,並且重新渲染; 注意:元件初始化時不呼叫; (2) 方法:shouleComponentUpdate(nextProps,nextState); 作用:元件在接受新的props和state時呼叫,通過在此方法中對比當前和改變後的props,state,如果相同返回false進行阻斷更新。因為相同的屬性狀態一定會生成相同的dom樹,這樣就不需要創造新的dom樹和舊的dom樹進行diff演算法對比; 注意:react效能優化最重要的一環,特別適用於dom結構複雜的時候; (3) 方法:componentWillUpdata(nextProps, nextState);
作用:元件初始化時不呼叫,元件將要更新時呼叫; 注意:使用該方法做一些更新之前的準備工作; (4) 方法:render(); 作用:元件渲染; (5) 方法:componentDidUpdate(); 作用:元件更新完成後呼叫,此時可以獲取dom節點; 注意:元件初始化時不呼叫; 三,銷燬階段 (1) 方法:componentWillUnmount(); 作用:元件將要解除安裝時呼叫; 注意:清除一些元件監聽以及定時器等;