React 18 新特性完全解析 – 并发渲染、Suspense、Server Components

React 18 概述

React 18 是 React 历史上最重要的更新之一。它引入了并发渲染（Concurrent Rendering），让 React 应用可以同时处理多个任务，显著提升用户体验。

核心新特性

1. 并发渲染（Concurrent Rendering）

并发渲染是 React 18 的核心。它允许 React 中断、暂停、恢复和放弃渲染工作。好处包括：

• 更流畅的 UI 交互
• 自动批处理更新
• 新的 Suspense 边界
• 选择性注水（Selective Hydration）

2. Automatic Batching（自动批处理）

React 18 默认自动批处理所有更新，减少不必要的渲染。

// React 18 自动批处理
setTimeout(() => {
  setA(1)
  setB(2)
  // 只有一次渲染
}, 1000)

3. Transitions（过渡）

import { useTransition } from 'react'

function App() {
  const [isPending, startTransition] = useTransition()
  
  function handleClick() {
    startTransition(() => {
      setQuery(input)
    })
  }
  
  return (
    <div>
      <input onChange={(e) => setInput(e.target.value)} />
      <button onClick={handleClick}>搜索</button>
      {isPending ? <Loading /> : <Results query={query} />}
    </div>
  )
}

4. Suspense for Data Fetching

import { Suspense } from 'react'

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Users />
    </Suspense>
  )
}

function Users() {
  const users = useFetchUsers()  // 挂起直到加载完成
  return users.map(user => <User key={user.id} user={user} />)
}

5. 新的 Hooks

// useId - 生成唯一 ID
function Form() {
  const id = useId()
  return <input id={id} />
}

// useSyncExternalStore - 订阅外部数据源
function useOnlineStatus() {
  return useSyncExternalStore(
    (callback) => window.addEventListener('online', callback),
    () => navigator.onLine
  )
}

// useDeferredValue - 延迟更新
function SearchResults({ query }) {
  const deferredQuery = useDeferredValue(query)
  // ...
}

升级指南

升级步骤

npm install react react-dom

旧版 API 变化

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

// 新
import { createRoot } from 'react-dom/client'
createRoot(document.getElementById('root')).render(<App />)

Strict Mode 行为变化

React 18 的 Strict Mode 会双重调用渲染，用于检测副作用。这可能暴露之前隐藏的问题。

未来特性

• React Server Components – 服务端组件
• 新的 DevTools – 更好的调试体验

总结

React 18 的并发特性是革命性的。它们让 React 应用更加流畅，即使在未来复杂应用中也能保持良好性能。建议新项目直接使用 React 18，老项目逐步迁移。