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-（而且我不确定如何解决此问题-已经尝试过this，并且也尝试过将其添加到package.json eslintConfig上，但仍然没有）

Answer 1

如果要渲染@foreach($order->orderLine as $key => $orderLine) <tr> <td>{{$orderLine->product->name}}</td> <tr> @endforeach，则需要React。

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

在该规则中，它还解释了为什么即使不使用文件，您也需要在文件中使用eslint（您认为您不使用它，但是如果渲染React，你知道的。）

使用JSX时，JSX会扩展为<a />。因此，React变量必须在范围内。如果您使用@jsx编译指示，则此规则将检查指定的变量而不是React变量。

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

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

3 个答案:

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

3 个答案:

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