创建钩子时真的需要导入'React'吗？(反应钩)

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-我正在使用create -react -app 3.0.1，其中已经包含了eslint-(而且我不确定如何解决此问题 - 已经尝试了此操作，并且也尝试在package.json eslintConfig中添加它仍然什么都没有(

Answer 1

如果您渲染JSX。

，则需要React

要避免使用eslint警告，您应该使用Eslint-Plugin-react的JSX-SCOPE-SCOPE规则。

在该规则中，它也解释了为什么您在文件中需要React，即使您不使用它(您认为不使用它，但是如果您渲染JSX，则可以使用(。

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

Answer 2

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表格，所以我永远不需要弄乱导入语句，但是使用命名导入可以减少最终捆绑包大小。

文档说命名导入现在是推荐的方式，因此不建议这样做，但是如果您确实想保持React导入，则可以设置以下ESLINT规则以阻止其投诉。请注意，这将继续在所有文件中需要它。

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

Answer 3

来自React官方文档：

从根本上讲，JSX仅提供句法糖 React.createElement(component, props, ...children)功能。JSX 代码：

<MyButton color="blue" shadowSize={2}>Click Me</MyButton>

编译 进入：

React.createElement(MyButton, {color: 'blue', shadowSize: 2},'Click Me' )

如果 没有孩子。所以：

<div className="sidebar" /> 

编译为：

React.createElement('div', {className: 'sidebar'}, null )

https://reactjs.org/docs/jsx-in-depth.html

edit 钩子也位于React名称空间下，react.usestate ...等等