OneMD/posts/前端开发/react18-concurrent.md

title, date, category, tags, excerpt

title	date	category	tags	excerpt
React 18 并发特性深度解析	2026-05-22	前端开发	React JavaScript 并发	Suspense、Transitions、Server Components 全解读，理解 React 18 的核心变革。

一、并发渲染基础

1.1 什么是并发渲染

React 18 最核心的变化就是并发渲染。简单来说，React 可以"暂停"正在进行的渲染工作，处理更高优先级的更新，然后再回来继续之前的工作。

这跟传统的同步渲染完全不同：

• 同步渲染：一旦开始就必须完成，无法中断
• 并发渲染：可以暂停、恢复、甚至丢弃正在进行的渲染

1.2 createRoot 与 StrictMode

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

二、Transitions

2.1 useTransition

将某些状态更新标记为"非紧急"：

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

const deferredQuery = useDeferredValue(query);
const results = useMemo(() => filterResults(deferredQuery), [deferredQuery]);

三、Suspense 改进

3.1 数据获取

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