React19新特性

React 18 → 19 完整进化史🚀

🎯 React 18：并发革命的起点

React 18（2022年3月发布）是React历史上最重要的版本之一，引入了并发渲染机制。

1️⃣ 并发模式（Concurrent Mode）

并发渲染允许React在渲染过程中中断和恢复工作，更好地响应用户交互。

// React 18之前：同步渲染，一旦开始无法中断
// 如果渲染耗时，页面会卡顿

// React 18：可中断渲染
import { createRoot } from 'react-dom/client'

// 新Root API启用并发特性
const root = createRoot(document.getElementById('root'))
root.render(<App />)

核心优势：

• ✅ 响应性：主线程不会被长时间阻塞
• ✅ 优先级调度：高优先级任务（用户输入）优先处理
• ✅ 可中断渲染：低优先级任务可以被中断

2️⃣ 自动批处理（Automatic Batching）

React 18之前，只在React事件处理中批处理更新；现在所有更新都自动批处理！

function AutoBatchingDemo() {
  const [count, setCount] = useState(0)
  const [text, setText] = useState('')
  
  const handleClick = () => {
    // ✅ React 18：两次setState只会触发一次重渲染
    setCount(c => c + 1)
    setText('updated')
    
    // ✅ 甚至Promise、setTimeout中也批处理！
    setTimeout(() => {
      setCount(c => c + 1)
      setText('async updated') // 合并成一次渲染
    }, 1000)
  }
  
  return <button onClick={handleClick}>点击</button>
}

3️⃣ 新的Hooks家族

useTransition - 标记非紧急更新

import { useState, useTransition } from 'react'

function SearchComponent() {
  const [query, setQuery] = useState('')
  const [results, setResults] = useState([])
  const [isPending, startTransition] = useTransition()
  
  const handleSearch = (e) => {
    // ❗紧急更新：输入框立即响应
    setQuery(e.target.value)
    
    // ✅非紧急更新：搜索可以延迟/中断
    startTransition(() => {
      const filtered = expensiveSearch(e.target.value)
      setResults(filtered)
    })
  }
  
  return (
    <div>
      <input value={query} onChange={handleSearch} />
      {isPending && <div>搜索中...</div>}
      <ResultsList results={results} />
    </div>
  )
}

useDeferredValue - 延迟更新值

import { useDeferredValue, useMemo } from 'react'

function ExpensiveChart({ data }) {
  // 创建延迟版本的值
  const deferredData = useDeferredValue(data)
  
  // 使用延迟值进行昂贵计算
  const chartElements = useMemo(() => {
    return deferredData.map(item => <ChartItem data={item} />)
  }, [deferredData])
  
  // 显示加载提示
  const isStale = data !== deferredData
  
  return (
    <div>
      {isStale && <div>更新中...</div>}
      {chartElements}
    </div>
  )
}

useId - 生成唯一ID

import { useId } from 'react'

function FormField() {
  // ✅ 生成唯一且稳定的ID（服务端+客户端一致）
  const id = useId()
  
  return (
    <div>
      <label htmlFor={id}>用户名</label>
      <input id={id} type="text" />
    </div>
  )
}

useSyncExternalStore - 外部存储集成

import { useSyncExternalStore } from 'react'

// 用于集成Redux、Zustand等外部状态
function useStore(store) {
  const state = useSyncExternalStore(
    store.subscribe,
    store.getState,
    store.getServerSnapshot // 服务端渲染用
  )
  return state
}

4️⃣ Suspense增强

Suspense现在支持服务端渲染和数据获取。

import { Suspense } from 'react'

function App() {
  return (
    <Suspense fallback={<BigSpinner />}>
      <Comments /> {/* 可以异步加载数据 */}
      <Suspense fallback={<SmallSpinner />}>
        <Photos /> {/* 嵌套Suspense */}
      </Suspense>
    </Suspense>
  )
}

🚀 React 19：稳定与创新

React 19（2024年12月发布）将实验性特性稳定化，并引入全新能力。

1️⃣ React Compiler（自动记忆化）

革命性特性：编译器自动处理记忆化，减少手动useMemo/useCallback。

// React 18之前：需要手动优化
function ExpensiveComponent({ data }) {
  // 手动记忆化
  const processed = useMemo(() => {
    return heavyProcessing(data)
  }, [data])
  
  const handleClick = useCallback(() => {
    console.log('click')
  }, [])
  
  return <div onClick={handleClick}>{processed}</div>
}

// React 19 + Compiler：自动优化！
function ExpensiveComponent({ data }) {
  // ✅ 编译器自动记忆化，无需手动
  const processed = heavyProcessing(data)
  
  const handleClick = () => {
    console.log('click')
  }
  
  return <div onClick={handleClick}>{processed}</div>
}

2️⃣ Actions（服务器和客户端）

统一处理异步操作，特别是表单提交。

// 服务端Action
'use server'

async function updateUser(formData) {
  const name = formData.get('name')
  const email = formData.get('email')
  
  // 直接访问数据库（安全！）
  await db.user.update({ name, email })
  
  return { success: true }
}

// 客户端组件
function UserForm() {
  // useActionState管理异步状态
  const [state, formAction, isPending] = useActionState(updateUser)
  
  return (
    <form action={formAction}>
      <input name="name" />
      <input name="email" />
      <button type="submit" disabled={isPending}>
        {isPending ? '提交中...' : '更新'}
      </button>
      {state?.success && <p>更新成功！</p>}
    </form>
  )
}

3️⃣ use Hook - 统一资源读取

全新的use Hook，可以在条件语句、循环中调用。

import { use } from 'react'

function Comments({ commentsPromise }) {
  // ✅ use可以在条件语句中使用！
  if (commentsPromise) {
    const comments = use(commentsPromise)
    return comments.map(comment => <div>{comment.text}</div>)
  }
  
  return <div>暂无评论</div>
}

// 也可以用于Context
function ThemeButton() {
  // use(Context) 替代 useContext
  const theme = use(ThemeContext)
  return <button className={theme}>点击</button>
}

4️⃣ 服务器组件稳定版

React 19让**服务器组件（RSC）**成为稳定特性。

// ServerComponent.server.js - 只在服务端运行
import db from './db'

export default async function UserList() {
  // ✅ 直接访问数据库（不会发送到客户端！）
  const users = await db.user.findMany()
  
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          {user.name}
          {/* 可以嵌入客户端组件 */}
          <ClientButton user={user} />
        </li>
      ))}
    </ul>
  )
}

5️⃣ 文档元数据支持

直接在组件中设置title、meta标签。

function BlogPost({ post }) {
  return (
    <article>
      {/* ✅ 这些标签会被自动移动到<head> */}
      <title>{post.title}</title>
      <meta name="description" content={post.excerpt} />
      <meta property="og:title" content={post.title} />
      
      <h1>{post.title}</h1>
      <div>{post.content}</div>
    </article>
  )
}

⚡ React 19.2：新特性大爆发

React 19.2（2025年10月发布）带来了更多创新API。

1️⃣ <Activity /> 组件

用于控制UI的可见性和优先级，替代条件渲染。

import { Activity } from 'react'

function App() {
  const [showPage, setShowPage] = useState(false)
  
  return (
    <div>
      <button onClick={() => setShowPage(!showPage)}>
        切换页面
      </button>
      
      {/* ✅ 替代 {showPage && <Page />} */}
      <Activity mode={showPage ? 'visible' : 'hidden'}>
        <Page />
      </Activity>
    </div>
  )
}

两种模式：

• visible：正常显示
• hidden：隐藏，但保留状态，更新被推迟到空闲时

2️⃣ useEffectEvent

解决Effect中的“事件”逻辑问题。

import { useEffect, useEffectEvent } from 'react'

function ChatRoom({ roomId, theme }) {
  // ✅ 将“事件”逻辑提取出来
  const onConnected = useEffectEvent(() => {
    showNotification('Connected!', theme)
  })
  
  useEffect(() => {
    const connection = createConnection(roomId)
    connection.on('connected', () => {
      onConnected() // 总是使用最新theme
    })
    connection.connect()
    
    return () => connection.disconnect()
  }, [roomId]) // ✅ 不需要把theme作为依赖！
  
  return <div>聊天室：{roomId}</div>
}

核心价值：Effect依赖数组中不需要包含事件逻辑使用的值！

3️⃣ cacheSignal

用于服务器组件中取消过期请求。

import { cache, cacheSignal } from 'react'

const fetchUser = cache(async (id) => {
  const response = await fetch(`/api/users/${id}`, {
    signal: cacheSignal() // 自动取消！
  })
  return response.json()
})

async function UserProfile({ id }) {
  // 如果渲染被中断或缓存过期，请求自动取消
  const user = await fetchUser(id)
  return <div>{user.name}</div>
}

4️⃣ 性能追踪（Performance Tracks）

Chrome DevTools新增React专用性能面板！

• Scheduler轨道：显示不同优先级任务的执行情况
• 组件轨道：显示组件渲染、挂载、Effect执行时间

// 可以给transition添加标签，方便调试
startTransition(() => {
  React.unstable_trace('search-filtering', () => {
    setResults(expensiveSearch(query))
  })
})

5️⃣ 部分预渲染（Partial Pre-rendering）

预渲染静态部分，后续动态恢复。

import { prerender, resume } from 'react-dom/server'

// 1. 预渲染，保存暂停状态
const { prelude, postponed } = await prerender(<App />, {
  signal: controller.signal
})

// 2. 后续恢复渲染
const stream = await resume(<App />, postponed)

📊 版本特性对比总表

特性	React 18	React 19	React 19.2
并发渲染	✅ 引入	✅ 稳定	✅ 增强
自动批处理	✅ 引入	✅ 保留	✅ 保留
useTransition	✅ 新Hook	✅ 稳定	✅ 增强
useDeferredValue	✅ 新Hook	✅ 稳定	✅ Bug修复
useId	✅ 新Hook	✅ 保留	⚡ 格式优化
React Compiler	❌	✅ 稳定	✅ 增强
Actions	❌	✅ 引入	✅ Bug修复
Server Components	⚠️ 实验性	✅ 稳定	✅ 增强
use Hook	❌	✅ 引入	✅ 保留
文档元数据	❌	✅ 引入	✅ 保留
Activity组件	❌	❌	✅ 引入
useEffectEvent	❌	❌	✅ 引入
cacheSignal	❌	❌	✅ 引入
性能追踪	❌	❌	✅ 引入
部分预渲染	❌	❌	✅ 引入

🎯 难点解析

Q1：React 18的并发渲染解决了什么问题？

满分回答：

• 问题：传统React渲染是同步的，一旦开始就无法中断，复杂渲染会导致页面卡顿
• 解决：并发渲染允许React中断/恢复/优先级调度渲染工作
• 机制：通过时间切片（time-slicing）将渲染拆分成小任务，高优先级任务（用户输入）插队执行
• API：useTransition、useDeferredValue、Suspense配合使用

Q2：React 19最值得升级的特性是什么？

1. React Compiler：自动记忆化，减少手动优化代码量
2. Actions：简化表单和异步操作处理
3. Server Components：减少客户端包体积，直接访问后端
4. 文档元数据：SEO优化更简单

Q3：useTransition和useDeferredValue的区别？

// useTransition：你控制什么时候开始过渡
const [isPending, startTransition] = useTransition()
startTransition(() => { setState(newValue) })

// useDeferredValue：React自动延迟更新
const deferredValue = useDeferredValue(value)
// 当value频繁变化时，deferredValue会滞后

Q4：什么是Activity组件？解决了什么问题？

Activity组件用于控制UI的可见性和优先级：

• 替代{show && <Component />}模式
• 保留组件状态（不像条件卸载）
• 延迟更新：hidden状态下更新被推迟到空闲时
• 预渲染即将导航到的内容

Q5：React 19.2的性能追踪工具有什么用？

Chrome DevTools新增两个React专用面板：

• Scheduler轨道：查看任务优先级和调度情况
• 组件轨道：查看组件渲染、Effect执行时间
• 帮助定位性能瓶颈，优化用户体验