前言

React 18 是 React 团队历时两年打造的重大版本更新，带来了多项令人振奋的新特性。本文将从实际开发角度出发，深入讲解 Concurrent Rendering、Suspense、Automatic Batching 等核心特性，帮助你快速掌握 React 18 的最佳实践。

一、Concurrent Rendering（并发渲染）

Concurrent Rendering 是 React 18 最核心的架构变革。它允许 React 在渲染过程中被打断，优先处理更紧急的更新，从而提升用户交互体验。

在 React 18 中，所有的更新都会自动享受并发渲染的好处，无需手动开启。你只需要使用新的 createRoot API：

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

// React 18 新的挂载方式
const root = createRoot(document.getElementById('root'));
root.render(<App />);

// 旧的方式（React 17）
// ReactDOM.render(<App />, document.getElementById('root'));

二、Automatic Batching（自动批处理）

在 React 17 及之前，批处理仅在 React 事件处理函数中生效。React 18 将批处理扩展到了所有更新场景，包括 Promise、setTimeout、原生事件处理等：

function handleClick() {
  // React 18 中，以下两次 setState 会自动合并为一次渲染
  fetch('/api').then(() => {
    setCount(c => c + 1);   // 不会触发渲染
    setFlag(f => !f);        // 不会触发渲染
    // 只在这里触发一次渲染
  });
}

如果你确实需要在某些场景下立即更新，可以使用 flushSync：

import { flushSync } from 'react-dom';

function handleClick() {
  flushSync(() => {
    setCount(c => c + 1); // 立即渲染
  });
  setFlag(f => !f); // 之后再渲染一次
}

三、Suspense 完整支持

React 18 中 Suspense 终于可以在生产环境中使用了。结合 React.lazy，你可以轻松实现组件级别的代码分割和加载状态管理：

import { Suspense, lazy } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

配合数据获取库（如 TanStack Query、Relay 等），Suspense 还可以用于异步数据加载：

function ProfilePage() {
  return (
    <Suspense fallback={<ProfileSkeleton />}>
      <UserProfile />
      <Suspense fallback={<PostsSkeleton />}>
        <UserPosts />
      </Suspense>
    </Suspense>
  );
}

四、新的 Hooks

4.1 useId

用于生成唯一 ID，特别适合 SSR 场景，确保服务端和客户端生成一致的 ID：

import { useId } from 'react';

function TextInput() {
  const id = useId();
  return (
    <>
      <label htmlFor={id}>姓名</label>
      <input id={id} type="text" />
    </>
  );
}

4.2 useTransition

将状态更新标记为"过渡"，使其可被打断，避免阻塞用户交互：

import { useTransition, useState } from 'react';

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

  function handleChange(e) {
    // 紧急更新：立即更新输入框
    setQuery(e.target.value);
    
    // 非紧急更新：搜索结果可以稍后更新
    startTransition(() => {
      setSearchResults(e.target.value);
    });
  }
  
  return (
    <div>
      <input onChange={handleChange} />
      {isPending && <span>搜索中...</span>}
      <Results />
    </div>
  );
}

4.3 useDeferredValue

获取一个延迟更新的值，适用于优化大型列表的渲染性能：

import { useDeferredValue, useState } from 'react';

function SearchResults({ query }) {
  const deferredQuery = useDeferredValue(query);
  
  return (
    <List query={deferredQuery} />
  );
}

五、迁移指南

将项目从 React 17 升级到 React 18 非常简单：

npm install react@18 react-dom@18

然后修改入口文件：

// 之前
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));

// 之后
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);

总结

React 18 带来的新特性大幅提升了应用的性能和开发体验：

• Concurrent Rendering：底层架构升级，渲染更智能
• Automatic Batching：自动批处理减少不必要的渲染
• Suspense：优雅处理异步加载状态
• New Hooks：useId、useTransition、useDeferredValue 等增强开发能力

如果你的项目还在使用 React 17，建议尽快升级到 React 18，享受更好的性能和开发体验！