React 18 并发模式详解

什么是并发模式

React 18 引入的并发模式（Concurrent Mode）允许 React 同时准备多个版本的 UI，根据用户优先级中断、暂停或恢复渲染工作，从而让应用在高负载下依然保持流畅。

useTransition：低优先级更新

import { useState, useTransition } from "react";

function SearchPage() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState<string[]>([]);
  const [isPending, startTransition] = useTransition();

  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    setQuery(e.target.value);
    startTransition(() => {
      setResults(expensiveSearch(e.target.value));
    });
  }

  return (
    <div>
      <input value={query} onChange={handleChange} />
      {isPending ? <Spinner /> : <ResultList results={results} />}
    </div>
  );
}

useDeferredValue：延迟派生值

当你无法控制触发更新的代码时，useDeferredValue 是更好的选择：

const deferredQuery = useDeferredValue(query);
// 使用 deferredQuery 渲染列表，不会阻塞输入

Suspense 数据获取

React 18 中 Suspense 正式支持数据获取场景。配合 Next.js 的 loading.tsx 可以实现优雅的加载状态：

<Suspense fallback={<PostSkeleton />}>
  <PostContent slug={slug} />
</Suspense>

总结

并发模式不是一个需要手动开启的开关，而是一套让 React 更聪明地调度工作的机制。从 useTransition 和 useDeferredValue 开始实践，能显著改善搜索、过滤等交互密集场景的体验。