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 | 开启并发特性的入口 |