React 18 升级指南，超简单

最新推荐文章于 2025-04-14 18:10:16 发布

蟹蟹蟹风流

最新推荐文章于 2025-04-14 18:10:16 发布

阅读量3.3k

点赞数

文章标签： React 前端

本文链接：https://blog.youkuaiyun.com/ImagineCode/article/details/124205553

版权

React18带来了新特性，如useId, useSyncExternalStore和useDeferredValue钩子，以及startTransition API。尽管还处于RC阶段，大多数应用可平稳迁移。升级包括更换render为createRoot，确保依赖项更新。遇到问题时，可尝试移除StrictMode。React18的更新过程简单，大多数应用应能无缝过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

React 18是React一系列主要版本中的最新版本。有了它，你可以访问:新的特性，新的useId, useSyncExternalStore，和useDeferredValue钩子，以及新的startTransition API。

虽然React 18还不是一个稳定的版本，但是测试一下你的应用还是很有用的。

与之前的React主要版本一样，React 18对于大多数应用来说都是一个相当简单的迁移。

虽然Strict Mode的一些变化可能会影响你的应用，自动批处理可能会引入一些新的边缘情况，但它们只会影响那些没有正确遵循React规则的应用。

除了这些考虑，让我们升级!

安装

首先，安装React 18:

npm i react@18.0.0-rc.0 react-dom@18.0.0-rc.0

or:

yarn add react@18.0.0-rc.0 react-dom@18.0.0-rc.0

如果你正在使用Create React App，你可能也想升级到最新的v5版本，使用:

yarn add react-scripts@5

然后，确保升级任何可能依赖React的依赖项。

例如，将React Redux升级到v8或SWR升级到1.1.0

升级 render 方法

在你安装了React 18之后，你可能会在应用程序运行时收到一个错误:

警告:ReactDOM。React 18不再支持 render。使用createRoot代替。在你切换到新的API之前，你的应用会表现得像在运行React 17一样。了解更多信息:https://reactjs.org/link/switch-to-createroot

这是因为在之前的React 17和之前，你会有一个文件——通常叫做index.js或index.ts ’ , 包含以下代码:

const rootElement = document.getElementById("root");

虽然这段代码将继续在这个版本中发挥作用，但它不允许你利用React 18的大部分新特性。此外，它将在React的未来版本中被删除。

要解决此问题，请将此代码替换为以下代码:

const rootElement = document.getElementById("root");
ReactDOM.createRoot(rootElement).render(
  <App />
);

完成后，你应该能够通过{React.version}来验证你使用的React版本。

示例：

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@18.0.0-rc.0/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@18.0.0-rc.0/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.13.12/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/jsx">
      ReactDOM.createRoot(
        document.getElementById('root')
      ).render(
        <h1>Hello, React {React.version}!</h1>,
      );
    </script>
  </body>
</html>