Javascript React导入语句的标准方式

我想知道在react中是否有编写导入语句的标准方法？例如，我有：

import React, { useState, FormEvent } from 'react';
import Avatar from '@material-ui/core/Avatar';
import {Grid, Checkbox, TextField, FormControlLabel, CssBaseline} from '@material-ui/core';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import { LOGIN } from '../../graphql/mutations/login';
import { schema } from '../../helpers/validations/login';
import { Redirect } from 'react-router-dom';
import { useMutation } from '@apollo/react-hooks';
import StatusMessage from '../../helpers/statusMessages/loginMessage';
import Copyright from '../../components/copyright/copyright';
import CustomButton from '../../components/button/button';
import { ExecutionResult } from 'graphql';
import { Wrapper, StyledLink, Form, StyledTypography, StyledBox, StyledContainer} from './styles';
import { store } from '../../store';
import { useDispatch } from 'react-redux';
import SignInResponse from '../../graphql/responses/login';
import { useFormik } from 'formik';

关于是否应该从

“@material ui/core”导入所有内容，是否有任何规则单独还是一起？除了减少行数之外，它还有什么不同吗

在react自己的库/内容之后，是否应该导入其他本地文件/函数，是否有任何规则？还有其他规则/建议吗？
不要担心有多少行用于导入模块。我认为最好的做法是先从其他供应商导入模块，然后再导入本地模块。我认为有一些需要强制执行

除此之外，我要说的是只导入所需的内容：

import Avatar from '@material-ui/core/Avatar';

比

import * as MaterialUI from '@material-ui/core';

没有标准的方法，只有个人喜好

就个人而言，我更喜欢将来自公共源的导入分组，就像您在
“@material ui/core”中所做的那样。您还可以使用组件、助手和类似的本地模块来实现这一点。另外，我更喜欢先导入第三方模块，然后导入本地模块

这一切都是为了找到一些“合乎逻辑”且易于扫描的东西。
有一些已知的标准，其中大多数是意见，而不是必须做的事情。我建议您看看，因为它有一个关于进口的广泛标准/意见列表：


确保所有导入都显示在其他语句之前（[
first
]）
确保所有导出都出现在其他语句之后（[
导出最后一次
]）
报告在多个位置重复导入同一模块（[
无重复项
]）
禁止命名空间（又称“通配符”
*
）导入（[
无命名空间
]））
确保在导入路径中一致使用文件扩展名（[
extensions
]）
在模块导入顺序（[
order
]）中强制执行约定
在导入语句后强制换行（[
newline after import
]）
如果模块导出单个名称，则首选默认导出（[
首选默认导出
]）
限制模块可以具有的最大依赖项数（[
max dependencies
]）
禁止未分配的导入（[
无未分配的导入
]）
禁止命名默认导出（[
无命名默认值
]））
禁止默认导出（[
无默认导出
]））
禁止命名导出（[
无命名导出
]））
禁止匿名值作为默认导出（[
无匿名默认导出
]）
希望在单个导出声明中将命名的导出分组在一起（[
group exports
]）
为动态导入强制使用webpackChunkName开头的注释（[
动态导入chunkname
]）

关于订单，有哪些内容：

节点“内置”模块
“外部”模块
“内部”模块
“父”目录中的模块
来自同一目录或同级目录的“同级”模块
当前目录的“索引”
不，没有关于如何导入东西的标准。但它不仅可以导入所有内容，而且可以导入您需要的内容，它还可以帮助Web打包未使用的代码。因此，我建议：

import { Avatar } from '@material-ui/core';

我喜欢做的另一件事是将本地导入与包导入分开，这使代码更具可读性：

import React, { useState, FormEvent } from 'react';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import { ExecutionResult } from 'graphql';
import { Avatar, Grid, Checkbox, TextField, FormControlLabel, CssBaseline } from '@material-ui/core';
import { Redirect } from 'react-router-dom';
import { useMutation } from '@apollo/react-hooks';
import { useDispatch } from 'react-redux';
import { useFormik } from 'formik';

import { LOGIN } from '../../graphql/mutations/login';
import { schema } from '../../helpers/validations/login';
import { store } from '../../store';
import { Wrapper, StyledLink, Form, StyledTypography, StyledBox, StyledContainer } from './styles';
import StatusMessage from '../../helpers/statusMessages/loginMessage';
import Copyright from '../../components/copyright/copyright';
import CustomButton from '../../components/button/button';
import SignInResponse from '../../graphql/responses/login';