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

前言:在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() 方法重新渲染页面!如果你不需要重新渲染页面,可以使用全局变量。

 

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

 

 

  • 8
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要实现在 React Native 建立 WebSocket 连接并进行心跳检测,可以参考以下步骤: 1. 安装 `react-native-websocket` 库 ``` npm install --save react-native-websocket ``` 2. 在需要使用 WebSocket 的组件导入并创建 WebSocket 实例,并添加心跳检测逻辑 ```javascript import React, { Component } from 'react'; import { View } from 'react-native'; import WebSocket from 'react-native-websocket'; class MyComponent extends Component { constructor(props) { super(props); this.state = { ws: null, }; } componentDidMount() { const ws = new WebSocket('ws://localhost:3000'); this.setState({ ws }); // 心跳检测 ws.onopen = () => { console.log('WebSocket connected'); this.pingInterval = setInterval(() => { if (ws.readyState === ws.OPEN) { ws.send(JSON.stringify({ type: 'ping' })); } }, 5000); }; // 接收服务端消息 ws.onmessage = (evt) => { console.log(`Received message: ${evt.data}`); }; // WebSocket 断开处理 ws.onclose = () => { console.log('WebSocket closed'); clearInterval(this.pingInterval); }; } componentWillUnmount() { const { ws } = this.state; if (ws) { ws.close(); clearInterval(this.pingInterval); } } render() { return <View />; } } export default MyComponent; ``` 在上述代码,我们创建了一个 WebSocket 实例,并在 `componentDidMount` 生命周期钩子添加了心跳检测逻辑。这里我们使用了 `setInterval` 定时发送 `ping` 消息,并在 `onmessage` 回调处理服务端返回的消息。在 `onclose` 回调清除定时器。 3. 注意事项 - 在组件卸载时,需要关闭 WebSocket 连接并清除心跳检测定时器,以免引起内存泄漏; - 心跳检测的时间间隔需要根据具体业务需求进行调整; - 需要注意处理 WebSocket 连接异常情况,例如网络异常或服务端关闭连接等;
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值