react18更新哪些东西

React 18 是 React 的一个重要版本，于 2022 年 3 月正式发布，它为 React 带来了许多关键的更新和特性，特别是为了支持 并发渲染（Concurrent Rendering）。以下是 React 18 的核心更新内容：

🚀 核心特性更新

1. ✅ 自动批处理（Automatic Batching）

• React 18 之前，只有在 React 控制下（如事件处理函数中）多次 setState 才会批处理更新。

• 在 React 18 中，即使在 setTimeout、Promise.then、原生事件或其他异步操作中，也会批处理多个状态更新，从而减少重新渲染次数。

// React 18
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
}, 1000);
// 只触发一次 render

2. ⏱️ 并发特性（Concurrent Features）

• 并发渲染是 React 18 最大的变革。它允许 React 在后台准备多个 UI 状态，然后根据需要显示出来。

• 启用并发特性是 可选的，通过 <StrictMode> + createRoot 使用：

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

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

并发模式不是另一个模式，而是一个能力。它让 React 更加灵活高效地调度工作。

3. 🧩 <Suspense> 支持服务端渲染和更多异步场景

• 在 React 18 中，Suspense 不再局限于 code-splitting，而可以用于更多异步 UI 加载场景，包括服务端渲染。

<Suspense fallback={<Loading />}>
  <SomeAsyncComponent />
</Suspense>

4. ⏳ startTransition API

• 用于将“非紧急更新”标记为可中断的 transition，避免卡顿。

import { startTransition } from 'react';

const handleInput = (e) => {
  const nextValue = e.target.value;
  
  // 不紧急的更新
  startTransition(() => {
    setSearchQuery(nextValue);
  });
};

React 会优先渲染紧急更新（如输入框变化），延迟处理不紧急的内容（如渲染搜索结果）。

5. 🔁 新 Hook：useTransition / useDeferredValue

• useTransition: 和 startTransition 配套，用于标记“低优先级”的状态更新。

const [isPending, startTransition] = useTransition();

startTransition(() => {
  setValue(inputValue);
});

• useDeferredValue: 推迟传入值的更新，用于列表、表格等 UI 优化。

const deferredValue = useDeferredValue(inputValue);

6. 🧵 React 18 SSR 改进

React 18 引入了新的 流式服务端渲染 API：

• renderToPipeableStream（Node.js）

• 支持边渲染边传输（streaming），更快的首屏渲染。

import { renderToPipeableStream } from 'react-dom/server';

7. 🧪 并发特性向下兼容，渐进增强

• 你可以按需在应用中逐步引入并发特性。

• 默认行为和 React 17 保持一致，避免破坏现有功能。

📦 升级注意点

• 使用 createRoot 替代 ReactDOM.render

// React 17
ReactDOM.render(<App />, document.getElementById('root'));

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

• 第三方库是否兼容 React 18（特别是并发模式）可能需要确认。

• 某些行为可能有轻微变化，如状态更新时机。

🔮 总结：React 18 带来了什么？