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

主要处理与组件逻辑控制相关但与组件显示无关的变量，

作用类似全局变量、静态变量，只是使用方式不同，仅限类内访问，

成员变量不能在构造方法中赋值，语法上不会出错，但不会起作用，详情参考：React Native constructor方法内外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)

 备注：不论是props、state、还是成员变量都指向了property

state

 // (property) IState.datatop: ResultList 读写（会触发UI刷新）
    datatop: ResultList,

props

// (property) IProps.ce: number  只读
      ce:number;

成员变量

// (property) default.orgId: number 读写 不会触发UI变化
    orgId!: number

  

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