本文共 3264 字，大约阅读时间需要 10 分钟。

在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,}

使用：

    
     {this.props.orgName}
    

2、（常量）const：

顾名思义，声明后不可变

定义：

// 常量（当前文件有效）const chancedetailsViewCallback = 'chancedetailsViewCallback'export default class A extends UtilsRootPage
    
      {
    

使用：

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:stringvar yest:string = 'red'export default class A extends UtilsRootPage
    
      {
    

更新：

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

使用：

item_center_bg: {        backgroundColor: yest,           },

5、（静态变量）static：

类内访问+当前文件访问，取决于是否使用private字段。

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

作用类似全局变量，只是使用方式不同，通过添加private字段，可以使其仅能类内访问

定义：

export default class A extends UtilsRootPage
    
      {    //  声明    // 静态变量    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)

 备注：不论是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

转载地址：https://www.cnblogs.com/lijianyi/p/14336487.html 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！