您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

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

时间:2023-12-21 12:38:08  来源:微信公众号  作者:前端充电宝
在日常开发中,团队中每个人组织代码的方式不尽相同。下面我们就从代码结构的角度来看看如何组织一个更加优雅的 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 等静态类型检查器定义的文件级常量和类型定义。

(1)常量定义

组件中的所有 magic 值,例如字符串或者数字,都应该放在文件的顶部,导入依赖项的下方。由于这些都是静态常量,这意味着它们的值不会改变。因此将它们放在组件中是没有意义的,因为放在组件中的话,它们会在每次重新渲染组件时重新创建。

const MAX_READING_TIME = 10;
const META_TITLE = "Hello World";

对于更复杂的静态数据结构,可以将其提取到一个单独的文件中,以保持组件代码整洁。

(2)类型定义

下面是使用 TypeScript 声明的组件 props 的类型:

interface Props {
  id: number;
  name: string;
  title: string;
  meta: Metadata;
}

如果这个 props 的类型不需要导出,可以使用 Props 作为接口名称,这样可以帮助我们立即识别组件 props 的类型定义,并将其与其他类型区分开。

只有当这个 Props 类型需要在多个组件中使用时,才需要添加组件名称,例如ButtonProps,因为它在导入另一个组件时,不应该与另一个组件的Props类型冲突。

3. 组件定义

定义函数组件的方式有两种:函数声明箭头函数, 推荐使用函数声明的形式,因为这就是语法声明的内容:函数。官方文档的示例中也使用了这种方法:

function Article(props: Props) {
  /**/
}

只会在必须使用 forwardRef 时才使用箭头函数:

const Article = React.forwardRef<htmlArticleElement, Props>(
  (props, ref) => {
    /**/
  }
);

通常会在组件最后默认导出组件:

export default Article;

4. 变量声明

接下来,我们就需要在组件里面进行变量的声明。注意,即使使用 const 声明,这里也称为变量,因为它们的值通常会在不同的渲染之间发生变化,只有在执行单个渲染过程时是恒定的。

const { id, name, title } = props;
const router = useRouter();
const initials = getInitials(name);

这里通常包含在组件级别使用的所有变量,使用 const 或 let 定义,具体取决于它们在渲染期间是否更改其值:

  • 解构数据:通常来自 props、数据 stores 或组件的 state
  • Hooks:自定义hooks、框架内置 Hooks,例如 useStateuseReduceruseRefuseCallback 或 useMemo
  • 在整个组件中使用的已处理数据,由函数计算得出;

一些较大的组件可能需要在组件中声明很多变量。这种情况下,建议根据它们的初始化方法或者用途对它们进行分组:

// 框架 hooks
const router = useRouter();
// 自定义 hooks
const user = useLoggedUser();
const theme = useTheme();

// 从 props 中解构的数据
const { id, title, meta, content, onSubscribe, tags } = props;
const { image, author, date } = meta;

// 组件状态
const [emAIl, setEmail] = React.useState("");
const [showMenu, toggleMenu] = React.useState(false);
const [activeTag, dispatch] = React.useReducer(reducer, tags);

// 记忆数据
const subscribe = React.useCallback(onSubscribe, [id]);
const summary = React.useMemo(() => getSummary(content), [content]);

// refs
const sideMenuRef = useRef<HTMLDivElement>(null);
const subscribeRef = useRef<HTMLButtonElement>(null);

// 计算数据
const initials = getInitials(author);
const formattedDate = getDate(date);

变量分组的方法在不同组件之间可能会存在很大的差异,它取决于变量的数量和类型。关键是要将相关变量放在一起,在不同组之间添加一个空行来提高代码的可读性。

注:上面代码中的注释仅用于标注分组类型,在实际项目中不会写这些注释。

5. Effects

Effects 部分通常会写在变量声明之后,它们可能是React中最复杂的构造,但从语法的角度来看它们非常简单:

