本文旨在阐明React 17及更高版本中JSX转换机制的优化，解释为何不再强制为JSX导入React。同时，将深入探讨在直接使用如React.StrictMode等React API时，仍需显式导入React的原因。文章还将提供针对ESLint配置的详细指导，帮助开发者理解并解决“React未定义”的编译错误，确保代码在现代React环境中平稳运行。
React 17+ JSX转换的变革
在react 17之前，当你在组件中使用jsx语法（例如或
）时，babel会将这些jsx代码转换成对react.createelement()的调用。这意味着，即使你的组件中没有直接使用react.usestate或react.useeffect等api，为了让jsx能够被正确转换和执行，你仍然需要在每个包含jsx的文件顶部显式地导入import react from ‘react’;。
例如，旧版转换会将：
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本身（如）不再需要import React，但root.render方法内部使用了。React.StrictMode是一个直接从React对象上获取的组件。当你注释掉import React from ‘react’;时，React变量在当前作用域中是未定义的，因此会导致React’ is not defined的编译错误。
正确的做法是，如果你的代码中使用了React.StrictMode或任何其他React对象上的API，你就必须导入React。
import React from 'react'; // <-- 必须导入，因为使用了 React.StrictModeimport 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（例如只包含这样的JSX，而不包含React.useState或React.StrictMode），但ESLint仍然报错，那么你可以考虑调整ESLint配置来关闭这些规则。
在你的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开发规范的代码。
以上就是深入理解React 17+ JSX转换与ESLint：为何仍需导入React？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1511506.html
微信扫一扫 
支付宝扫一扫 
