React.StrictMode组件与Babel配置的strictMode是否为同一功能？

核心结论 #

两种配置作用完全不同，绝大多数场景下不存在互相替代的关系。

1. 入口处手动包裹<React.StrictMode>组件 #

这是React官方提供的运行时严格模式能力，代码如下：

ReactDOM.render(
  <React.StrictMode>
     <App />
  </React.StrictMode>,
  document.getElementById('root')
);

它的作用范围是React应用的运行阶段：

• 仅在开发环境生效，生产环境不会产生任何额外执行逻辑
• 专门检测React框架相关的不规范用法：包括废弃生命周期的使用、不安全的副作用执行、过时的Context API调用、第三方库不符合严格模式规范的兼容问题等
• 不会修改编译后的代码语法，仅在React运行时注入校验逻辑

2. Babel配置中的"strictMode": true #

该配置分两种常见场景，作用完全不同：

场景1：Babel默认预设/插件的配置（最常见情况）

属于@babel/plugin-transform-strict-mode或@babel/preset-env的内置配置，开启后是启用ES语言层面的严格模式，配置如下：

{
  "strictMode": true
}

它的作用是编译阶段给所有输出的JS文件顶部自动插入'use strict'声明，仅限制JS原生语法的不合理用法：比如禁止使用未声明的变量、禁止删除普通变量、禁止函数参数重名、arguments对象行为固化等，和React框架的运行时校验没有任何关联。
这种场景下，哪怕你开启了Babel的strictMode配置，也完全不能替代<React.StrictMode>组件的作用，反之亦然，二者可以独立开启/关闭。

场景2：第三方React严格模式自动注入插件的配置

如果你的项目引入了babel-plugin-auto-react-strict-mode这类非官方Babel插件，该配置的作用是编译阶段自动给应用根组件包裹<React.StrictMode>，这种场景下开启配置后，确实不需要再手动在入口处包裹组件；反之如果你已经手动在入口处包裹了组件，也不需要开启该插件的配置。

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