代碼解析React中setState同步和異步問(wèn)題
React起源于Facebook的內(nèi)部項(xiàng)目。React的出現(xiàn)是革命性的創(chuàng)新，React的是一個(gè)顛覆式的前端框架。在React官方這樣介紹的它：一個(gè)聲明式、高效、靈活的、創(chuàng)建用戶(hù)界面的JavaScript庫(kù)，即使React的主要作用是構(gòu)建UI，但是項(xiàng)目的逐漸成長(zhǎng)已經(jīng)使得react成為前后端通吃的WebApp解決方案。
angular中用的是watcher對(duì)象，vue是觀察者模式，react就是state了，他們各有各的特點(diǎn)，沒(méi)有好壞之分，只有需求不同而選擇不同。
React的官方網(wǎng)址：https://reactjs.org/GitHub
地址為：https://github.com/facebook/react
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 (
<div className='cp'>
<input className='cp-input' value={this.state.name} onChange={this._onChange.bind(this)} type="text"/>
</div>
);
}
}
2.在原生JS監(jiān)聽(tīng)的事件中,如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同步和異步代碼詳解的詳細(xì)內(nèi)容，更多關(guān)于React setState同步和異步的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了使用useEffect模擬組件生命周期，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
react滾動(dòng)加載useInfiniteScroll?詳解
使用useInfiniteScroll?hook可以處理檢測(cè)用戶(hù)何時(shí)滾動(dòng)到頁(yè)面底部的邏輯,并觸發(fā)回調(diào)函數(shù)以加載更多數(shù)據(jù),它還提供了一種簡(jiǎn)單的方法來(lái)管理加載和錯(cuò)誤消息的狀態(tài),今天通過(guò)實(shí)例代碼介紹下react滾動(dòng)加載useInfiniteScroll?相關(guān)知識(shí),感興趣的朋友跟隨小編一起看看吧2023-09-09
React中如何設(shè)置多個(gè)className
這篇文章主要介紹了React中如何設(shè)置多個(gè)className問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
React SSR服務(wù)端渲染的實(shí)現(xiàn)示例
本文主要介紹了實(shí)現(xiàn)React服務(wù)端渲染,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-01-01
這篇文章主要介紹了React中的JSX{?}的使用,React使用JSX來(lái)替代常規(guī)的JavaScript，JSX可以理解為的JavaScript語(yǔ)法擴(kuò)展，它里面的標(biāo)簽申明要符合XML規(guī)范要求，對(duì)React?JSX使用感興趣的朋友一起看看吧2022-08-08
這篇文章主要介紹了create-react-app降低react的版本方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
本文總結(jié)了React的基礎(chǔ)知識(shí)點(diǎn),包括環(huán)境搭建、核心概念（JSX、組件、props、state、事件處理、條件渲染、列表渲染）以及組件進(jìn)階（生命周期、Hooks、通信）,適合零基礎(chǔ)開(kāi)發(fā)者學(xué)習(xí),涵蓋理論與實(shí)操,適合React項(xiàng)目的開(kāi)發(fā)和維護(hù),感興趣的朋友跟隨小編一起看看吧2026-02-02
React項(xiàng)目動(dòng)態(tài)設(shè)置title標(biāo)題的方法示例
這篇文章主要介紹了React項(xiàng)目動(dòng)態(tài)設(shè)置title標(biāo)題的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
react實(shí)現(xiàn)瀏覽器自動(dòng)刷新的示例代碼
這篇文章主要介紹了react實(shí)現(xiàn)瀏覽器自動(dòng)刷新的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
本文主要介紹了React Context跨層級(jí)通信的利器,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2026-05-05