react 如何升级

升级 React 项目的步骤

检查当前 React 版本，在项目根目录的 package.json 文件中查看 dependencies 或 devDependencies 下的 react 和 react-dom 版本。

备份项目文件，确保在升级前将重要文件（如 package.json、src 目录等）备份到安全位置，防止意外问题导致数据丢失。

更新 React 和相关依赖，使用 npm 或 yarn 运行以下命令升级 React 和 React DOM：

npm install react@latest react-dom@latest
# 或
yarn add react@latest react-dom@latest

检查并解决破坏性变更，查阅 React 官方升级指南（如从 16.x 到 17.x 或 17.x 到 18.x），特别注意废弃的 API 或行为变更。常见问题包括 componentWillMount 等生命周期方法的移除。

测试项目功能，升级后运行测试套件（若有），并手动检查核心功能是否正常。重点关注状态管理、路由、第三方库兼容性等问题。

处理常见升级问题

版本冲突时，检查其他依赖库（如 react-router、redux）是否需要同步升级。运行 npm outdated 或 yarn outdated 查看过时的依赖。

使用 react-scripts 的项目（Create React App），需同步升级：

npm install react-scripts@latest
# 或
yarn add react-scripts@latest

TypeScript 项目需确保 @types/react 和 @types/react-dom 版本匹配：

npm install @types/react@latest @types/react-dom@latest

自动化工具辅助升级

大型项目可使用 React 官方推荐的 react-codemod 工具自动迁移代码。例如，运行以下命令处理废弃的生命周期方法：

npx react-codemod rename-unsafe-lifecycles

对于 React 18 的并发模式升级，需将 ReactDOM.render 替换为 ReactDOM.createRoot：

// 旧代码
ReactDOM.render(<App />, document.getElementById('root'));

// 新代码
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);