代码解析React中setState同步和异步问题
更新时间：2021年06月03日 17:15:07 作者：Houqh95
前端框架从MVC过渡到MVVM。从DOM操作到数据驱动，一直在不断的进步着，本文给大家介绍React中setState同步和异步问题，感兴趣的朋友一起看看吧
React起源于Facebook的内部项目。React的出现是革命性的创新，React的是一个颠覆式的前端框架。在React官方这样介绍的它：一个声明式、高效、灵活的、创建用户界面的JavaScript库，即使React的主要作用是构建UI，但是项目的逐渐成长已经使得react成为前后端通吃的WebApp解决方案。
angular中用的是watcher对象，vue是观察者模式，react就是state了，他们各有各的特点，没有好坏之分，只有需求不同而选择不同。
React的官方网址：https://reactjs.org/GitHub
地址为：https://github.com/facebook/react
1.在React中，由React控制的事件处理函数，如onClick, onChange等，setState是异步的
import React, { Component } from 'react';
export default class Input extends Component {
constructor(props) {
super(props);
this.state={
name: 'hello'
}
}
_onChange(e) {
this.setState({
name:' world'
})
console.log(this.state.name); //hello
}
render () {
return (
<div className='cp'>
<input className='cp-input' value={this.state.name} onChange={this._onChange.bind(this)} type="text"/>
</div>
);
}
}
2.在原生JS监听的事件中,如addEventListener, setState是同步的
import React, { Component } from 'react';
export default class Input extends Component {
constructor(props) {
super(props);
this.state={
name: 'hello'
}
}
_onChange(e) {
// do something
}
componentDidMount() {
let input = document.querySelector('.cp-input');
input.addEventListener('click', ()=>{
this.setState({
name:' world'
})
console.log(this.state.name); //world
})
}
render () {
return (
<div className='cp'>
<input className='cp-input' value={this.state.name} onChange={this._onChange.bind(this)} type="text"/>
</div>
);
}
}
3.在setTimeout中，setStatet是同步的
import React, { Component } from 'react';
export default class Input extends Component {
constructor(props) {
super(props);
this.state={
name: 'hello'
}
}
_onChange(e) {
// do something
}
componentDidMount() {
setTimeout(()=>{
this.setState({
name:' world'
})
console.log(this.state.name); //world
}, 1000)
}
render () {
return (
<div className='cp'>
<input className='cp-input' value={this.state.name} onChange={this._onChange.bind(this)} type="text"/>
</div>
);
}
}
以上就是解析React中setState同步和异步代码详解的详细内容，更多关于React setState同步和异步的资料请关注脚本之家其它相关文章！
相关文章
this在javascript中已经相当灵活，这篇文章主要介绍了React.js绑定this的5种方法(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
用React实现一个类 chatGPT 的交互式问答组件的方法详解
这篇文章主要给大家详细介绍如何用React实现一个类 chatGPT 的交互式问答组件的方法，文中有详细的代码示例，对我们学习有一定的帮助,需要的朋友可以参考下2023-06-06
30分钟精通React今年最劲爆的新特性——React Hooks
这篇文章主要介绍了30分钟精通React今年最劲爆的新特性——React Hooks，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
中间件就是一个函数，对store.dispatch方法进行了改造，在发出 Action 和执行 Reducer 这两步之间，添加了其他功能，要理解中间件，关键点是要知道，这个中间件是连接哪些部分的软件，它在中间做了什么事，提供了什么服务2023-01-01
一些刚开始学习 React，或者从其他框架转入 React 的开发者，一开始可能不会太关注性能。因为需要一些时间来发现新学习的框架的性能缺点。这篇文章主要介绍提高React性能的技巧，感兴趣的同学可以参考阅读2023-04-04
在react面试中，面试官经常会问我们一些关于react的生命周期问题，今天特此分享本文给大家详细介绍下，感兴趣的朋友跟随小编一起看看吧2021-08-08
这篇文章主要为大家介绍了React 组件树遍历技巧的掌握，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要介绍了React在定时器中无法获取状态最新值的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要为大家介绍了React Native 资源包拆分实战分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要介绍了react中定义变量并使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
最新评论