94 lines
2.2 KiB
Markdown
94 lines
2.2 KiB
Markdown
---
|
|
title: "React 18 并发特性深度解析"
|
|
date: "2026-05-22"
|
|
category: "前端开发"
|
|
tags: ["React", "JavaScript", "并发"]
|
|
excerpt: "Suspense、Transitions、Server Components 全解读，理解 React 18 的核心变革。"
|
|
---
|
|
|
|
## 一、并发渲染基础
|
|
|
|
### 1.1 什么是并发渲染
|
|
|
|
React 18 最核心的变化就是并发渲染。简单来说，React 可以"暂停"正在进行的渲染工作，处理更高优先级的更新，然后再回来继续之前的工作。
|
|
|
|
这跟传统的同步渲染完全不同：
|
|
|
|
- **同步渲染**：一旦开始就必须完成，无法中断
|
|
- **并发渲染**：可以暂停、恢复、甚至丢弃正在进行的渲染
|
|
|
|
### 1.2 createRoot 与 StrictMode
|
|
|
|
```jsx
|
|
import { createRoot } from 'react-dom/client';
|
|
|
|
const root = createRoot(document.getElementById('root'));
|
|
root.render(<App />);
|
|
```
|
|
|
|
## 二、Transitions
|
|
|
|
### 2.1 useTransition
|
|
|
|
将某些状态更新标记为"非紧急"：
|
|
|
|
```jsx
|
|
function SearchPage() {
|
|
const [query, setQuery] = useState('');
|
|
const [isPending, startTransition] = useTransition();
|
|
|
|
function handleChange(e) {
|
|
// 紧急更新：输入框立即响应
|
|
setQuery(e.target.value);
|
|
|
|
// 非紧急更新：搜索结果可以延迟
|
|
startTransition(() => {
|
|
setSearchResults(filterResults(e.target.value));
|
|
});
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<input value={query} onChange={handleChange} />
|
|
{isPending ? <Spinner /> : <Results />}
|
|
</>
|
|
);
|
|
}
|
|
```
|
|
|
|
### 2.2 useDeferredValue
|
|
|
|
```jsx
|
|
const deferredQuery = useDeferredValue(query);
|
|
const results = useMemo(() => filterResults(deferredQuery), [deferredQuery]);
|
|
```
|
|
|
|
## 三、Suspense 改进
|
|
|
|
### 3.1 数据获取
|
|
|
|
```jsx
|
|
function ProfilePage() {
|
|
return (
|
|
<Suspense fallback={<ProfileSkeleton />}>
|
|
<ProfileDetails />
|
|
<Suspense fallback={<PostsSkeleton />}>
|
|
<ProfilePosts />
|
|
</Suspense>
|
|
</Suspense>
|
|
);
|
|
}
|
|
```
|
|
|
|
## 四、Server Components
|
|
|
|
React Server Components 让组件在服务端渲染，零 JS 体积发送到客户端：
|
|
|
|
- 可以直接访问数据库和文件系统
|
|
- 不会增加客户端 JS 打包体积
|
|
- 与 Client Components 无缝集成
|
|
|
|
## 五、总结
|
|
|
|
React 18 的并发特性让 UI 响应更加流畅。核心思路是"区分优先级，可中断渲染"。
|