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 带来了什么？

特性	描述
✅ 自动批处理	提升性能，减少重复渲染
🧠 并发渲染能力	更灵活的 UI 响应能力
🌀 startTransition / useTransition	提高响应速度，避免卡顿
🧵 流式 SSR	更快首屏，更强 SEO 支持
🧩 更强的 Suspense 支持	支持异步数据和懒加载组件
🔧 createRoot	开启并发特性的入口

---