RN生命周期


網上看的博客,看着寫的很好,想深入學RN的詳細看下之后,再自己敲敲吧!有助於身體健康!

一個RN組件從它被加載,到最終被卸載會經歷一個完整的生命周期。所謂生命周期,就是一個對象從開始生成到最后消亡所經歷的狀態,理解生命周期,是合理開發的關鍵。

ES6語法和之前的ES5語法有所變化,本文是根據ES6語法寫的。


組件生命周期流程圖

在ES5語法中,有getDefaultPropTypes這個函數,這個函數在組件被創建的時候調用一次,它的返回值成為了this.props的初始值

在ES6語法中,屬性的類型和默認值聲明不像ES5語法那樣在組件定義內部聲明,而是在組件定義的外部聲明,所以生命周期函數沒有了getDefaultPropsType了,但是聲明DefaultPropTypes也是在組件創建的時候調用一次

constructor 構造函數

這個函數會在組件創建的時候調用一次。這個方法中可以通過this.state初始化狀態機(ES5是通過getInitialState方法初始化的)。一般還在該方法中進行方法的bind(this)操作


 

componentWIllMount

在React Native組件的生命周期中,這個函數只會被執行一次。它在初始渲染(render)前被執行,當它執行完后,render函數會馬上被react native框架調用執行.

如果在這個函數中通過setState函數修改狀態變量,RN框架不會額外執行渲染

如果子組件也有componentWillMount函數,會在父組件之后調用

如果需要從本地存儲中讀取數據用於顯示,這個函數是一個不錯的選擇

componentDidMount

在react native組件的生命周期中,這個函數只會被執行一次,它在初始渲染完成后會馬上被調用.在這之后可以通過子組件的引用來訪問,操作任何子組件.

如果RN組件的子組件也有componentDidMount函數,並會在父組件的componentDidMount函數之前被調用.

一般情況在這個方法中請求網絡是一個不錯的選擇!


 

 

componentWillReceiveProps

這個函數的原型是:

componentWillReceiveProps(object nextProps)

在RN組件的初始渲染完成之后,當RN組件接收到新的props時,這個函數將被調用.參數就是新的props.

再次強調下,初次渲染不會調用該方法,是故意設計這種機制的

如果新的props會導致界面重新渲染,這個函數將在渲染前執行.如果函數中修改狀態,框架不會立刻執行狀態機改變的渲染而是等函數執行完之后一起渲染.

shouldComponentUpdate

這個函數的原型是:

boolean shouldComponentUpdate(obj nextProps,obj nextState)

RN組件的初始化渲染執行完成后,RN組件接收到新的state或者props時這個函數會調用.

函數返回一個布爾值,告訴RN組件是否重新渲染,如果false,不會渲染,相應的下面兩個方法componentWIllUpdate和componentDidUpdate不會被調用.

通過這個函數阻止無必要的重新渲染,是提高RN應用程序性能的一大技巧.

componentWillUpdate

這個函數的原型是:

componentWillUpdate(obj nextProps,obj nextState)

初始渲染完成之后,重新渲染前會調用這個函數.但是這個函數不能通過this.setSatte再次改變狀態機變量的值

componentDidUpdate

這個函數的原型是:

componentDidUpdate(obj nextProps,obj nextState)

RN組件初始完成之后,RN框架在重新渲染RN組件完成之后調用,參數是渲染前的props和state

componentWillUnMount

這個函數的原型是:

componentWillUnMount()

RN組件卸載前,這個函數被執行


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM