React 18 的并发渲染

React 18 引入了并发渲染机制，这是一个底层的重大变革，它允许 React 在高优先级的更新（如用户输入）出现时中断当前的渲染工作。

自动批处理

在 React 18 之前，React 只会在 React 事件处理函数中批处理更新。而在 React 18 中，所有的更新都会自动批处理，包括 promise、setTimeout、原生事件处理函数等。

// 在React 17中，这会导致两次渲染
setTimeout(() => {
  setCount((c) => c + 1);
  setFlag((f) => !f);
}, 1000);

// 在React 18中，这只会导致一次渲染

Suspense SSR

React 18 改进了服务器端渲染，引入了流式 SSR 和选择性注水功能。这使得应用可以更快地显示内容，并且可以在整个页面准备好之前开始交互。

Transition API

新的 startTransition API 允许你将某些更新标记为非紧急更新，这样当用户输入时，React 可以中断这些更新，保持界面的响应性。

import { startTransition } from "react";

// 紧急更新 - 用户输入
setInputValue(input);

// 标记为非紧急的状态更新
startTransition(() => {
  // 重新过滤列表
  setFilteredList(filterItems(input));
});

如何升级到 React 18

要升级到 React 18，你需要：

更新依赖包
将入口文件中的 ReactDOM.render 替换为 ReactDOM.createRoot

// React 17
import ReactDOM from "react-dom";
ReactDOM.render(<App />, container);

// React 18
import ReactDOM from "react-dom/client";
const root = ReactDOM.createRoot(container);
root.render(<App />);

React 18 的新特性为开发者提供了更强大的工具，使应用性能和用户体验都能得到显著提升。通过合理利用这些新特性，我们可以构建更加流畅和响应迅速的用户界面。