React 18 并发特性深度解析

React 18 引入了并发渲染（Concurrent Rendering），这是一次重大的架构升级。

什么是并发模式？

并发模式允许 React 同时准备多个版本的 UI。它不是一个新的功能，而是一个新的底层机制。

核心概念

• 可中断渲染：React 可以在渲染过程中暂停、恢复甚至放弃一次渲染
• 优先级调度：不同的更新可以有不同的优先级
• Suspense：配合并发模式实现更好的加载体验

useTransition

useTransition 让你可以将某些状态更新标记为"过渡"：

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

  const handleChange = (e) => {
    startTransition(() => {
      setQuery(e.target.value);
    });
  };

  return (
    <>
      <input onChange={handleChange} />
      {isPending ? <Loading /> : <Results query={query} />}
    </>
  );
}

useDeferredValue

useDeferredValue 让你延迟更新一部分 UI：

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

  return (
    <>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <Results query={deferredQuery} />
    </>
  );
}

总结

并发模式不是让代码跑得更快，而是让用户体验更流畅。

并发特性让 React 应用能更好地响应用户交互，是 React 架构演进的重要一步。