useEffect(() => {
  setLogo(theme === "dark" ? "white" : "black");
}, [theme]);

任何包含在effect之内但是在其外部定义的变量,都应该包含在依赖项的数组中。

除此之外,还应该使用return来清理副作用:

useEffect(() => {
  function onScroll() {
    /*...*/
  }

  window.addEventListener("scroll", onScroll);
  return () => window.removeEventListener("scroll", onScroll);
}, []);

6. 渲染内容

组件的核心就是它的内容,React 组件的内容使用 JSX 语法定义并在浏览器中呈现为 HTML。所以,推荐将函数组件的 return 语句尽可能靠近文件的顶部。其他一切都只是细节,它们应该放在文件较下的位置。

function Article(props: Props) {
  // 变量声明
  // effects

  // ❌ 自定义的函数不建议放在 return 部分的前面
  function getInitials() {
    /*...*/
  }

  return /* content */;
}

export default Article;
function Article(props: Props) {
  // 变量声明
  // effects

  return /* content */;

  // ✅ 自定义的函数建议放在 return 部分的后面
  function getInitials() {
    /*...*/
  }
}

export default Article;

难道return不应该放在函数的最后吗?其实不然,对于常规函数,肯定是要将return放在最后的。然而,React组件并不是简单的函数,它们通常包含具有各种用途的嵌套函数,例如事件处理程序。最后的return语句以及前面的一堆其他函数,实际上阻碍了代码的阅读,使得很难找到组件渲染的内容:

  • 很难搜索该return语句,因为可能有来自其他嵌套函数的多个 return 语句;
  • 在文件末尾滚动查找 return 语句并不能很容易找到它,因为返回的 JSX 块可能非常大。

当然,可以根据个人喜好来决定函数定义的位置。如果将函数放在return的下方,那么如果想要使用箭头函数来自定义函数,那就只能使用var来定义,因为letconst不存在变量提升,不能在定义的箭头函数之前使用它。

7. 部分渲染

在处理大型 JSX 代码时,将某些内容块提取为单独的函数来渲染组件的一部分是很有帮助的,类似于将大型函数分解为多个较小的函数。

function Article(props: Props) {
  // ...

  return (
    <article>
      <h1>{props.title}</h1>
      {renderBody()}
      {renderFooter()}
    </article>
  );

  function renderBody() {
    return /* article body JSX */;
  }

  function renderFooter() {
    return /* article footer JSX */;
  }
}

export default Article;
  • 可以给这些拆分出来的函数前面加上render前缀,以将它们与其他不返回 JSX 的函数区分开;
  • 可以将这些函数放在return语句之后,以便将与内容相关的所有内容组合在一起;
  • 无需向这些函数传递任何参数,因为它们可以访问props和组件定义的所有变量;

那为什么不将它们提取为组件呢?关于部分渲染函数其实是存在争议的,一种说法是要避免从组件内定义的任何函数中返回 JSX,另一种说法是将这些函数提取为单独的组件。

function Article(props: Props) {
  // ...

  return (
    <article>
      <h1>{props.title}</h1>
      <ArticleBody {...props} />
      <ArticleFooter {...props} />
    </article>
  );
}

export default Article;

function ArticleBody(props: Props) {}

function ArticleFooter(props: Props) {}

在这种情况下,就必须手动将子组件所需的局部变量通过props传递。在使用 TypeScript 时,我们还需要为组件的props定义额外的类型。最终代码就会变得臃肿,这就会导致代码变得难以阅读和理解:

function Article(props: Props) {
  const [status, setStatus] = useState("");

  return (
    <article>
      <h1>{props.title}</h1>
      <ArticleBody {...props} status={status} />
      <ArticleFooter {...props} setStatus={setStatus} />
    </article>
  );
}

export default Article;

