React导入语句的标准方式

Question

我想知道在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自己的库/内容之后，是否应该导入其他本地文件/函数，有什么规则吗？还有其他规则/建议吗？

Answer 1

有一些已知的标准，其中大多数是意见，而不是必须做的事情。我建议你看看eslint插件导入，因为它有一个关于导入的标准/意见的广泛列表：

• 确保所有导入都出现在其他语句之前([first](
• 确保所有导出都出现在其他语句之后([exports-last](
• 报告同一模块在多个位置的重复导入([no-duplicates](
• 禁止命名空间(也称为"通配符"*(导入([no-namespace](
• 确保在导入路径中一致使用文件扩展名([extensions](
• 按模块导入顺序强制执行约定([order](
• 在导入语句后强制换行([newline-after-import](
• 如果模块导出单个名称([prefer-default-export](，则首选默认导出
• 限制模块可以具有的最大依赖项数([max-dependencies](
• 禁止未分配的进口([no-unassigned-import](
• 禁止命名默认导出([no-named-default](
• 禁止默认导出([no-default-export](
• 禁止命名导出([no-named-export](
• 禁止匿名值作为默认导出([no-anonymous-default-export](
• 首选将命名导出分组在单个导出声明中([group-exports](
• 为动态导入强制使用webpackChunkName的前导注释([dynamic-import-chunkname](

关于订单，建议使用：

1. 节点"内置"模块
2. "外部"模块
3. "内部"模块
4. 来自"父"目录的模块
5. 来自同一目录或同级目录的"同级"模块
6. 当前目录的"索引">

Answer 2

没有标准的方式，只有个人偏好。

就我个人而言，我更喜欢从一个公共来源对导入进行分组，就像您在'@material-ui/core';中所做的那样。您也可以使用组件、辅助程序和类似的本地模块来实现这一点。此外，我更喜欢先导入第三方模块，然后导入本地模块。

这一切都是为了找到一些"合乎逻辑"且易于扫描的东西。

Answer 3

不用担心有多少行用于导入模块。我认为最好的做法是先从其他供应商导入模块，然后再导入本地模块。我认为有一些棉绒规则需要执行。

除此之外，我认为只进口需要的东西：

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

比好

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

Answer 4

不，没有关于如何导入内容的标准。但是，它不仅可以导入所有需要的东西，还可以帮助webpack在树中摇动未使用的代码。所以我建议：

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';