React 18 升级指南,超简单
Posted 前端修罗场
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React 18 升级指南,超简单相关的知识,希望对你有一定的参考价值。
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>
总结
正如承诺的那样,React 18的更新非常简单!大多数应用程序应该能够在没有太多问题的情况下进行升级。
如果你在你的迁移过程中遇到问题,你正在使用StrictMode,试着暂时删除它,看看你是否遇到任何问题。React 18引入了一些可能会影响一些应用的变化。
最后,希望你喜欢新的 React 特性!
以上是关于React 18 升级指南,超简单的主要内容,如果未能解决你的问题,请参考以下文章
React 18 发布、Vue 3、Vitest、Pinia 正式成为 Vue 官方推荐的状态
字节辟谣“2021年广告收入2800亿,超全国电视台总和”;72岁美国教授唐加拉获图灵奖;React 18发布|极客头条