天天看點

React Native 之檔案内資料操作(var、let、const、static、Props、State、this)

在React Native元件中,

存放本元件相關資訊,主要存放跟UI相關的變量,在本元件内可變,放在狀态機中,

存放本元件相關資訊,主要來源父元件指派,在本元件内不可變,放在屬性變量中,

邏輯相關要全局通路,伴随頁面生命周期(即頁面銷毀才銷毀)的變量放在成員變量、全局變量、靜态變量中,

邏輯相關但隻要局部通路,不伴随頁面生命周期,随用随銷(譬如函數結束即失效的)的變量放在局部變量中,

不需要改變,但要多處使用的,放在常量中。

下面從局部的、全局的兩個角度探讨下這些資料操作

一、局部

(局部變量)let -- 塊級作用域

(聲明的變量隻在它所在的代碼塊有效)

這個其實比較簡單,就是局部變量,對任何一個比較長的運算結果,或者比較長的取值,

我們都可以用一個局部變量來臨時存儲,需要就建,用完就銷毀,一般我們在函數内部使用

this.format = (labels: string[]) => {
            let kk = labels.join(' ')
            if (kk && kk.length) {
                return kk
            } else {
                return '工作'
            }

        };      

二、全局

對于單個檔案内的全局通路,我們從下面兩個方面探讨

<一>不可變

1、(屬性)Props -- 類級作用域(類内通路)

2、(常量)const -- 檔案級作用域(目前檔案通路)

<二>可變

3、(狀态機)State -- 類級作用域

4、(全局變量)var -- 檔案級作用域

5、(靜态變量)static -- 類級作用域+檔案級作用域(取決于是否使用private字段)

6、(成員變量)this -- 類級作用域

下面我們逐一分析:

1、(屬性)props:

父元件傳遞下來的屬性放在屬性變量中,特點是不可變,不會重繪UI

封裝可複用的元件時,通過props将資料傳遞到元件内部(props在元件内部是不可變的,不會導緻UI重繪)

存放本元件的相關資訊。在父元件中指派之後,子元件直接取值使用。

站在子元件的角度來看,父元件賦給的屬性值是不變的。

綜上:props 主要存放本元件相關資訊,主要來源父元件指派,在本元件内不可變

定義:

export interface IProps extends IBasePageProp {
    orgName: string,
}      

使用:

<Text style={style.item_right_title} numberOfLines={1}>{this.props.orgName}</Text>      

2、(常量)const:

顧名思義,聲明後不可變

定義:

// 常量(目前檔案有效)
const chancedetailsViewCallback = 'chancedetailsViewCallback'
export default class A extends UtilsRootPage<IProps, IState> {      

使用:

subPageUnmount() {
        UtilsSuperBridge.getInstance().noticeRemoveLisenter(chancedetailsViewCallback);
    }      

3、(狀态機)state:

與本元件顯示有關的變量放在狀态機,特點是可變,會重繪UI

在RN中,如果元件使用state作為資料來源,由于系統會持續監控state,當state中的任何屬性被改變時,元件都會被重繪,并觸發render方法重繪UI。

我們可以在資料變化之後調用this.setState來更新界面,而不是this.state={data:'new'},等号直接指派符合程式設計文法,但是不會重繪界面。注意,setState這個方法不是即時生效。

由于state任何屬性的改變都會導緻UI重繪,而UI重繪會消耗系統資源,

在封裝可複用的元件時,盡量不用或少用state,而是通過props實作。

綜上:state 存放本元件相關資訊,主要存放跟UI相關的變量,在本元件内可變

聲明:

export interface IState {

    hotname: string,
}      

初始化:

this.state = {
            hotname: '角色',

        }      

更新:

this.setState({ hotname:'123' })      

使用:

this.state.hotname      

4、(全局變量)var:

能夠在目前檔案全局通路的變量,

主要處理與元件邏輯控制相關但與元件顯示無關的變量

定義:

//  全部變量(目前檔案有效)
var gest:string
var yest:string = 'red'
export default class A extends UtilsRootPage<IProps, IState> {      

更新:

// 全局變量
        gest='345'
        yest='blue'      

使用:

item_center_bg: {
        backgroundColor: yest,
       
    },      

5、(靜态變量)static:

類内通路+目前檔案通路,取決于是否使用private字段。

主要處理與元件邏輯控制相關但與元件顯示無關的變量,

作用類似全局變量,隻是使用方式不同,通過添加private字段,可以使其僅能類内通路

定義:

export default class A extends UtilsRootPage<IProps, IState> {
    //  聲明
    // 靜态變量
    static fast:string // 未初始化 (目前檔案有效)
    private static last:string = '88' // 初始化 (隻能類内通路)
    static st:string = '88' // 初始化 (目前檔案有效)      

更新值:

//  更新值
        // 靜态變量
        A.last = '123'      

使用:

console.warn(yest+this.xest+A.last)      

6、(成員變量)this

主要處理與元件邏輯控制相關但與元件顯示無關的變量,

作用類似全局變量、靜态變量,隻是使用方式不同,僅限類内通路

定義:

// 成員變量 (隻能類内通路)
    cest:string | undefined
    private test:string | undefined = ''
    private xest:string = '8888' 
    private dast!: string;      

更新值:

// 成員變量
        this.test='234'
        this.dast='456'      

使用:

console.warn(A.last+this.test+gest)      

參考:https://blog.csdn.net/wangpotongxue/article/details/99972076