前端知識 | React-Native 組件生命周期

在React-Native開發中,組件的生命周期和我們密不可切,了解生命周期利于我們觀察組件的變化過程。組件生命周期可以先簡單分為三個階段:實例化、存在和銷毀。


1、實例化階段

getDefaultProps

用于設置初始化默認props屬性。

getInitialState

用于設置初始化默認state屬性,ES5一般使用的語法。在ES6中推薦使用state初始在constructor中實現。

componentWillMount

渲染之前調用,主要是在組件被首次渲染之前做些操作,比如要在首次渲染之前修改一些初始state,并且this.setState不會多次觸發渲染,整個生命周期執行一次。

Render

組件的渲染函數,返回JSX或其他組件,用于開始渲染生成虛擬DOM。

componentDidMount

渲染之后調用一次,此時組件已經首次加載出來了。一般這里適合進行組件的初始化后的一些操作,比如發起網絡請求等等。


2、存在階段

componentWillReceiveProps

如果組件接收到新的props會調用,帶有參數nextProps,是即將被設置的屬性,這時的this.props看還可以表示舊的屬性,因此可以根據兩者的變化來選擇性地執行相應的函數。

shouldComponentUpdate

如果組件接收到新props和改變state后會調用,shouldComponentUpdate帶有兩個參數:nextProps 和 nextState,都表示即將被設置的屬性和狀態。通過返回的bool類型判定組件是否需要更新渲染,默認返回true,常用于性能優化減少不必要的頁面渲染。

componentWillUpdate

如果shouldComponentUpdate返回true后將調用此方法,即更新渲染之前調用,表示組件即將被更新渲染。值得一提的是,這個函數里面,你不能使用this.setState來修改狀態。

componentDidUpdate

更新渲染之后被調用,此函數中組件UI已經更新渲染完成,帶有參數prevProps和prevState,分別代表了渲染結束組件的參數和狀態。


3、銷毀階段

componentWillUnmount

組件移除之前被調用,通常是做清理操作,比如取消定時器。


-END-

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容