interface BodyProps extends Props {
  status: string;
}
interface FooterProps extends Props {
  setStatus: Dispatch<SetStateAction<string>>;
}
function ArticleBody(props: BodyProps) {}
function ArticleFooter(props: FooterProps) {}

这些单独的组件不可以重复使用,它们仅被它们所属的组件使用,单独使用它们是没有意义的。因此,这种情况下,还是建议将部分 JSX 提取成渲染函数。

8. 局部函数

React 组件通常会包含事件处理函数,它们是嵌套函数,通常会更改组件的内部状态或调度操作以更新组件的状态。

另一类嵌套函数就是闭包,它们是读取组件状态或props的不纯函数,用于构建组件逻辑。

function Article(props: Props) {
  const [email, setEmail] = useState("");

  return (
    <article>
      {/* ... */}

      <form onSubmit={subscribe}>
        <input type="email" value={email} onChange={setEmail} />
        <button type="submit">Subscribe</button>
      </form>
    </article>
  );

  // 事件处理
  function subscribe(): void {
    if (canSubscribe()) {
      // 发送订阅请求
    }
  }

  function canSubscribe(): boolean {
    // 基于 props 和 state 的逻辑
  }
}

export default Article;
  • 通常会使用函数声明而不是函数表达式来声明函数,因为函数是存在提升的,这允许我们在使用它们之后定义它们。这样就可以将它们放在组件函数的末尾,return语句之后;
  • 如果一个函数中嵌套了另外一个函数,那么建议将调用者放在被调用者之前;
  • 将这些函数按使用顺序排列。

9. 纯函数

最后就是纯函数,我们可以将它们放在组件文件的底部,在 React 组件之外:

function Article(props: Props) {
  // ...

  // ❌ 纯函数不应该放在组件之中
  function getInitials(str: string) {}
}

export default Article;
function Article(props: Props) {
  // ...
}

// ✅ 纯函数应该放在组件之外
function getInitials(str: string) {}

export default Article;

首先,纯函数没有依赖项,如 props、状态或局部变量,它们接收所有依赖项作为参数。这意味着可以将它们放在任何地方。但是,将它们放在组件之外还有其他原因:

  • 它向任何阅读代码的开发人员发出信号,表示它们是纯粹的;
  • 它们很容易测试,只需要将要测试的函数导出并导入到测试文件中即可;
  • 如果需要提取和重用它们,可以很容易将它们很移动到其他文件。

完整示例

下面是一个完整的典型 React 组件示例。由于重点是文件的结构,因此省略了实现细节。

// 1️⃣ 导入依赖项
import React from "react";
import { Tag } from "./tag";
import styles from "./article.module.scss";

// 2️⃣ 静态定义
const MAX_READING_TIME = 10;

interface Props {
  id: number;
  name: string;
  title: string;
  meta: Metadata;
}

// 3️⃣ 组件定义
function Article(props: Props) {

  // 4️⃣ 变量定义
  const router = useRouter();
  const theme = useTheme();

  const { id, title, content, onSubscribe } = props;
  const { image, author, date } = meta;

  const [email, setEmail] = React.useState("");
  const [showMenu, toggleMenu] = React.useState(false);

  const summary = React.useMemo(() => getSummary(content), [content]);

  const initials = getInitials(author);
  const formattedDate = getDate(date);

  // 5️⃣ effects
  React.useEffect(() => {
    // ...
  }, []);

  // 6️⃣ 渲染内容
  return (
    <article>
      <h1>{title}</h1>

      {renderBody()}

      <form onSubmit={subscribe}>
        {renderSubscribe()}
      </form>
    </article>
  );

  // 7️⃣ 部分渲染
  function renderBody() { /*...*/ }

  function renderSubscribe() { /*...*/ }

  // 8️⃣ 局部函数
  function subscribe() { /*...*/ }
}

// 9️⃣ 纯函数
function getInitials(str: string) { /*...*/ }

export default Article;


