---
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 响应更加流畅。核心思路是"区分优先级，可中断渲染"。