如何设计更优雅的 React 组件? _React

在日常开发中，团队中每个人组织代码的方式不尽相同。下面我们就从代码结构的角度来看看如何组织一个更加优雅的 React 组件！1. 导入依赖项我们通常会在组件文件顶部导入组件所需的依赖项。对于不同类别的依赖项，建议对它们进行分组，这有助于帮助我们更好的理解组件。可以将导入的依赖分为四类：
// 外部依赖import React from "react";import { useRouter } from "next/router";// 内部依赖import { Button } from "../src/components/button";// 本地依赖import { Tag } from "./tag";import { Subscribe } from "./subscribe";// 样式import styles from "./article.module.scss";

外部依赖：外部依赖主要是第三方依赖，这些依赖定义在package.json文件中并从node_modules 中导入；
内部依赖：内部依赖主要是位于组件文件夹之外的可重用的组件或模块，这些导入都应该使用相对导入语法，以 ../ 开头。通常，大部分导入的依赖项都属于这一类。因此，如果需要的话，我们可以将这一类组件进一步分离，例如：UI组件、数据相关的导入、services等；
本地依赖：本地依赖主要是与组件位于同一文件夹中的依赖项或子组件。这些依赖项的所有导入路径应以./开头。主要是比较大的组件会包含本地依赖项；
样式：最后这一部分大多数情况下只包含一个导入——样式文件。如果导入了多个样式表，就需要考虑样式的拆分是否有问题。

对导入依赖项进行手动分组可能比较麻烦，Prettier 可以帮助我们自动格式化代码。可以使用 prettier-plugin-sort-imports 插件来自动格式化依赖项导入。需要在项目根目录创建prettier.config.js配置文件，并在里面配置规则：

module.exports = {  // 其他 Prettier 配置  importOrder: [    // 默认情况下 ， 首先会放置外部依赖项    // 内部依赖    "^../(.*)",    // 本地依赖项，样式除外    "^./((?!scss).)*$",    // 其他    "^./(.*)",  ],  importOrderSeparation: true,};

下面是该插件官方给出的例子，输入如下：

import React, {    FC,    useEffect,    useRef,    ChangeEvent,    KeyboardEvent,} from 'react';import { logger } from '@core/logger';import { reduce, debounce } from 'lodash';import { Message } from '../Message';import { createServer } from '@server/node';import { Alert } from '@ui/Alert';import { repeat, filter, add } from '../utils';import { initializeApp } from '@core/app';import { Popup } from '@ui/Popup';import { createConnection } from '@server/database';

格式化之后的输出如下：

import { debounce, reduce } from 'lodash';import React, {    ChangeEvent,    FC,    KeyboardEvent,    useEffect,    useRef,} from 'react';import { createConnection } from '@server/database';import { createServer } from '@server/node';import { initializeApp } from '@core/app';import { logger } from '@core/logger';import { Alert } from '@ui/Alert';import { Popup } from '@ui/Popup';import { Message } from '../Message';import { add, filter, repeat } from '../utils';

prettier-plugin-sort-imports：https://Github.com/trivago/prettier-plugin-sort-imports
2. 静态定义在导入依赖项的下方，通常会放那些使用 TypeScript 或 Flow 等静态类型检查器定义的文件级常量和类型定义。