React 17+ JSX转换的变革
在react 17之前，当你在组件中使用jsx语法（例如
例如，旧版转换会将：
function App() {
return Hello, React!
;
}转换为：
function App() {
return React.createElement("h1", null, "Hello, React!");
}因此，React变量必须在作用域内。
从React 17开始，引入了新的JSX转换（New JSX Transform）。通过配置Babel，JSX不再被转换为React.createElement()调用，而是转换为从react/jsx-runtime中导入的特殊函数（如_jsx或_jsxs）。
例如，新版转换会将：
function App() {
return Hello, React!
;
}转换为（大致）：
import { jsx as _jsx } from "react/jsx-runtime";
function App() {
return _jsx("h1", { children: "Hello, React!" });
}这种改变的直接结果是，对于纯粹的JSX语法，你不再需要在文件顶部显式导入import React from 'react';，因为转换后的代码不再直接引用React变量。这使得代码更简洁，并有助于减少打包体积。
何时仍需导入React？
尽管新版JSX转换移除了对React的隐式依赖，但有一个关键点需要明确：当你直接引用React对象上的任何属性或方法时，React仍然必须被显式导入。
这包括但不限于：
- 使用React.useState、React.useEffect、React.useContext等Hooks。
- 使用React.memo、React.forwardRef等高阶组件或工具函数。
- 使用React.createContext、React.createRef等创建API。
- 使用React.StrictMode、React.Fragment等组件。
考虑以下用户提供的代码片段，它展示了典型的“React未定义”错误：
// import React from 'react'; // <-- 此行被注释掉
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
// <-- 问题根源：直接引用了 'React.StrictMode'
);在这个例子中，即使React版本是18.2.0，并且JSX本身（如
正确的做法是，如果你的代码中使用了React.StrictMode或任何其他React对象上的API，你就必须导入React。
import React from 'react'; // <-- 必须导入，因为使用了 React.StrictMode
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
);ESLint的介入与配置
ESLint是一个强大的代码质量工具，它通过配置规则来帮助开发者保持代码风格一致性并发现潜在错误。在React项目中，通常会使用eslint-plugin-react插件来检查React相关的最佳实践。
当React 17+引入新的JSX转换后，eslint-plugin-react中的某些规则可能不再适用，或者会产生误报。例如：
- react/react-in-jsx-scope: 这条规则强制要求在包含JSX的文件中导入React。在新版JSX转换下，对于纯JSX而言，这条规则变得不必要。
- react/jsx-uses-react: 这条规则确保React变量在JSX中被使用，以避免被ESLint标记为未使用变量。当React不再被JSX隐式使用时，这条规则也可能导致问题。
如果你在确认代码中没有直接使用React API（例如只包含
在你的ESLint配置文件（通常是.eslintrc.json或.eslintrc.js）中，添加或修改rules部分：
// .eslintrc.json
{
"extends": [
// ... 其他继承的配置，例如 "eslint:recommended", "plugin:react/recommended"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2020,
"sourceType": "module"
},
"settings": {
"react": {
// 确保 ESLint 知道你的 React 版本，以便正确应用规则
"version": "detect" // 或者具体的版本号，如 "18.2.0"
}
},
"rules": {
// 针对 React 17+ 新 JSX 转换的规则调整
"react/jsx-uses-react": "off",
"react/react-in-jsx-scope": "off"
}
}重要提示：
- react/jsx-uses-react: "off": 禁用此规则可以防止ESLint抱怨React变量未被使用，尤其是在你的文件中只包含JSX而没有直接React API调用时。
- react/react-in-jsx-scope: "off": 禁用此规则允许你在文件中不导入React但仍使用JSX，符合React 17+的新JSX转换行为。
然而，请务必注意： 禁用这些ESLint规则并不会改变React运行时对React变量的实际需求。如果你的代码中包含React.StrictMode、React.useState等直接的React API调用，那么无论ESLint规则如何设置，你都必须导入React。ESLint规则的调整只是为了适应新的JSX转换，避免不必要的警告或错误，而不是为了允许你跳过对React API的导入。
总结与最佳实践
-
理解JSX转换： React 17+的新JSX转换使得你在仅使用JSX（如或
）时，无需在文件顶部导入import React from 'react';。 - 区分JSX与React API： 当你直接使用React对象上的任何属性或方法（如React.StrictMode、React.useState、React.memo等）时，你必须导入import React from 'react';。这是导致本文中“React未定义”错误的核心原因。
- ESLint配置： 如果你的项目中已经升级到React 17+并配置了新的JSX转换，可以考虑在ESLint中关闭react/jsx-uses-react和react/react-in-jsx-scope规则，以避免误报。但请记住，这仅适用于纯JSX场景，不影响对React API的直接引用。
- 稳妥做法： 除非你非常确定你的文件中不包含任何直接的React API调用，否则保留import React from 'react';仍然是一个稳妥且清晰的选择。它能确保在任何情况下，React对象都是可用的，避免因遗漏导入而引发的运行时错误或编译错误。
通过理解React的JSX转换机制和ESLint的工作原理，开发者可以更有效地管理项目依赖，编写出更健壮、更符合现代React开发规范的代码。
