React中异步数据更新不及时问题及解决

 更新时间:2024年03月22日 15:04:48   作者:裤头青蛙  
这篇文章主要介绍了React中异步数据更新不及时问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

react异步数据更新不及时问题

最近在学习react的过程中,遇到了个问题,当我使用useState这个hook的时候,发现我们这个方法更新数据他是异步更新的,数据不会及时同步上我们的页面,在仔细的研究下,找到了以下

解决方法

const [value,setValue] = useState([]);
const changeValue = ()=>{
    setValue(data)
    console.log(value) //在此处输出会出现不及时更新问题,不会同步到页面上
}
 
//利用useEffect这个hook来监听数据的变化再去输出或者是调用
useEffect(()=>{
    console.log(value)//这样就可以解决更新不及时的问题啦
},[value])

react异步更新、寻找DOM

1.react异步更新

react异步更新指的是this.setState()是异步更新的,异步更新之后怎么获取更新之后值

有两种方法:

1.1 componentDidUpdate生命周期函数获取更新之后的值

componentDidUpdate:已经更新生命周期函数中打印state中的数据是更新后的值

  componentDidUpdate(prevProps, prevState) {
        console.log(2, prevState.name, this.state.name)  // 张三, 李四
  }

1.2 在this.setState()的回调函数中获取更新后的值

this.setState的第二个参数是可选的回调,是异步更新完成时的回调,在该回调函数中获取更新后的值

this.setState({
                 name: "李四"
                }, ()=>{
// this.setState的第二个参数是可选的回调, 是异步更新完成时的回调 (与小程序setData相同)
                 console.log(3, this.state.name)  // 李四
                // 注意: this.setState数据更新属于异步更新, 此处打印是更新前的值 
                console.log(1, this.state.name)  // 张三

2.react查找DOM

在react组件中获取DOM元素的三种方式:

2.1 给标签设置ref属性

给标签设置ref属性,通过this.refs调用(老版本语法,将要废除)

<h1 ref="myH1"></h1>
this.refs.myH1

2.2 在构造器中创建ref全局变量

在构造器中创建ref全局变量,在标签中ref属性动态绑定这个全局变量,通过全局变量的current字段调用

      constructor(props) {
        super(props);
        this.d2 = React.createRef()
      }

<div ref={this.d2}>2</div>
 console.log(this.d2.current);

2.3 在标签ref属性绑定函数

在标签ref属性绑定函数,在函数中定义全局变量赋值,通过全局变量调用

    <h3 ref={ ele => this.myH3 = ele }></h3>
    this.myH3

注意:

1.在父组件中用ref获取子组件对象,必须保证子组件是类组件,函数式组件获取结果是undefined

2.父组件中子组件标签绑定ref属性,父组件使用ref获取子组件对象后,可以对子组件状态数据和函数执行调用和修改

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • React-Native 桥接iOS原生开发详解

    React-Native 桥接iOS原生开发详解

    本篇文章主要介绍了React-Native 桥接iOS原生开发详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • react  Suspense工作原理解析

    react  Suspense工作原理解析

    这篇文章主要为大家介绍了react  Suspense工作原理解析以及基本应用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • React Hooks使用startTransition与useTransition教程示例

    React Hooks使用startTransition与useTransition教程示例

    这篇文章主要为大家介绍了React Hooks使用startTransition与useTransition教程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • React文件名和目录规范最佳实践记录(总结篇)

    React文件名和目录规范最佳实践记录(总结篇)

    React在使用时非常灵活,如果没有一个规范约束项目,在开发过程中会非常混乱,本文将介绍几个优秀的规范,介绍文件名和目录前,需要先简述一下几种通用的类型,用来区分文件的功能,感兴趣的朋友一起看看吧
    2022-05-05
  • antd踩坑之javascriptEnabled配置方式

    antd踩坑之javascriptEnabled配置方式

    这篇文章主要介绍了antd踩坑之javascriptEnabled配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • 详解React Native项目中启用Hermes引擎

    详解React Native项目中启用Hermes引擎

    这篇文章主要为大家介绍了React Native项目中启用Hermes引擎实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • React开发进阶redux saga使用原理详解

    React开发进阶redux saga使用原理详解

    这篇文章主要为大家介绍了React开发进阶redux saga使用原理详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • 详细聊聊React源码中的位运算技巧

    详细聊聊React源码中的位运算技巧

    众所周知在React中,主要用到3种位运算符 —— 按位与、按位或、按位非,下面这篇文章主要给大家介绍了关于React源码中的位运算技巧的相关资料,需要的朋友可以参考下
    2021-10-10
  • react国际化化插件react-i18n-auto使用详解

    react国际化化插件react-i18n-auto使用详解

    这篇文章主要介绍了react国际化化插件react-i18n-auto使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • 使用reactjs优化了进度条页面性能提高70%

    使用reactjs优化了进度条页面性能提高70%

    这篇文章主要介绍了使用reactjs优化了进度条后页面性能提高了70%的操作技巧,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-04-04

最新评论