react-native 中 setState 之后的state值不能立即使用

版权声明：原创文章，未经允许不得转载！！！ https://blog.csdn.net/halo1416/article/details/82840465

前言：在react-native开发中；调用setState函数之后的state值不能立即使用，这个问题是我们经常遇到的。

原因是 setState之后，需要走完react-native生命周期，也就是走到render时，state的值才会变成setState设置时的值，如果需要立即使用state的值，也是可以的！

问题描述示例代码：

import React, {Component} from "react";
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
} from "react-native";

export default class StateDemoScreen extends Component{
    constructor(props){
        super(props);
        this.state = {
            a : 0,
        };
        this.num = 1;
    }

    jian(){
        const {a} = this.state;
        this.setState({a : a-1});
        alert('a减去1后的值：' + a);
    }

    add(){
        const {a} = this.state;
        this.setState({a : a+1});
        alert('a加上1后的值：' + a);
    }

    render(){
        const {a} = this.state;
        alert('render时a的值：' + a);
        return(
            <View style={{flex:1,backgroundColor:'#eee'}}>
                <View style={innerBox}>
                    <View style={styles.container}>
                        <TouchableOpacity style={styles.btnStyle} onPress={() => this.jian()}><Text> - </Text></TouchableOpacity>
                        <Text> {a} </Text>
                        <TouchableOpacity style={styles.btnStyle} onPress={() => this.add()}><Text> + </Text></TouchableOpacity>
                    </View>
                </View>
            </View>
        );
    }
}

const innerBox = {
    flex:1,
    flexDirection : 'column',
    justifyContent : 'center',
    alignSelf : 'center',
};

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignSelf: 'center',
    },
    btnStyle: {
        height : 20,
        borderWidth: 1,
        borderColor: '#aaa',
        borderRadius: 4,
        paddingHorizontal: 6,
        marginHorizontal: 6,
    },
});

现象截图：点击 + 号：a默认为0，需要得到的值是1;

调用加法时的值：

执行到render时的值：

方法一：使用setState的回调函数  ==>> 推荐，逼格也高 

说明：this.setState()有两个参数。第一个是修改state的对象，也就是设置的状态；第二个是回调函数，是在设置状态成功之后执行的。可以取到修改后的state的值

 

效果：点击 + 号：a默认为0，需要得到的值是1;

方法二：使用全局变量，不使用state  ==>> 主要用在页面不会刷新的情况（变量没有和页面关联，只是作为一个变量用于做逻辑处理）

说明：使用全局变量，修改之后可以直接取到最新的值；但是，页面不会刷新，如果需要刷新页面，可以使用 this.forceUpdate();方法强制刷新。 

定义：

效果：点击 + 号：num默认为0，需要得到的值是1;

注意：全部变量还可以定义在组件之外，即使用js的定义方式：let num = 0;  ==>>使用时直接用 num即可，不需要this.num了！

方法三：直接更改 state 的值  ==>> 不推荐，脱离了state本身的作用，并且页面也不会刷新

效果：点击 + 号：a默认为0，需要得到的值是1;

总结：state的作用主要是用于和页面关联，并且在改变state时使用 setState() 方法重新渲染页面！如果你不需要重新渲染页面，可以使用全局变量。

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！