React 18 引入了 并發特性（Concurrent Features），這是一次對 React 渲染機制的重大升級，讓 React 更加智能、響應更流暢、資源更節省。

我們來詳細講解一下它的原理、特性、API 以及實際應用。

---

🧠 一、什么是并發特性（Concurrent Features）？

傳統的 React 是 同步阻塞渲染：一旦開始渲染某個更新，就必須做完，不能中斷，哪怕是非常耗時的任務，因此可能會發生阻塞。

之前，有時候加載一個復雜的圖表，或者切換到一個內容很多的頁面，整個頁面就突然卡住，這就是 UI 卡頓或者說主線程阻塞。

React 18 引入的“并發特性”允許 React：

• 中斷當前的渲染任務，優先處理更緊急的更新（比如用戶輸入、動畫）。
• 將更新分片執行，避免阻塞主線程。
• 自動調度優先級高的任務先執行，提高響應速度。
• 支持 延遲加載（lazy loading）和流式渲染（Streaming）。

這種機制稱為 Concurrent Rendering（并發渲染），實現更智能的調度。

?? 并不是你寫的代碼是“并發的”，而是 React 的內部調度機制變得更智能了。
?? 并發不是并行，js 還是單線程，并發是任務調度策略。

---

🚀 二、如何啟用并發特性？

從 React 18 開始，默認就支持并發功能，但 必須使用新的 createRoot API 才能激活。

// React 17 舊寫法（不會啟用并發特性）
ReactDOM.render(<App />, document.getElementById('root'));// React 18 新寫法（啟用并發特性）
import { createRoot } from 'react-dom/client';const root = createRoot(document.getElementById('root'));
root.render(<App />);

---

🔧 三、React 18 中的關鍵并發特性 API

1. startTransition()

用于把非緊急的更新（如篩選、排序、搜索）標記為 可中斷任務。

import { startTransition, useState } from 'react';function App() {const [input, setInput] = useState('');const [list, setList] = useState([]);function handleChange(e) {const value = e.target.value;setInput(value);// 標記為“過渡更新” => 可中斷startTransition(() => {const filtered = hugeDataList.filter(item =>item.includes(value));setList(filtered);});}return (<><input value={input} onChange={handleChange} /><ul>{list.map(item => <li key={item}>{item}</li>)}</ul></>);
}

如果用戶繼續輸入，React 會 中斷上一個過濾渲染，執行最新的更新。

---

2. useTransition()

useTransition 標記“不那么緊急”的更新。

允許將狀態更新標記為“過渡(Transition)”, 降低其優先級。返回isPending
(布爾值，指示過渡是否待處理)和startTransition(函數，用于包裹低優先級狀態更新)。

核心：控制狀態更新的“時機”或“優先級”，避免阻塞高優先級交互。

更細粒度的過渡控制，可用于顯示“加載中”狀態：

const [isPending, startTransition] = useTransition();startTransition(() => {// 更新 state
});

{isPending ? '加載中...' : '加載完成'}

---

3. Suspense（改進支持）

React 18 支持在客戶端和服務端都使用 Suspense 進行延遲加載。

import { Suspense, lazy } from 'react';const HeavyComponent = lazy(() => import('./HeavyComponent'));function App() {return (<Suspense fallback={<div>加載中...</div>}><HeavyComponent /></Suspense>);
}

Suspense 是并發渲染支持的重要基礎之一。

---

4. useDeferredValue()

用于延遲某個值的變化，防止其觸發高開銷渲染。

const deferredInput = useDeferredValue(input);

可以搭配 input 實時搜索場景使用，提升體驗。

useTransition 和 useDeferredValue 的區別

1. 控制點不同
   • useTransition: 允許你包裹狀態更新的邏輯(setState)。你明確指
     定哪個更新是低優先級的
   • useDeferredValue：允許你包裹一個值（通常是props或派生狀態）。你關注的是值的延遲版本，而非更新過程。
2. API 和反饋機制
   • useTransition返回isPending狀態和startTransition函數。isPending可直接用于展示加載 UI。
   • useDeferredValue：僅返回一個延遲后的值。如需加載狀態，通常需自行比較原始值和延遲值(e.g,text!=deferredText)
3. 發起者視角
   • useTransition：主動行為
   • useDeferredValue：被動/響應式行為

---

🧩 四、實際應用場景舉例

應用場景	傳統做法的問題	React 18 的解決方案
用戶輸入時，觸發大數據渲染	輸入卡頓、掉幀	用 startTransition 異步更新結果
輸入框綁定了復雜運算的數據	實時更新導致卡頓	用 useDeferredValue 緩更新
懶加載組件過慢	首屏空白或阻塞渲染	用 Suspense 延遲加載并展示 loading
SSR 流式渲染	一次性渲染，TTFB 高	React 18 支持 streaming（ReactDOMServer）

搜索/篩選大型列表：

外部數據源的圖表/可視化：

圖表接收頻繁更新的 data prop，導致重繪耗時，引發卡頓。

編輯器草稿與實時預覽：

用戶輸入內容（高優先級），旁邊的預覽窗口根據輸入實時渲染 Markdown 或復雜格式（低優先級）。

兩者皆有可能，取決于狀態組織方式：

• useTransition：若編輯器和預覽內容是分別的狀態，用它包裹更
  新預覽內容的狀態。
• useDeferredValue：若預覽組件直接接收編輯器內容作 prop , 用
  它延遲預覽組件的渲染

---

🎯 總結

特性	說明
startTransition	標記某些更新為可中斷、可延遲
useTransition	用于顯示“掛起狀態”
useDeferredValue	推遲輸入值更新，防止重復高開銷渲染
Suspense	組件級懶加載或延遲展示
createRoot	啟用并發渲染的前提

---

如果你希望我結合某個真實業務場景（比如表單輸入、分頁、搜索）給你寫一個完整的 React18 并發特性 demo，也可以告訴我，我可以為你提供代碼。