1. 并发渲染 (Concurrent Rendering)
- React 18 最重要的更新之一就是引入了并发渲染模式。并发渲染允许 React 在后台执行更新，而不阻塞用户界面，从而使得应用在用户与之交互时更加流畅。
- 传统的 React 渲染模式是同步的，这意味着一旦开始渲染，React 会阻塞所有其他操作，直到渲染完成。而并发渲染可以根据用户的输入、网络状态等动态调整渲染进程，让更重要的任务优先处理。
2. 自动批量更新 (Automatic Batching)
- 在 React 18 中，批量更新的机制被自动优化。无论更新事件是在 React 事件处理器内还是在异步代码（如
setTimeout或fetch回调）中触发，React 都会自动将它们批量处理，以减少重渲染的次数。 - 这减少了每次状态或属性改变后触发的渲染次数，优化了性能。例如，之前在异步代码中每次状态更新都会导致一次渲染，而在 React 18 中这些状态更新会在同一帧内批量处理。
3. startTransition API
- React 18 提供了新的
startTransitionAPI，用于标记某些更新为“非紧急”（transition）。这允许 React 优先处理用户输入等紧急更新，而将低优先级的更新推迟到更合适的时间进行，从而确保用户界面始终响应及时。 - 例如，当用户在输入框中打字时，React 可以优先处理输入操作，而推迟一些相对不重要的 UI 更新，确保输入操作的即时反馈。
4. useTransition Hook
useTransition是 React 18 新增的 Hook，它可以用于处理较慢的状态更新。当某些更新可能导致界面卡顿时，可以使用useTransition将这些更新标记为低优先级，从而让高优先级的更新（如用户输入）快速响应。- 这对于复杂的 UI 渲染场景非常有帮助，可以显著改善用户体验。
5. Suspense 改进
- React 18 对
Suspense组件进行了扩展，特别是与服务器端渲染（SSR）结合使用时，允许组件的部分内容先行加载，后续内容可以延迟加载。这种渐进式的加载方式减少了首次渲染的时间，改善了用户体验。 Suspense在 React 18 中不仅支持组件的异步加载，还可以用于处理数据获取。这使得开发者可以更好地管理应用的渲染时机，减少长时间的白屏现象。
6. useDeferredValue Hook
useDeferredValue是另一个用于优化性能的 Hook。当某个值的更新速度跟不上用户输入或需要的渲染速度时，可以使用useDeferredValue来推迟这个值的更新，确保 UI 的流畅性。它适用于一些繁重的计算或渲染场景。
7. 改进的 SSR 支持
- React 18 提供了对服务器端渲染的更好支持，包括新的 API，如
streaming和selective hydration，这些功能使得 React 在 SSR 场景下能够更高效地生成和传递 HTML。页面的部分内容可以立即显示，其他部分则逐步“激活”，从而加速首屏加载时间。
8. 逐步水合 (Progressive Hydration)
- React 18 在 SSR 中引入了逐步水合的概念。传统的 SSR 在客户端需要一次性完成整个页面的水合，这对于大型应用来说可能较慢。而逐步水合允许 React 先水合页面中关键部分，其他部分可以延后进行，从而减少首屏加载时间，提升页面响应速度。
9. 减少 JavaScript 体积
- React 18 通过对内部代码的优化和引入一些新特性，使得打包后的 JavaScript 体积更小。更小的 JavaScript 文件意味着加载时间更快，进而提升了整体性能。
10. 双重渲染模式（双重树结构）
- React 18 引入了一种新的双重树结构，这使得在并发渲染中，React 能够保持两个树的状态，分别处理高优先级和低优先级的更新。通过这种机制，React 能够更好地处理复杂的 UI 变化，优化了性能。
总结
React 18 通过并发渲染、自动批量更新、startTransition API、useTransition 和改进的 Suspense 等特性，帮助开发者在处理复杂 UI 时提高应用的性能。
