创建挂钩时，您真的需要导入“反应”吗？（反响）

Question

我看到了https://reactjs.org/docs/hooks-custom.html总是执行的示例：

import React, { useState, useEffect } from 'react';

但是文件中React并没有真正使用它，我们真的需要它吗？为什么？

我问这个问题是因为我遇到了一个有关eslint的问题：

'React' is defined but never used no-unused-vars-我在创建反应的应用程序内3.0.1这eslint已经包括- （我不知道如何解决这个问题-已经尝试过这个，也尝试添加它的package.json eslintConfig，但仍然没有）

Answer 1

React 17 有一个新的 JSX 转换，不再需要导入（也向后移植到新版本 16.14.0、15.7.0 和 0.14.10）。您可以在这里阅读更多相关信息： https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

// no import needed
const App = () => <div>hello!</div>

但是，您仍然需要导入才能使用钩子：

import { useState } from 'react'

const App = () => {
  const [stuff, setStuff] = useState('stuff')

  return <div>{stuff}</div>
}

该文档还链接到一个脚本，用于自动更新项目中的所有文件以修复所有导入。就我个人而言，我习惯于只使用表单React.useWhatever，因此我从来不需要弄乱 import 语句，但使用命名导入可能会减少最终包的大小。

文档说命名导入现在是推荐的方式，所以不推荐这样做，但如果你真的想保留导入React，你可以设置下面的 eslint 规则来阻止它抱怨。请注意，这将继续在所有文件中需要它。

"react/jsx-uses-react": "error"

Answer 2

React如果要渲染，则将需要JSX。

为了避免该eslint警告，您应该使用eslint-plugin-react中的react-in-jsx-scope规则。

在该规则中，它还说明了React即使不使用文件，您也需要在文件中添加内容的原因（您认为您不使用它，但是如果您使用，则可以使用它JSX）。

使用JSX时，<a />扩展为React.createElement("a")。因此，React变量必须在范围内。如果您使用@jsx杂注，则此规则将检查指定的变量而不是React变量。