React 并发渲染深度实战：useTransition/useDeferredValue/Suspense 的正确打开方式

并发渲染：React 的中断式渲染

React 18 之前是同步渲染——一旦开始渲染，无法中断，长任务会阻塞 UI 交互。

同步渲染：
  用户输入 → [====== 长渲染 ======] → UI 更新
                    ↑ 用户感觉卡顿

并发渲染：
  用户输入 → [== 渲染 ==] → 中断 → 处理输入 → [== 继续渲染 ==]
                    ↑ 高优先级任务可以打断低优先级

---

useTransition：标记低优先级更新

基础用法

import { useTransition, useState } from 'react';

function SearchPage() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();

  function handleSearch(e: React.ChangeEvent<HTMLInputElement>) {
    // 高优先级：立即更新输入框
    setQuery(e.target.value);

    // 低优先级：搜索结果可以延迟
    startTransition(() => {
      setResults(filterLargeList(e.target.value));
    });
  }

  return (
    <div>
      <input value={query} onChange={handleSearch} />
      {isPending && <Spinner />}
      <ResultList results={results} />
    </div>
  );
}

实战：大列表过滤

function ProductFilter({ products }: { products: Product[] }) {
  const [filterText, setFilterText] = useState('');
  const [filteredProducts, setFilteredProducts] = useState(products);
  const [isPending, startTransition] = useTransition();

  function handleFilterChange(text: string) {
    setFilterText(text);

    startTransition(() => {
      // 10000 条商品过滤——低优先级
      const filtered = products.filter(p =>
        p.name.toLowerCase().includes(text.toLowerCase()) ||
        p.category.toLowerCase().includes(text.toLowerCase()) ||
        p.tags.some(t => t.includes(text))
      );
      setFilteredProducts(filtered);
    });
  }

  return (
    <div>
      <SearchInput
        value={filterText}
        onChange={handleFilterChange}
        // isPending 时不降低输入框的响应性
      />
      <div style={{ opacity: isPending ? 0.7 : 1, transition: 'opacity 0.2s' }}>
        <ProductGrid products={filteredProducts} />
      </div>
    </div>
  );
}

isPending 的正确用法

// ❌ 用 isPending 显示全屏 loading（闪烁）
{isPending ? <FullPageSpinner /> : <Content />}

// ✅ 用 isPending 做微妙的视觉反馈
<div style={{
  opacity: isPending ? 0.7 : 1,
  transition: 'opacity 0.15s',
  pointerEvents: isPending ? 'none' : 'auto',
}}>
  <Content />
</div>

---

useDeferredValue：延迟版本值

与 useTransition 的关系

// useTransition 版本
const [isPending, startTransition] = useTransition();
function handleChange(value) {
  setQuery(value);
  startTransition(() => setDeferredQuery(value));
}

// useDeferredValue 版本（等价，更简洁）
const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query);

实战：搜索建议

function SearchWithSuggestions() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);

  return (
    <div>
      <SearchInput value={query} onChange={setQuery} />
      {/* Suggestions 使用延迟值，不会阻塞输入 */}
      <Suggestions query={deferredQuery} />
    </div>
  );
}

function Suggestions({ query }: { query: string }) {
  const [suggestions, setSuggestions] = useState<string[]>([]);

  useEffect(() => {
    if (!query) { setSuggestions([]); return; }
    fetchSuggestions(query).then(setSuggestions);
  }, [query]);

  return (
    <ul>
      {suggestions.map(s => <li key={s}>{s}</li>)}
    </ul>
  );
}

useDeferredValue + memo = 性能利器

const deferredQuery = useDeferredValue(query);

// memo 确保只有 deferredQuery 变化时才重新渲染
const MemoizedResults = memo(Results);

return (
  <div>
    <SearchInput value={query} onChange={setQuery} />
    <MemoizedResults query={deferredQuery} />
  </div>
);

---

Suspense：声明式异步加载

基础：加载状态

const resource = fetchData();

function ProfilePage() {
  return (
    <Suspense fallback={<ProfileSkeleton />}>
      <ProfileDetails resource={resource} />
      <Suspense fallback={<PostsSkeleton />}>
        <ProfilePosts resource={resource} />
      </Suspense>
    </Suspense>
  );
}

function ProfileDetails({ resource }) {
  // 抛出 Promise 直到数据就绪
  const user = resource.user.read();
  return <h1>{user.name}</h1>;
}

嵌套 Suspense：瀑布 vs 并行

