React setState同步更新的几种方法

简介: React setState同步更新的几种方法

官方文档在setState的说明上有这么一句话:State 的更新可能是异步的

也就是说,State在某些情况下可以是同步的表现形式。

我们在直接使用setState的情况下,它是异步的,语法如下:

// 异步更新
        this.setState({
            control:''
        })
        this.props.textVal(this.state.control)

如果我们需要让setState变为同步,那么可以使用以下几种方式:

方法一:

// 同步更新 方法-1
        this.setState({
            control:''
        },()=>{
            this.props.textVal(this.state.control)
        })

方法二:

// 同步更新 方法-2
        setTimeout(()=>{
           this.setState({
            control:''
           })
           this.props.textVal(this.state.control)
        },0)
目录
相关文章
|
3月前
|
前端开发 JavaScript
学习react基础(3)_setState、state、jsx、使用ref的几种形式
本文探讨了React中this.setState和this.state的区别,以及React的核心概念,包括核心库的使用、JSX语法、类与函数组件的区别、事件处理和ref的使用。
91 3
学习react基础(3)_setState、state、jsx、使用ref的几种形式
|
2月前
|
前端开发
|
2月前
|
Android开发
jmessage-react-plugin的正确引入方法
jmessage-react-plugin的正确引入方法
19 1
|
3月前
|
前端开发 JavaScript 开发者
请详细介绍React挂载阶段的方法。
请详细介绍React挂载阶段的方法。
63 9
|
4月前
|
前端开发 JavaScript
React 组件生命周期方法详解
【8月更文挑战第30天】
61 5
|
3月前
封装react-antd-table组件参数以及方法如rowSelection、pageNum、pageSize、分页方法等等
文章介绍了如何封装React-Antd的Table组件,包括参数和方法,如行选择(rowSelection)、页码(pageNum)、页面大小(pageSize)、分页方法等,以简化在不同表格组件中的重复代码。
81 0
|
4月前
|
前端开发 JavaScript API
学习 React 的方法
【8月更文挑战第26天】学习 React 的方法
41 1
|
4月前
|
前端开发 JavaScript 开发者
React生命周期方法完全指南:深入理解并高效应用每个阶段的钩子——从初始化到卸载的全方位解析
【8月更文挑战第31天】本文详细介绍了React组件生命周期方法,包括初始化、挂载、更新和卸载四个阶段的关键钩子。通过探讨每个阶段的方法,如`componentDidMount`和`componentWillUnmount`,帮助开发者在正确时机执行所需操作,提升应用性能。文章还提供了最佳实践,指导如何避免常见错误并充分利用最新钩子。
117 0
|
4月前
|
前端开发 JavaScript 开发者
React 中的生命周期方法是什么?
【8月更文挑战第31天】
58 0
|
5月前
|
前端开发 Scala
Scala并发编程的react、loop方法详解
在这个例子中,`MyActor`会无限循环接收和处理消息。当收到一个字符串消息时,它会打印出"Received: "加上消息内容。如果收到其他类型的消息,它会打印"Unknown message"。
30 1