ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

React Native 之当前页面数据操作

2021-01-27 19:01:18  阅读:259  来源: 互联网

标签:string React 访问 state 类内 组件 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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有