代码解析React中setState同步和异步问题
作者：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同步和异步的资料请关注脚本之家其它相关文章！