如何升级到 React 18

今天，我们发布了 React 18 RC 版本。正如我们在 React Conf 上分享的那样，React 18 基于 concurrent 模式，带来了更多能力，同时提供了渐进升级的方法。在这篇文章中，我们会一步一步的带您升级到 React 18。

安装
使用 @rc标签来安装最新版 React

## npm
$ npm install react@rc react-dom@rc

## yarn
$ yarn add react@rc react-dom@rc
复制代码

客户端渲染 API 更新
当你首次安装 React 18 的时候，你会看到如下警告

ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it’s running React 17. Learn more: reactjs.org/link/switch…

React 18 提供了更合理的初始化 API，使用该 API，会自动启用 concurrent 模式：

// Before
import {
    render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);

// After
import {
    createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App tab="home" />);
复制代码

同时我们将卸载方法从 unmountComponentAtNode 修改为 root.unmount：

// Before
unmountComponentAtNode(container);

// After
root.unmount();
复制代码

我们移除了 ReactDOM.render 函数的 callback，因为当使用 Susponse 的时候，它会有问题：

// Before
const container = document.getElementById('app');
ReactDOM.render(<App