這篇文章主要介紹“React中setState同步和異步怎么實現(xiàn)”，在日常操作中，相信很多人在React中setState同步和異步怎么實現(xiàn)問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”React中setState同步和異步怎么實現(xiàn)”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
主要從事網頁設計、PC網站建設（電腦版網站建設）、wap網站建設（手機版網站建設）、響應式網站、程序開發(fā)、微網站、微信小程序等，憑借多年來在互聯(lián)網的打拼，我們在互聯(lián)網網站建設行業(yè)積累了豐富的網站建設、做網站、網絡營銷經驗，集策劃、開發(fā)、設計、營銷、管理等多方位專業(yè)化運作于一體，具備承接不同規(guī)模與類型的建設項目的能力。
1.在React中，由React控制的事件處理函數(shù)，如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 (
2.在原生JS監(jiān)聽的事件中,如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 (
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 (
到此，關于“React中setState同步和異步怎么實現(xiàn)”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注創(chuàng)新互聯(lián)網站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
文章名稱：React中setState同步和異步怎么實現(xiàn)
地址分享：http://weahome.cn/article/ipdoij.html