// ❌ 瀑布：每个 Suspense 等前一个完成
<Suspense fallback={<Skeleton />}>
  <A />
  <Suspense fallback={<Skeleton />}>
    <B />
    <Suspense fallback={<Skeleton />}>
      <C />
    </Suspense>
  </Suspense>
</Suspense>

// ✅ 并行：A/B/C 同时加载
<Suspense fallback={<Skeleton />}>
  <A />
</Suspense>
<Suspense fallback={<Skeleton />}>
  <B />
</Suspense>
<Suspense fallback={<Skeleton />}>
  <C />
</Suspense>

Suspense + React Router v7

import { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router';

const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));

function App() {
  return (
    <Suspense fallback={<PageSkeleton />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Suspense>
  );
}

---

流式 SSR + Suspense

服务端

// app.tsx
function App() {
  return (
    <Layout>
      <Suspense fallback={<ProductSkeleton />}>
        <ProductList /> {/* 异步数据 */}
      </Suspense>
    </Layout>
  );
}

流式 HTML 响应

HTTP 响应流：

1. 立即发送 Layout + ProductSkeleton
   <html><body><nav>...</nav><div class="skeleton">...</div>

2. ProductList 数据就绪后，流式发送替换
   <template id="suspense-boundary">
     <div class="products">...</div>
   </template>
   <script>
     // 替换 skeleton 为真实内容
     document.getElementById('suspense-boundary').replaceWith(...)
   </script>
   </body></html>

Next.js App Router 的流式 SSR

// app/products/page.tsx
export default async function ProductsPage() {
  // 这是 Server Component，自动 Suspense
  const products = await fetchProducts();

  return <ProductGrid products={products} />;
}

// app/layout.tsx
export default function Layout({ children }) {
  return (
    <html>
      <body>
        <Nav />
        <Suspense fallback={<Loading />}>
          {children}
        </Suspense>
      </body>
    </html>
  );
}

---

useActionState：表单的并发处理

import { useActionState } from 'react';

async function submitForm(prevState: Result, formData: FormData): Promise<Result> {
  const response = await fetch('/api/submit', {
    method: 'POST',
    body: formData,
  });
  return response.json();
}

function ContactForm() {
  const [state, formAction, isPending] = useActionState(submitForm, {
    status: 'idle',
  });

  return (
    <form action={formAction}>
      <input name="name" required />
      <input name="email" type="email" required />
      <textarea name="message" required />
      <button type="submit" disabled={isPending}>
        {isPending ? '提交中...' : '提交'}
      </button>
      {state.status === 'error' && <p className="error">{state.message}</p>}
      {state.status === 'success' && <p className="success">提交成功！</p>}
    </form>
  );
}

---

常见陷阱

陷阱 1：startTransition 内的 setState 不是立即的

// ❌ 期望立即更新，但实际是延迟的
startTransition(() => {
  setCount(c => c + 1);
});
console.log(count); // 还是旧值！

// ✅ 需要立即的更新放在 transition 外
setCount(c => c + 1);

陷阱 2：Suspense 边界过粗

// ❌ 整个页面一个 Suspense，任何数据未就绪都显示全屏 loading
<Suspense fallback={<FullPageLoading />}>
  <Header />
  <Sidebar />
  <MainContent />
  <Footer />
</Suspense>

// ✅ 细粒度 Suspense，各部分独立加载
<Header />
<Suspense fallback={<SidebarSkeleton />}>
  <Sidebar />
</Suspense>
<Suspense fallback={<MainSkeleton />}>
  <MainContent />
</Suspense>
<Footer />

陷阱 3：过度使用 useTransition

// ❌ 所有更新都标记为 transition（没有必要）
startTransition(() => {
  setA(value);
  setB(value);
  setC(value);
});

// ✅ 只对"可以等待"的更新使用 transition
setA(value); // 立即
startTransition(() => {
  setB(value); // 可以延迟
  setC(value); // 可以延迟
});

---

性能对比

场景	同步渲染	并发渲染
大列表过滤（10000条）	输入框卡顿 200ms	输入框流畅，列表延迟 50ms
页面切换	白屏等待 1s	骨架屏 + 流式填充
并行数据加载	瀑布 3s	并行 1s
紧急更新打断渲染	不支持	自动打断

---

总结

React 并发渲染的三个核心 API 各有定位：useTransition 标记可延迟更新、useDeferredValue 创建延迟值、Suspense 声明式异步加载。关键原则：紧急更新（输入、点击）立即处理，非紧急更新（过滤、搜索、导航）标记为 transition。配合流式 SSR，并发渲染让 React 应用在用户体验上实现质的飞跃。