如何无需手动修改package.json升级React@15至React@16及依赖？

嘿，这个场景我太熟悉了！之前把公司老项目从React 15升到16的时候，手动一个个核对依赖版本差点把我整疯。幸好有几个工具和命令能帮你自动搞定，完全不用手动去改package.json，给你整理了几个实用方法：

1. 直接用包管理器指定React 16版本安装 #

如果你只想先把核心的React和React-DOM升级到16，同时让包管理器自动处理兼容的依赖关系，直接运行下面的命令就行：

# 使用npm
npm install react@^16.0.0 react-dom@^16.0.0 --save

# 使用yarn
yarn add react@^16.0.0 react-dom@^16.0.0

这个命令会自动更新你的package.json和锁文件，npm/yarn会帮你自动解决大部分依赖兼容问题（只要对应依赖有适配React 16的版本）。

2. 用npm-check-updates批量升级所有React相关依赖 #

如果你的项目里有一堆和React关联的依赖（比如react-router、redux-react、formik这些），手动找每个包的兼容版本太麻烦，推荐用npm-check-updates这个工具批量处理：

• 直接用npx运行（不用全局安装），指定你要升级的React相关依赖：

npx npm-check-updates -u --filter "react,react-dom,react-router-dom,redux-react,prop-types"

这里的--filter参数用来筛选需要升级的依赖包，-u参数会直接把package.json里的版本号更新到最新兼容版本。

• 最后安装更新后的依赖：

npm install
# 或者 yarn install

这个工具会智能检测每个依赖的版本兼容性，避免安装和React 16冲突的版本。

3. Create React App项目专属快速升级 #

如果你的项目是用Create React App搭建的，那升级起来更省心，直接升级react-scripts就行：

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

react-scripts会自动帮你把React、React-DOM以及所有CRA相关的依赖都升级到适配的版本，全程不用你手动调整任何依赖版本。

额外提醒：升级后的代码兼容处理 #

依赖升级完后，可能会遇到React 16的API变化（比如部分生命周期钩子被废弃、错误边界的要求），这时候可以用React官方的react-codemod工具自动修复代码：

npx react-codemod rename-unsafe-lifecycles

这个命令会自动把废弃的生命周期钩子（比如componentWillMount）替换成React 16推荐的写法，帮你省掉不少手动修改的功夫。

内容的提问来源于stack exchange，提问作者AlwaysALearner