【React Native】state、props、成员变量、静态变量、静态函数

一、State

        说到state就不得不提React Native的UI更新机制。与Android和iOS原生开发不同，原生开发的UI更新需要显示调用方法。而在RN中，如果组件使用state作为数据来源，由于系统会持续监控state，当state中的任何属性被改变时，组件都会被重绘，并触发render方法重绘UI，而不需要显示调用更新方法。我们可以在数据变化之后调用this.setState来更新界面，而不是this.state={data:'new'}，等号直接赋值符合编程语法，但是不会重绘界面。注意，setState这个方法不是即时生效的，如果你的业务逻辑需要立即判断是否变化的话，请使用类的成员变量。

        需要使用state的组件主要有：处理用户输入、网络数据获取、定时更新、消息推送等不可预知状态改变的组件。

        在说一下state的使用规则：

        1、由于state任何属性的改变都会导致UI重绘，而UI重绘会消耗系统资源，所以在封装可复用的组件时，尽量不用或少用state，而是通过props将数据传递到组件内部（props在组件内部是不可变的，不会导致UI重绘）。

        2、在state内部，如果一个变量可以通过state或者props中的另一个变量计算得出的话，删除这个变量，等到需要使用的时候再通过计算得出。

        3、让UI中的可变数据仅仅来源于state。

        4、如果想要给组件添加子组件，千万不要把子组件放到state中，而是直接写在render方法中。

        具体实现：

        state的初始化可以在构造函数中，也可以在类中直接赋值，或者直接在需要赋值的时候才setState。也就是：

this.setState({ data:'new' });

或者 this.setState({ data:'new' }, this.function)；function会在setState完成，并且界面渲染完成之后调用。

二、Props

        也就是属性，主要用于存放组件的相关信息，比如长宽高颜色等等。在父组件中赋值之后，子组件直接取值使用。站在子组件的角度来看，父组件赋给的属性值是不变的。可以通过声明defaultProps指定默认值，声明propTypes可以控制属性类型。在声明propTypes时，在后面加上isRequireed表示此属性为必须属性。propTypes仅仅在开发环境中有效，正式发布的app是不会进行检查的，不会编译propTypes代码。属性默认值和类型是非必要的。

具体实现：

        以Text为例，其中style和onPress就是属性。

<Text style={styles.text} onPress={this.jump}>你好</Text>

        另外，也可以自定义属性，在自定义控件中取值并实现想要的效果。比如下面的代码片段，title就是自定义属性。

<HeaderBar title='标题' />

        父组件赋值，子组件取值。

三、成员变量

        一般存放于逻辑控制相关的各种Tag，和各种本地配置。

 

 

        虽然组件的成员变量可以在任何需要它的地方定义。但还是建议在构造函数中对它们进行定义，这样还可以保证成员变量有初始值。

export default class HelloWorld extends Component {

    constructor(props) {
        super(props);
        this.myProperty1 = "成员变量";  //成员变量
        this.state = {text: ''};
    }
    // render...

}

 

四，静态变量、静态函数

        React Native 允许组件有静态变量、静态成员函数。它们的作用与 C++，Java 中的类静态变量、类静态成员函数基本一样。

export default class HelloWorld extends Component {
    static staticObject = "静态成员变量";  // 定义类的静态成员变量
    static staticMethod () {  // 定义类的静态成员函数
        console.log("欢迎访问静态成员变量");
    }
    constructor(props) {
        super(props);
    }
    //render...

}

注意访问静态变量或静态函数，直接以“类名.变量名（函数名）”的方式访问。不能以“this.变量名（函数名）”的方式访问。

HelloWorld.staticObject = "静态变量或静态函数";

HelloWorld.staticMethod();