這是一個(gè)經(jīng)典的 React 面試題，但答案并不是簡(jiǎn)單的“同步”或“異步”，需要分情況討論。

核心結(jié)論：在 React 能控制的事件中（如合成事件、生命周期），setState 是“異步”的；在 React 無(wú)法控制的地方（如原生事件、setTimeout、Promise 等），setState 是同步的。

這個(gè)“異步”是批量更新策略帶來(lái)的效果，而不是真的異步代碼。

1. 為什么會(huì)有“異步”的表現(xiàn)？

這是 React 為了性能優(yōu)化而設(shè)計(jì)的批量更新機(jī)制。

• 批量更新：如果你在一個(gè)事件處理函數(shù)中多次調(diào)用 setState，React 不會(huì)立即更新 this.state，而是將它們收集起來(lái)，只觸發(fā)一次重新渲染。這避免了不必要的渲染，提升了性能。
• 表現(xiàn)：因?yàn)楦卤?ldquo;推遲”了，在調(diào)用 setState 后立刻讀取 this.state，你得到的還是舊值，所以感覺像是異步的。

2. 具體情況分析

情況一：React 可控制的范圍（“異步”/批量更新）

場(chǎng)景： React 的合成事件（onClick、onChange 等）、React 生命周期函數(shù)（componentDidMount 等）。

表現(xiàn)： 不會(huì)立即更新，會(huì)進(jìn)行批量更新。

handleClick = () => {
  console.log(this.state.count); // 0
  this.setState({ count: this.state.count + 1 });
  console.log(this.state.count); // 還是 0（“異步”，還沒更新）
  
  this.setState({ count: this.state.count + 1 });
  console.log(this.state.count); // 依然是 0
}
// 函數(shù)執(zhí)行完后，React 會(huì)批量更新，count 只增加 1 次（因?yàn)閮纱?setState 讀到的 state.count 都是舊值 0）

情況二：脫離 React 控制的范圍（同步）

場(chǎng)景： 原生 DOM 事件監(jiān)聽、setTimeout、setInterval、Promise.then 等。

表現(xiàn)： 立即更新，每一次 setState 都會(huì)觸發(fā)一次重新渲染。

handleClick = () => {
  setTimeout(() => {
    console.log(this.state.count); // 0
    this.setState({ count: this.state.count + 1 });
    console.log(this.state.count); // 1（同步，立即更新了）
    
    this.setState({ count: this.state.count + 1 });
    console.log(this.state.count); // 2
  }, 0);
}
// 在 setTimeout 中，每次 setState 都會(huì)立即生效并渲染

原因： React 的批量更新是通過一個(gè)“開關(guān)”控制的。在 React 自身的事件處理函數(shù)開始時(shí)，這個(gè)開關(guān)是打開的，函數(shù)結(jié)束后統(tǒng)一更新并關(guān)閉。而 setTimeout 里的代碼執(zhí)行時(shí)，這個(gè)開關(guān)已經(jīng)是關(guān)閉狀態(tài)，所以每次 setState 都會(huì)立即生效。

3. 如何在“異步”狀態(tài)下獲取更新后的值？

React 提供了幾種方式：

1. setState 的回調(diào)函數(shù)：這是最直接的方式，回調(diào)會(huì)在更新完成后執(zhí)行。

   this.setState({ count: this.state.count + 1 }, () => {
     console.log(this.state.count); // 這里拿到的是更新后的值
   });
   

2. componentDidUpdate 生命周期：在組件更新后被調(diào)用，可以在里面對(duì)比新舊 props/state。

3. 在 useEffect 中監(jiān)聽（函數(shù)組件）：將 count 作為依賴項(xiàng)，當(dāng)它變化時(shí)執(zhí)行邏輯。

   useEffect(() => {
     console.log(count); // count 更新后會(huì)打印最新值
   }, [count]);
   

4. 總結(jié)對(duì)比

5. 加分點(diǎn)：React 18 中的變化

如果你對(duì) React 18 比較熟悉，可以補(bǔ)充說(shuō)明，這會(huì)是加分項(xiàng)。

從 React 18 開始，引入了新的 createRoot API，所有在 React.startTransition 或并發(fā)特性包裹下的更新，都會(huì)默認(rèn)進(jìn)行自動(dòng)批處理。這意味著即使在 setTimeout、Promise 等異步回調(diào)中，setState 也是批量異步的。

// React 18 + createRoot
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React 18 也會(huì)將這兩個(gè)更新合并為一次渲染
}, 1000);

小結(jié)：回答這個(gè)問題時(shí)，先拋出核心結(jié)論（分場(chǎng)景），再解釋原因（批量更新機(jī)制），最后提一下 React 18 的變化。這樣能清晰地展示你對(duì) React 內(nèi)部機(jī)制的理解深度。

到此這篇關(guān)于React中setState是同步的還是異步的的文章就介紹到這了,更多相關(guān)React中setState同步還是異步內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論