在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