ReactNative从零到完整项目-state使用详解

项目连接： 93Laer/MyDemo

前言： 在安卓中我们可以通过自定义一个属性例如一个Boolean来标识是否刷新数据更新视图，但是在RN中props一经指定在生命周期类是不会再发生变化的，所以我们要达到和安卓一样的效果是不能通过props来做的，RN专门为我们提供了state这个字段

state： 是RN 专门用来标识是否重新渲染，通过属性的值来更新数据，React 内部会监听 state 的变化，一旦发生变化就会主动触发组件的 render() 方法来更新 Dom 结构，另外state是组件私有的，是没有办法通过其他组件传递过来的。

state的使用：

1、构造器外面

export default class StateTest extends Component {

//方式一
        state = {
            num: 0
        }


    // 构造
    constructor(props) {
        super(props);
        // 每1000毫秒对num+1
        setInterval(() => {
            this.setState(previousState => {
                return {num: ++this.state.num};
            });
        }, 1000);
    }

    render() {
        var msg = this.state.num
        return (
            <Text size={32} color= {'red'}>{msg}</Text>
        );
    }
}
复制代码

2、方式二构造器内（建议这样）


    // 构造
    constructor(props) {
        super(props);

//方式二
        this.state = {
            num: 0
        }

        // 每1000毫秒对num+1
        setInterval(() => {
            this.setState(previousState => {
                return {num: ++this.state.num};
            });
        }, 1000);
    }

复制代码

 // 每1000毫秒对num+1
        setInterval(() => {
            //这种方式修改state是无效的，必须调用setState（）才能起作用
            //this.state= ++this.state.num;

            //this.setState(previousState => {
            //    return {num: ++this.state.num};
            //});
            //也可以这样写，这样写也就可以直接拿到props，有可能我们的业务需要用到props
            this.setState((prevState, props) =>{
                return {num: ++this.state.num};
            } );
        }, 1000);
复制代码

prevState 是一个对之前状态（previous state）的引用，我们是不能直接修改这个参数的值，要想修改 state 的值，我们应该根据 prevState 和 props 参数来创建一个新的 JavaScript 对象,例如：return {num: ++this.state.num};。

既然我们要创建一个JavaScript对象，上面我们是通过一个函数来创建的，当然我们可以直接传入一个对象，而不是一个函数，例如：

this.setState({num: 18});
复制代码

但是我们一般应该不会这样写，毕竟我们在改变视图的时候肯定会有一些逻辑需要处理

特别提示： 作为一个安卓开发，我们第一反应要改变state，可能是以以下方式来处理的

  // 每1000毫秒对num+1
        setInterval(() => {
            //这种方式修改state是无效的，必须调用setState（）才能起作用
            this.state= ++this.state.num;

            //this.setState(previousState => {
            //    return {num: ++this.state.num};
            //});
        }, 1000);
复制代码

说明： setState() 方法会把对组件 state 的改变加入到队列中，并且告诉 React 这个组件及其子组件需要重新渲染,React 并不能保证 setState() 一被调用 state 就能更新。所以，如果在调用 setState() 之后，马上就读取 this.state 的值的话，可能会出现误差,所以setState(updater, callback) 方法的第二个参数 callback 是一个可选参数，暂时未找到使用实例。

相关文章：