现代React JSX转换机制概述
自React 17版本起，React团队引入了新的JSX转换机制（New JSX Transform）。在此之前，Babel会将JSX代码（例如
然而，新的JSX转换机制改变了这一行为。现在，Babel可以直接从react/jsx-runtime中导入特殊的函数来处理JSX，例如_jsx和_jsxs。这意味着，对于单纯的JSX元素（如
尽管如此，如果代码中直接引用了React对象上的属性或方法，例如React.StrictMode、React.useState、React.useEffect等，那么React仍然需要被显式导入到当前作用域中。
错误分析：ESLint与'React'未定义
当你在React 17或更高版本中，移除了import React from 'react';这一行，但代码中仍然使用了React.StrictMode这样的表达式时，你可能会遇到类似如下的ESLint错误：
Failed to compile. [eslint] src\index.js Line 8:4: 'React' is not defined react/jsx-no-undef
这个错误信息明确指出'React' is not defined，并且来源于ESLint的react/jsx-no-undef规则。这表明问题并非出在React运行时本身，而是ESLint的eslint-plugin-react插件在进行代码检查时，未能识别出React对象，因为它期望React在当前作用域中可用。
ESLint的eslint-plugin-react插件包含了一些规则，用于确保React代码的正确性和一致性。其中，react/jsx-uses-react和react/react-in-jsx-scope是与此问题密切相关的两个规则：
- react/jsx-uses-react: 此规则旨在标记JSX中使用的React变量，以防止React被标记为未使用变量。
- react/react-in-jsx-scope: 此规则要求在使用JSX的文件中，React必须在作用域内。
在新的JSX转换机制下，由于JSX不再直接转换为React.createElement()，这些规则有时会与现代React的实践产生冲突，导致误报。
解决方案：调整ESLint配置
要解决这个ESLint报错，你需要修改项目的ESLint配置文件（通常是.eslintrc.js、.eslintrc.json或在package.json的eslintConfig字段中）。通过禁用或关闭eslint-plugin-react中的特定规则，可以告诉ESLint不再强制检查React的导入。
在你的ESLint配置文件的rules部分，添加或修改以下规则：
// .eslintrc.js 或 .eslintrc.json
{
"extends": [
// ... 其他继承的配置，例如 "react-app" 或 "airbnb"
],
"parserOptions": {
"ecmaVersion": 2020,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
// 关闭 ESLint 对 React 导入的检查
"react/jsx-uses-react": "off",
"react/react-in-jsx-scope": "off"
},
"settings": {
"react": {
"version": "detect" // 自动检测 React 版本
}
}
}配置说明：
- "react/jsx-uses-react": "off"：关闭此规则后，ESLint将不再检查JSX是否使用了React变量。
- "react/react-in-jsx-scope": "off"：关闭此规则后，ESLint将不再强制要求在使用JSX的文件中React必须在作用域内。
完成配置修改后，保存文件，并重新运行你的开发服务器或构建命令。ESLint将不再报告关于'React' is not defined的错误。
注意事项与最佳实践
尽管上述ESLint配置可以消除编译错误，但理解其背后的原理至关重要：
直接引用React对象： 如果你的代码中直接使用了React对象上的属性或方法，例如React.StrictMode、React.useState、React.useEffect、React.memo、React.useCallback等，你仍然需要显式地导入import React from 'react';。ESLint规则的关闭只是让ESLint不再强制检查JSX元素所需的React作用域，但对于实际的JavaScript运行时，React对象必须存在才能被引用。 在提供的示例代码中，root.render(
新旧JSX转换的兼容性： 大多数现代React项目，特别是使用Create React App (CRA) 4+或Next.js创建的项目，默认已经配置了Babel来使用新的JSX转换机制。在这种情况下，eslint-plugin-react通常也已更新或配置为与新机制兼容，例如通过使用"parserOptions": { "ecmaFeatures": { "jsx": true } }和"settings": { "react": { "version": "detect" } }，并可能自动禁用或调整相关规则。
何时禁用规则： 仅当你确认你的项目已经采用了新的JSX转换机制，并且你遇到的错误确实是ESLint对React导入的误报时，才应该禁用这些规则。如果你在使用旧版React或旧版Babel配置，禁用这些规则可能会隐藏真正的运行时错误。
总结
React 17引入的JSX新转换机制极大地优化了开发体验，减少了冗余的import React语句。然而，ESLint的旧规则可能与此新机制产生冲突，导致“'React' is not defined”的误报。通过在ESLint配置中关闭react/jsx-uses-react和react/react-in-jsx-scope规则，可以有效解决此编译错误。但请务必牢记，这仅是解决了ESLint的警告，如果代码中直接引用了React对象上的属性（如React.StrictMode），则import React from 'react';仍然是必需的，以确保程序在运行时能够找到并使用React对象。理解这些细微之处，将帮助你更好地管理和维护现代React项目。
