React 18 超全升级指南

React 18 RC.3 版已经发布，并且 API 已经稳定下来，现在主要是一些 BUG 修复，相信不久后便会发布正式版。React 团队对新特性的探索相当谨慎，距离 16.8 版本已经有 3 年时间了，完全版的并发模式终于到来。今天我们从使用者的角度来探索下 React 17 升级到 18 会遇到的问题和一些新增的功能。

升级

使用 yarn 要安装最新的 React 18 RC

yarn add react@rc react-dom@rc

变更

createRoot

React 18 提供了两个根 API，我们称之为 Legacy Root API 和 New Root API。

• Legacy root API： 即 ReactDOM.render。这将创建一个以“遗留”模式运行的 root，其工作方式与 React 17 完全相同。使用此 API 会有一个警告，表明它已被弃用并切换到 New Root API。
• New Root API： 即 createRoot。 这将创建一个在 React 18 中运行的 root，它添加了 React 18 的所有改进并允许使用并发功能。

我们以 Vite + TS 作为脚手架启动项目。项目启动后你会在控制台中看到一个警告：

也就意味着你可以直接将项目升级到 React 18 版本而不会直接造成 break change。因为它仅仅给予了一个警告，并且在整个 18 版本中都为可用兼容状态，并保持着 React 17 版本的特性。

为什么要这样做呢？ 因为仅仅为项目升级的话比较干脆利落，遇见一个地方改一个地方，无历史包袱。但是 React 组件生态非常庞大，很多组件会用到 ReactDOM.render 直接渲染，比如常见 UI 库中的 Modal.confirm 类似的 API，这时就需要一个版本的周期让这些生态组件升级上来。

// React 17
import ReactDOM from 'react-dom';
const container = document.getElementById('app');
// 装载
ReactDOM.render(<App tab="home" />, container);
// 卸载
ReactDOM.unmountComponentAtNode(container);

// React 18
import {
    createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container);
// 装载
root.render(<App tab="home" />);
// 卸载
root.unmount();

还不得不说 createRoot API 和 Vue3 的 createApp 形式一模一样。

FAQ: 在 TypeScript， createRoot 中参数 container 可接收 HTMLElement ，但不能为空。使用要么断言，要么加判断吧~

服务端渲染

hydrateRoot

如果的应用使用带注水的服务端渲染，请升级 hydrate 到 hydrateRoot

const root = hydrateRoot(container, <App tab="home" />);
// 这里无需执行 root.render

在此版本中，也改进了 react-dom/serverAPI 以完全支持服务器上的 Suspense 和流式 SSR。作为这些更改的一部分，将弃用旧的 Node 流式 API，它不支持服务器上的增量 Suspense 流式传输。

• renderToNodeStream => renderToPipeableStream
• 新增 renderToReadableStream 以支持 Deno
• 继续使用 renderToString (对 Suspense 支持有限)
• 继续使用 renderToStaticMarkup (对 Suspense 支持有限)

setState 同步/异步

这是 React 此次版本中最大的破坏性更新，并且无法向下兼容。

React 中的批处理简单来说就是将多个状态更新合并为一次重新渲染，以获得更好的性能，在 React 18 之前，React 只能在组件的生命周期函数或者合成事件函数中进行批处理。默认情况下，Promise、setTimeout 以及原生事件中是不会对其进行批处理的。如果需要保持批处理，则可以用 unstable_batchedUpdates 来实现，但它不是一个正式的 API。

React 18 之前：

function handleClick() {
   
  setCount(1);
  setFlag(true);
  // 批处理：会合并为一次 render
}

function handleClick() {
   
  Promise.resolve().then(() => {
   
    setCount(2);
  });
  setFlag(false);
  // 同步模式：会执行两次 render
  // 并且在 setCount 后，在 setFlag 之前能通过 Ref 获取到最新的 count 值
}

在 React 18 上面的第二个例子只会有一次 render，因为所有的更新都将自动批处理。这样无疑是很好的提高了应用的整体性能。不过以下例子会在 React 18 中执行两次 render：

async function handleClick() {
   
  await setCount(2);
  setFlag