React中setState/useState的使用方法詳細介紹
更新時間：2023年04月06日 10:00:32 作者：英俊瀟灑美少年
這篇文章主要介紹了React中setState/useState的使用方法，useState 和 setState 在React開發(fā)過程中 使用很頻繁，但很多人都停留在簡單的使用階段，并沒有正在了解它們的執(zhí)行機制
一、React如何使用setState/useState的最新的值
一般是可以正常的把最新的值，傳遞給所需要的函數(shù)中的，但是有些情況，需要使用最新數(shù)據(jù)的函數(shù)，不可改動，甚至所需要使用的地方并不是一個函數(shù)，那我們?nèi)绾潍@取setState/useState的最新的值呢？
A.使用setState的最新的值
1、setState方法可以接收兩個參數(shù)，第一個參數(shù)為一個對象，第二個參數(shù)為一個函數(shù)，即更新成功后執(zhí)行的回調(diào)函數(shù)。我們可以在回調(diào)函數(shù)中獲取更新后的值。
import React, { Component } from 'react'
export default class DemoClassComp extends Component {
constructor(props) {
super(props)
this.state = {
number: 1,
}
}
inControl = ()=>{
this.setState({number: 1}, () => {
console.log('%c ?? DemoClassComp -> inControl -> this.state.number ', 'font-size:16px;background-color:#f31440;color:white;', this.state.number)
})
}
render() {
return (
<div>
<button onClick={this.inControl} >點我</button>
</div>
)
}
}2、使用setTimeout
B.使用useState的最新的值
1、使用另一個Hook，useRef;
function DemoFuncComp() {
const [qimingFlag, setQimingFlag] = useState(false);
const qimingFlagRef = useRef(false);
const handleLine = () => {
deleteQimingFieldsData(data, qimingFlagRef?.current); //* 刪除啟明相關(guān)字段的數(shù)據(jù)
}
const initData = useCallback(async () => {
await commonQuery(basicInfoHeader, { contractId });
const qimingFlagNow = basicInfoHeader.current?.get('qimingFlag');
setQimingFlag(qimingFlagNow); //* 用于出發(fā)重新渲染
qimingFlagRef.current = qimingFlagNow;
handleLine(); //* 要求 先setQimingFlag
}, [contractId])
/**生命周期 */
useEffect(() => {
initData();
}, [contractId]);
return (
<>
<Form dataSet={basicInfoHeader} disabled={true} columns={4}>
<Lov name="receiverObj" />
</Form>
</>
)
}2、使用setTimeout
二、React中setState/useState執(zhí)行的同步異步問題
只要代碼進入了 react調(diào)度流程，那就是異步的。
只要代碼沒有進入 react調(diào)度流程，那就是同步的。
setTimeout、setInterval、async中await的后續(xù)部分，Promise.then()，以及直接在 DOM 上綁定原生事件等。這些都不會走 React調(diào)度流程，在這種情況下調(diào)用 setState ，那這次 setState 就是同步的。 否則就是異步的。
連續(xù)執(zhí)行兩個 useState
function DemoFuncComp() {
const [a, setA] = useState(0);
const [b, setB] = useState(0);
console.log('render')
function outControl() {
Promise.resolve().then(() => {
setA((a) => a + 1);
setB((b) => b + 1);
})
}
function inControl() {
setA((a) => a + 1);
setB((b) => b + 1);
}
return (
<>
<button onClick={outControl} >{a}- 【不受react調(diào)度】</button>
<button onClick={inControl} >{a}- 【react調(diào)度】</button>
</>
)
}
//! 當(dāng)點擊【不受react調(diào)度】按鈕時，render 了兩次
//! 當(dāng)點擊【react調(diào)度】按鈕時，只重新 render 了一次
連續(xù)執(zhí)行兩次同一個 useState
function DemoFuncComp() {
const [a, setA] = useState(1)
console.log('a', a)
function outControl() {
Promise.resolve().then(() => {
setA((a) => a + 1)
setA((a) => a + 1)
})
}
function inControl() {
setA((a) => a + 1)
setA((a) => a + 1)
}
return (
<>
<button onClick={outControl} >{a} 【不受react調(diào)度】</button>
<button onClick={inControl} >{a} 【react調(diào)度】</button>
</>
)
}
//! 當(dāng)點擊【不受react調(diào)度】按鈕時，兩次 setA 各自 render 一次，分別打印 2，3
//! 當(dāng)點擊【react調(diào)度】按鈕時，兩次 setA 都執(zhí)行，但合并 render 了一次，打印 3
連續(xù)執(zhí)行兩個 setState
class DemoClassComp extends React.Component {
constructor(props) {
super(props)
this.state = {
a: 1,
b: 'b',
}
}
outControl = () => {
Promise.resolve().then(() => {
this.setState({...this.state, a: 'aa'})
this.setState({...this.state, b: 'bb'})
})
}
inControl = () => {
this.setState({...this.state, a: 'aa'})
this.setState({...this.state, b: 'bb'})
}
render() {
console.log('render')
return (
<>
<button onClick={this.outControl} >【不受react調(diào)度】</button>
<button onClick={this.inControl} >【react調(diào)度】</button>
</>
)
}
}
//! 當(dāng)點擊【不受react調(diào)度】按鈕時，render 了兩次
//! 當(dāng)點擊【react調(diào)度】按鈕時，只重新 render 了一次
連續(xù)執(zhí)行兩次同一個 setState
class DemoClassComp extends React.Component {
constructor(props) {
super(props)
this.state = {
a: 1,
}
}
outControl = () => {
Promise.resolve().then(() => {
this.setState({a: this.state.a + 1})
this.setState({a: this.state.a + 1})
})
}
inControl = () => {
this.setState({a: this.state.a + 1})
this.setState({a: this.state.a + 1})
}
render() {
console.log('a', this.state.a)
return (
<>
<button onClick={this.outControl} >【不受react調(diào)度】</button>
<button onClick={this.inControl} >【react調(diào)度】</button>
</>
)
}
}
//! 當(dāng)點擊【不受react調(diào)度】按鈕時，兩次 setState 各自 render 一次，分別打印 2，3
//! 當(dāng)點擊【react調(diào)度】按鈕時，兩次 setState 合并，只執(zhí)行了最后一次，打印 2
總結(jié)
在正常的react調(diào)度流程中時：
- setState和useState都是異步執(zhí)行的
- 多次執(zhí)行setState和useState，會進行一次batchUpdate，只會重新渲染render一次
- 不同的是，多次執(zhí)行，setState會進行state的合并，而useState每次運行都會重新計算
不再react調(diào)度流程中時
- setState和useState是同步執(zhí)行的（立即更新state，觸發(fā)render，然后繼續(xù)執(zhí)行）
- 多次執(zhí)行setState和useState，每一次的執(zhí)行setState和useState，都會調(diào)用一次render
到此這篇關(guān)于React中setState/useState的使用方法詳細介紹的文章就介紹到這了,更多相關(guān)React setState/useState內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
實現(xiàn)react時間分片，主要內(nèi)容包括什么是時間分片、為什么需要時間分片、實現(xiàn)分片開啟 - 固定、實現(xiàn)分片中斷、重啟 - 連續(xù)、分片重啟、實現(xiàn)延遲執(zhí)行 - 有間隔、時間分片異步執(zhí)行方案的演進、時間分片簡單實現(xiàn)、總結(jié)、基本概念、基礎(chǔ)應(yīng)用、原理機制和需要注意的事項等2022-11-11
React 全自動數(shù)據(jù)表格組件——BodeGrid的實現(xiàn)思路
表格是在后臺管理系統(tǒng)中用的最頻繁的組件之一，相關(guān)的功能有數(shù)據(jù)的新增和編輯、查詢、排序、分頁、自定義顯示以及一些操作按鈕。這篇文章主要介紹了React 全自動數(shù)據(jù)表格組件——BodeGrid ,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了React hooks組件通信,在開發(fā)中組件通信是React中的一個重要的知識點，本文通過實例代碼給大家講解react hooks中常用的父子、跨組件通信的方法，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了淺談React Event實現(xiàn)原理,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
本文主要介紹了react組件多次渲染問題的解決，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
現(xiàn)在最熱門的前端框架，毫無疑問是 React 。下面這篇文章主要給大家分享了關(guān)于想用好React的你必須要知道的一些事情，文中介紹的非常詳細，對大家具有一定參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-07-07
react國際化化插件react-i18n-auto使用詳解
這篇文章主要介紹了react國際化化插件react-i18n-auto使用詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
具體來說這是一種react非受控組件，其狀態(tài)是在input的react內(nèi)部控制，不受調(diào)用者控制?？梢允褂檬芸亟M件來實現(xiàn)。下面就說說這個React中的受控組件與非受控組件的相關(guān)知識，感興趣的朋友一起看看吧2022-12-12
electron其實是一個桌面應(yīng)用程序，不是一個標準的前端web程序，所有沒有什么請求的發(fā)生，控制臺network看不到請求，而是只能通過console.log去打印查看，而且通信協(xié)議使用的不是http而是gRPC協(xié)議，這篇文章主要介紹了Electron+React如何進行通信,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了React?Hook四種組件優(yōu)化總結(jié)，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價孩子，需要的朋友可以參考一下2022-07-07