ReactNative學習筆記五之生命週期

mymdeep發表於2017-07-09
React筆記

最近工作一直很忙，一是在調研ReactNative相關的東西，還有就是正在學習python，一個做Android開發的，學python幹嘛？我以前也是這麼想，現在發覺，確實有用，不論是測試還是爬蟲，學會了python不求人，之後如果有機會我也會分享一些關於python的基本語法啥的。
言歸正傳，這次還是說ReactNative。

生命週期

說到生命週期，做過Android或iOS開發的同學，肯定會明白，就是onStart，onCreate什麼的。RN中的元件也是有生命週期的，所謂生命週期，就是一個元件從開始生成到最後消亡所經歷的狀態。
來一張經典的圖看看：

如圖，可以把元件生命週期大致分為三個階段，下面詳細講解一下。

第一階段

這部分主要是第一次繪製階段，你可以理解為初始化階段，這裡主要有5個方法：

getDefaultProps

元件例項建立前呼叫，多個例項間共享引用。父元件傳過的Props在這裡被接受。

getInitalState

元件示例建立的時候呼叫的第一個函式。在這裡可以給state進行賦值

這裡簡單介紹一下,state與props的區別，props主要是從父元件中傳入的引數，state是元件內部的屬性，可以用座標值位，或者元件內資料的標識，關於這兩個屬性的基本知識，可以往下看，會有更詳細的解釋。

componentWillMount

在render前，getInitalState之後呼叫。這個函式在整個生命週期中只被呼叫一次,用作改變state的狀態。

render

元件渲染函式，會返回一個Virtual DOM，只允許返回一個最外層容器元件。在這裡實現元件的佈局，只渲染元件，不修改狀態不執行邏輯操作。

componentDidMount

在render渲染之後，通知元件已經載入完成。RN 框架是先呼叫子元件的 componentDidMount()，然後呼叫父元件的函式。從這個函式開始，就可以和 JS 其他框架互動了，例如設定計時 setTimeout 或者 setInterval，或者發起網路請求。這個函式也是隻被呼叫一次。

第二階段

這時已經進入了穩定階段，是是元件在執行和互動階段，這個階段元件可以處理使用者互動，或者接收事件更新介面。

componentWillReceiveProps

props改變 主要是父容器的改變將會呼叫該函式。新的props將會作為引數傳遞進來，老的props可以根據this.props來獲取。我們可以在該函式中對state作一些處理。

注意：在該函式中更新state不會引起二次渲染。

shouldComponentUpdate

該函式傳遞過來兩個引數，新的state和新的props。state和props的改變都會調到該函式。該函式主要對傳遞過來的nextProps和nextState作判斷。如果返回true則重新渲染，如果返回false則不重新渲染。在某些特定條件下，我們可以根據傳遞過來的props和state來選擇更新或者不更新，從而提高效率。

對於，當引數更新的時候，需要進行部分改變的需求，可以在這裡實現。比如你可以自己過載這個函式，通過檢查變化前後屬性和狀態，來決定 UI 是否需要更新，能有效提高應用效能。

componentWillUpdate

與componentWillMount方法類似，元件上會接收到新的props或者state渲染之前，呼叫該方法。這個函式呼叫之後，就會把 nextProps 和 nextState 分別設定到 this.props 和 this.state 中。

render

不多說了，跟初始化的時候功能一樣。

componentDidUpdate

和初始化時期的componentDidMount類似，在render之後，真實DOM生成之後呼叫該函式。傳遞過來的是當前的props和state。

第三階段

這就是消亡的階段，主要進行清理和釋放的工作。
這個階段只有一個方法：

componentWillUnmount

當元件要被從介面上移除的時候，就會呼叫 componentWillUnmount()。在這裡進行一些相關的銷燬操作，比如定時器，監聽等等。

props和state

相同點

  • 這倆的改變都會引起重新渲染
  • 都可以用作元件渲染的資料來源

    不同點：

  • state的初始值來自於自身內部的設定，props來自於父元件傳遞進來或者自身getDefaultProps（若key相同前者可覆蓋後者）。

  • state只能在自身元件中setState，不能由父元件修改；props只能由父元件修改，不能在自身元件修改。

  • props是一個父元件傳遞給子元件的資料流，這個資料流可以一直傳遞到子孫元件；state代表的是一個元件內部自身的狀態，只能在自身元件中存在。

    總結

    這篇文章主要是對ReactNative的一些基礎概念進行總結，如果感興趣的同學，可以重寫這些方法，列印log或者toast，進行比對。

如果你也做ReactNative開發，並對ReactNative感興趣，歡迎關注我的公眾號，加入我們的討論群：

相關文章