Tags:React   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
从0实现React18
要从零开始实现React 18,需要理解React的核心概念和一些主要特性。以下是一个简要的步骤:1. 了解React的基本概念: 组件: React应用的基本构建块。组件可以是函数组件(Functional...【详细内容】
2024-01-22  Search: React  点击:(45)  评论:(0)  加入收藏
React的核心概念
React是一个开源JavaScript库,用于构建用户界面。它由Facebook开发并维护,已成为构建Web和移动应用程序的流行选择。React的主要特点是组件化架构,它使开发人员能够将应用程序...【详细内容】
2024-01-09  Search: React  点击:(98)  评论:(0)  加入收藏
浅析五种 React 组件设计模式
作为一名 React 开发者,你可能会面临下面几个问题: 如何构建一个高复用度性的组件,使其适应不同的业务场景? 如何构建一个具有简单 API的组件,使其易于使用? 如何构建一个在 UI 和...【详细内容】
2024-01-09  Search: React  点击:(79)  评论:(0)  加入收藏
React与Vue性能对比:两大前端框架的性能
React和Vue是当今最流行的两个前端框架,它们在性能方面都有着出色的表现。React的加载速度:初次加载:由于React使用了虚拟DOM(Virtual DOM)技术,它可以通过比较虚拟DOM树与实际DOM...【详细内容】
2024-01-05  Search: React  点击:(106)  评论:(0)  加入收藏
Vanilla Design,新一代 React UI 库
这几天做需求,一堆 UI 库实在是不知道选哪个,各种角色的同事争论不休;还总有新轮子冒出来,所以我来插一脚,并借此来领悟写代码的哲学:The best way to write secure and reliable...【详细内容】
2024-01-04  Search: React  点击:(85)  评论:(0)  加入收藏
vue3中 ref和 reactive的区别 ?
最近有朋友在面试过程中经常被问到这么一个问题,vue3 中的ref 和 reactive的区别在哪里,为什么 要定义两个API 一个 api不能实现 响应式更新吗??带着这个疑问 ,我们 接下来进行逐...【详细内容】
2024-01-03  Search: React  点击:(36)  评论:(0)  加入收藏
React18 与 Vue3 全方面对比
1. 编程风格 & 视图风格1.1 编程风格 React 语法少、难度大;Vue 语法多,难度小例如指令:Vue<input v-model="username"/><ul> <li v-for="(item,index) in list" :key="inde...【详细内容】
2024-01-03  Search: React  点击:(72)  评论:(0)  加入收藏
使用React微前端的完整指南
译者 | 李睿审校 | 重楼事实表明,前端开发伴随着许多挑战。而寻找简化开发过程和加快任务执行的方法是每个开发团队的目标。在开发大型复杂产品时,让开发团队成员在任务上进行...【详细内容】
2023-12-26  Search: React  点击:(82)  评论:(0)  加入收藏
什么是React的错误边界(Error Boundary)?
React的错误边界(ErrorBoundary)是一种React组件,用于捕获并处理其子组件树中任何位置的JavaScript错误。它允许开发人员在应用程序中定义错误边界,以便在发生错误时显示备用UI...【详细内容】
2023-12-21  Search: React  点击:(124)  评论:(0)  加入收藏
如何设计更优雅的 React 组件?
在日常开发中,团队中每个人组织代码的方式不尽相同。下面我们就从代码结构的角度来看看如何组织一个更加优雅的 React 组件!1. 导入依赖项我们通常会在组件文件顶部导入组件所...【详细内容】
2023-12-21  Search: React  点击:(100)  评论:(0)  加入收藏
▌简易百科推荐
即将过时的 5 种软件开发技能!
作者 | Eran Yahav编译 | 言征出品 | 51CTO技术栈(微信号:blog51cto) 时至今日,AI编码工具已经进化到足够强大了吗?这未必好回答,但从2023 年 Stack Overflow 上的调查数据来看,44%...【详细内容】
2024-04-03    51CTO  Tags:软件开发   点击:(5)  评论:(0)  加入收藏
跳转链接代码怎么写?
在网页开发中,跳转链接是一项常见的功能。然而,对于非技术人员来说,编写跳转链接代码可能会显得有些困难。不用担心!我们可以借助外链平台来简化操作,即使没有编程经验,也能轻松实...【详细内容】
2024-03-27  蓝色天纪    Tags:跳转链接   点击:(12)  评论:(0)  加入收藏
中台亡了,问题到底出在哪里?
曾几何时,中台一度被当做“变革灵药”,嫁接在“前台作战单元”和“后台资源部门”之间,实现企业各业务线的“打通”和全域业务能力集成,提高开发和服务效率。但在中台如火如荼之...【详细内容】
2024-03-27  dbaplus社群    Tags:中台   点击:(8)  评论:(0)  加入收藏
员工写了个比删库更可怕的Bug!
想必大家都听说过删库跑路吧,我之前一直把它当一个段子来看。可万万没想到,就在昨天,我们公司的某位员工,竟然写了一个比删库更可怕的 Bug!给大家分享一下(不是公开处刑),希望朋友们...【详细内容】
2024-03-26  dbaplus社群    Tags:Bug   点击:(5)  评论:(0)  加入收藏
我们一起聊聊什么是正向代理和反向代理
从字面意思上看,代理就是代替处理的意思,一个对象有能力代替另一个对象处理某一件事。代理,这个词在我们的日常生活中也不陌生,比如在购物、旅游等场景中,我们经常会委托别人代替...【详细内容】
2024-03-26  萤火架构  微信公众号  Tags:正向代理   点击:(10)  评论:(0)  加入收藏
看一遍就理解:IO模型详解
前言大家好,我是程序员田螺。今天我们一起来学习IO模型。在本文开始前呢,先问问大家几个问题哈~什么是IO呢?什么是阻塞非阻塞IO?什么是同步异步IO?什么是IO多路复用?select/epoll...【详细内容】
2024-03-26  捡田螺的小男孩  微信公众号  Tags:IO模型   点击:(8)  评论:(0)  加入收藏
为什么都说 HashMap 是线程不安全的?
做Java开发的人,应该都用过 HashMap 这种集合。今天就和大家来聊聊,为什么 HashMap 是线程不安全的。1.HashMap 数据结构简单来说,HashMap 基于哈希表实现。它使用键的哈希码来...【详细内容】
2024-03-22  Java技术指北  微信公众号  Tags:HashMap   点击:(11)  评论:(0)  加入收藏
如何从头开始编写LoRA代码,这有一份教程
选自 lightning.ai作者:Sebastian Raschka机器之心编译编辑:陈萍作者表示:在各种有效的 LLM 微调方法中,LoRA 仍然是他的首选。LoRA(Low-Rank Adaptation)作为一种用于微调 LLM(大...【详细内容】
2024-03-21  机器之心Pro    Tags:LoRA   点击:(12)  评论:(0)  加入收藏
这样搭建日志中心,传统的ELK就扔了吧!
最近客户有个新需求,就是想查看网站的访问情况。由于网站没有做google的统计和百度的统计,所以访问情况,只能通过日志查看,通过脚本的形式给客户导出也不太实际,给客户写个简单的...【详细内容】
2024-03-20  dbaplus社群    Tags:日志   点击:(4)  评论:(0)  加入收藏
Kubernetes 究竟有没有 LTS?
从一个有趣的问题引出很多人都在关注的 Kubernetes LTS 的问题。有趣的问题2019 年,一个名为 apiserver LoopbackClient Server cert expired after 1 year[1] 的 issue 中提...【详细内容】
2024-03-15  云原生散修  微信公众号  Tags:Kubernetes   点击:(5)  评论:(0)  加入收藏
站内最新
站内热门
站内头条