如何更新React版本？

如何更新 React 版本？

要更新 React 版本，请运行npm install react@latest react-dom@latest安装 React 和 React dom 包的最新版本。

如果您使用 create-react 应用程序，还需要更新 react 脚本的版本。

在项目的根目录（package.json 文件所在的目录）中打开终端，然后运行以下命令。

# 👇️ 使用 NPM
npm install react@latest react-dom@latest

# 👇️ 当使用 TypeScript 时
npm install --save-dev @types/react@latest @types/react-dom@latest

# ------------------------------

# 👇️ 使用 YARN
yarn add react@latest react-dom@latest

# 👇️ 当使用 TypeScript 时
yarn add @types/react@latest @types/react-dom@latest --dev

以上命令将更新 react 相关包的版本。

如果出现错误，请尝试运行带有--force标志的命令，例如npm installreact@latest --force

更新 create-react-app 版本

如果您使用 create-rect-app 程序，还需要更新 react-scripts 包的版本。

# 👇️ 使用 npm
npm install react-scripts@latest

# ----------------------------------------------

# 👇️ 使用 yarn
yarn add react-scripts@latest

删除 node_modules 并重新安装依赖项

如果出现错误，请使用--force标志运行该命令，或者删除 node_modules 和 package-lock.json（而不是 package.json）文件，然后重新运行 npm install。

如果您使用的是 macOS 或 Linux 遇到问题，可以在 bash 或 zsh 中使用以下命令。

#  for macOS and Linux
rm -rf node_modules
rm -f package-lock.json
rm -f yarn.lock

# 👇️ clean npm cache
npm cache clean --force

# 👇️ install packages
npm install

如果您在 Windows 上，可以在 CMD 中发出以下命令。

# for Windows
rd /s /q "node_modules"
del package-lock.json
del -f yarn.lock

# 👇️ clean npm cache
npm cache clean --force

# 👇️ install packages
npm install

确保使用 createRoot API

确保您的 index.js 文件使用新的 createRoot API。

import {StrictMode} from 'react';
import {createRoot} from 'react-dom/client';

import App from './App';

// 👇️ 确保使用正确的根元素 ID
// 公共/index.html 文件
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>,
);

createRoot()方法将根元素作为参数，并创建一个 React 根。

您还可以更新任何与 react 相关的包的版本，例如，通过运行命令npm install some-package@latest --force来更新 react-testing-library。

确保从 react-dom/client 导入 createRoot。不支持从 react-dom 导入它。