React 16升级至React 17需注意事项及依赖版本处理咨询

一、升级核心注意事项 #

• 过渡版本无大砍，但细节要盯：React 17主打「无痛升级」，没移除任何核心API，主要调整了事件系统底层——以前事件绑定在document上，现在移到了root容器。如果你的代码里有直接操作document事件绑定的逻辑，得测试下是否正常。
• JSX 导入规则变松：React 17支持新的JSX转换，文件顶部不用再写import React from 'react'了，但旧代码照样能用。要是想启用新转换，得把Babel更到7.9+，或者Create React App更到4+。
• 提前清理废弃API：虽然17没删，但标记了一批18要移除的API，比如ReactDOM.render（现在可以用createRoot过渡，17里还能用）、带UNSAFE_前缀的生命周期（比如UNSAFE_componentWillMount）。趁升级17的机会慢慢替换，省得以后升18头疼。
• UI组件库先查兼容：你用的Ant Design、Material-UI这类UI库，得看有没有支持React 17的版本，部分旧版本可能在事件处理上出问题，优先更到官方标了兼容17的版本。

二、依赖包适配处理 #

通用操作步骤 #

• 先锁React核心包版本：先执行npm install react@17 react-dom@17或者yarn add react@17 react-dom@17，把核心包更到17。
• 排查依赖冲突：用npm ls或者yarn why查看依赖树，找出硬依赖旧版React的包；也可以用npm audit扫一遍，或者直接去每个包的官方文档确认是否支持React 17。
• 分批升级，别贪多：别一次性把所有依赖都更了，先处理路由、状态管理这类核心依赖，再更ESLint、Babel这类工具链，最后处理UI和工具类包。

重点依赖：ESLint & Redux 适配 #

ESLint

• 首先把eslint-plugin-react更到7.22.0以上，这个版本开始支持React 17的新JSX规则。
• 修改ESLint配置：要是之前开了react/jsx-uses-react和react/react-in-jsx-scope这两个规则，在17的新JSX转换下可以关掉，避免没必要的报错。
• 配置修改示例：

{
  "rules": {
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off"
  }
}

• 要是用了TypeScript的ESLint插件，得保证@typescript-eslint/eslint-plugin和@typescript-eslint/parser的版本和ESLint主版本兼容——比如ESLint 7.x对应@typescript-eslint 4.x，ESLint 8.x对应5.x以上。

Redux

• Redux核心包（redux）对React版本要求很低，只要是16.8+都能用，所以不用特意升级核心包，除非你想尝新特性。
• 重点升级react-redux到7.2.4以上，这个版本正式兼容React 17，修复了一些上下文传递的小问题。
• 要是用了@reduxjs/toolkit，升级到1.5.0以上就行，它已经适配了React 17，还能简化Redux代码，推荐优先用这个代替手动写Redux逻辑。

三、升级后必做验证 #

• 跑全量测试用例：确保单元测试、集成测试都通过，重点盯事件处理、状态更新、组件渲染这些逻辑。
• 手动测试核心流程：比如表单提交、路由跳转、状态变更这些常用场景，确认没异常。
• 查看控制台警告：React 17会对即将废弃的API弹出警告，跟着提示慢慢修复就行。

内容的提问来源于stack exchange，提问作者Vimal Swaroop J