深入理解React 17+ JSX转换与ESLint：为何仍需导入React？

React 17+ JSX转换的变革

在react 17之前，当你在组件中使用jsx语法（例如<mycomponent />或<div>hello</div>）时，babel会将这些jsx代码转换成对react.createelement()的调用。这意味着，即使你的组件中没有直接使用react.usestate或react.useeffect等api，为了让jsx能够被正确转换和执行，你仍然需要在每个包含jsx的文件顶部显式地导入import react from 'react';。

例如，旧版转换会将：

function App() {
  return <h1>Hello, React!</h1>;
}

转换为：

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 <h1>Hello, React!</h1>;
}

转换为（大致）：

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未定义”错误：

AI Sofiya

一款AI驱动的多功能工具

109

查看详情

// 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.StrictMode'
    <App />
  </React.StrictMode>
);

在这个例子中，即使React版本是18.2.0，并且JSX本身（如<App />）不再需要import React，但root.render方法内部使用了<React.StrictMode>。React.StrictMode是一个直接从React对象上获取的组件。当你注释掉import React from 'react';时，React变量在当前作用域中是未定义的，因此会导致React' is not defined的编译错误。

正确的做法是，如果你的代码中使用了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(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

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（例如只包含<App />这样的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的导入。

总结与最佳实践

1. 理解JSX转换： React 17+的新JSX转换使得你在仅使用JSX（如<div />或<Component />）时，无需在文件顶部导入import React from 'react';。
2. 区分JSX与React API： 当你直接使用React对象上的任何属性或方法（如React.StrictMode、React.useState、React.memo等）时，你必须导入import React from 'react';。这是导致本文中“React未定义”错误的核心原因。
3. ESLint配置： 如果你的项目中已经升级到React 17+并配置了新的JSX转换，可以考虑在ESLint中关闭react/jsx-uses-react和react/react-in-jsx-scope规则，以避免误报。但请记住，这仅适用于纯JSX场景，不影响对React API的直接引用。
4. 稳妥做法： 除非你非常确定你的文件中不包含任何直接的React API调用，否则保留import React from 'react';仍然是一个稳妥且清晰的选择。它能确保在任何情况下，React对象都是可用的，避免因遗漏导入而引发的运行时错误或编译错误。

通过理解React的JSX转换机制和ESLint的工作原理，开发者可以更有效地管理项目依赖，编写出更健壮、更符合现代React开发规范的代码。

以上就是深入理解React 17+ JSX转换与ESLint：为何仍需导入React？的详细内容，更多请关注php中文网其它相关文章！