React Native 之当前页面数据操作

一般在项目中我们会经常遇到需要操作当前界面数据的问题，譬如要全局使用，那么我们要怎么操作这些数据呢？

一般我们可以从两个方面处理：

一、不可变

1、（属性）Props -- 类内访问

2、（常量）const -- 当前文件访问

二、可变

3、（状态机）State -- 类内访问

4、（全局变量）var -- 当前文件访问

5、（静态变量）static -- 类内访问+当前文件访问（取决于是否使用private字段）

6、（成员变量）this -- 类内访问

下面我们逐一分析：

1、(属性）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：

在RN中，如果组件使用state作为数据来源，由于系统会持续监控state，当state中的任何属性被改变时，组件都会被重绘，并触发render方法重绘UI。我们可以在数据变化之后调用this.setState来更新界面，而不是this.state={data:'new'},等号直接赋值符合编程语法，但是不会重绘界面。注意，setState这个方法不是即时生效。

由于state任何属性的改变都会导致UI重绘，而UI重绘会消耗系统资源，所以在封装可复用的组件时，尽量不用或少用state，而是通过props将数据传递到组件内部（props在组件内部是不可变的，不会导致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字段

定义：

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)

 

标签：string,React,访问,state,类内,组件,Native,变量,页面
来源： https://www.cnblogs.com/lijianyi/p/14336487.html