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