问题
I was wondering if there's a standard way to write import statements in react? For example, I have this:
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';
Are there any rules about whether I should import everything from '@material-ui/core';separately or together? Does it make a difference apart from reducing the number of lines?
Is there any rule about if I should import other local files/functions after react's own libraries/content? Any other rules/suggestions?
回答1:
There are known standard, most of them are opinions rather than must-dos. I would recommend that you take a look at eslint-plugin-import as it has a extensive list of standards/opinions regarding imports:
- Ensure all imports appear before other statements ([
first])- Ensure all exports appear after other statements ([
exports-last])- Report repeated import of the same module in multiple places ([
no-duplicates])- Forbid namespace (a.k.a. "wildcard"
*) imports ([no-namespace])- Ensure consistent use of file extension within the import path ([
extensions])- Enforce a convention in module import order ([
order])- Enforce a newline after import statements ([
newline-after-import])- Prefer a default export if module exports a single name ([
prefer-default-export])- Limit the maximum number of dependencies a module can have ([
max-dependencies])- Forbid unassigned imports ([
no-unassigned-import])- Forbid named default exports ([
no-named-default])- Forbid default exports ([
no-default-export])- Forbid named exports ([
no-named-export])- Forbid anonymous values as default exports ([
no-anonymous-default-export])- Prefer named exports to be grouped together in a single export declaration ([
group-exports])- Enforce a leading comment with the webpackChunkName for dynamic imports ([
dynamic-import-chunkname])
Regarding the order, what's recommended is:
- node "builtin" modules
- "external" modules
- "internal" modules
- modules from a "parent" directory
- "sibling" modules from the same or a sibling's directory
- "index" of the current directory
回答2:
No, there is no standard on how you import something. But instead of import everything just import what you need, it'll also help webpack in tree-shaking unused code. So I would suggest this:
import { Avatar } from '@material-ui/core';
One other I like to do is separate my local imports from the packages imports, it makes the code more readable:
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';
回答3:
There is no standard way, just personal preferences.
Personally, I prefer to group imports from a common source, like you did in '@material-ui/core';. You could also do that with components, helpers, and similar local modules. Also, I prefer to import first third-party modules and then local modules.
It's all about finding something "logical" and easy to scan to you.
回答4:
Don't worry about how many lines were used to import modules. I think it's a best practice to first import modules from other vendors, then import local modules. There are some lint rules to enforce that I think.
Other than that, I'd say only import what is needed:
import Avatar from '@material-ui/core/Avatar';
is better than
import * as MaterialUI from '@material-ui/core';
来源：https://stackoverflow.com/questions/61208381/standard-way-for-react-import-statements