提高 React 项目整洁度的 21 个最佳实践

2023-11-16

React 在如何组织结构方面非常开放。这正是为什么我们有责任保持项目的整洁和可维护性。

今天,我们将讨论一些改善 React 应用程序健康状况的最佳实践。这些规则被广泛接受。因此,掌握这些知识至关重要。

所有内容都将以代码展示,所以做好准备!

1. 使用 JSX 简写

尝试使用 JSX 简写来传递 Boolean 布尔值变量。假设您想要控制导航栏组件的标题可见性。

Bad ❌
jsx
复制代码return <Navbar showTitle={true} />;
Good ✔
jsx
复制代码return <Navbar showTitle />;

2. 使用三元运算符

假设你想根据角色显示用户的详细信息。

Bad ❌
jsx复制代码const { role } = user;

if (role === ADMIN) {
  return <AdminUser />;
} else {
  return <NormalUser />;
}
Good ✔
jsx复制代码const { role } = user;

return role === ADMIN ? <AdminUser /> : <NormalUser />;

3. 利用对象字面量

对象字面量可以帮助我们的代码更具可读性。假设你想根据角色显示三种类型的用户。不能使用三元,因为选项数量超过两个。

Bad ❌
jsx复制代码const { role } = user;

switch (role) {
  case ADMIN:
    return <AdminUser />;
  case EMPLOYEE:
    return <EmployeeUser />;
  case USER:
    return <NormalUser />;
}
Good ✔
jsx复制代码const { role } = user;

const components = {
  ADMIN: AdminUser,
  EMPLOYEE: EmployeeUser,
  USER: NormalUser,
};

const Component = components[role];

return <Component />;

现在看起来好多了。

4. 使用 Fragments 语法

始终使用 Fragment 而不是 Div。它可以保持代码整洁,并且也有利于性能,因为在虚拟 DOM 中创建的节点少了一个。

Bad ❌
jsx复制代码return (
  <div>
    <Component1 />
    <Component2 />
    <Component3 />
  </div>
);
Good ✔
jsx复制代码return (
  <>
    <Component1 />
    <Component2 />
    <Component3 />
  </>
);

5. 不要在渲染中定义函数

不要在渲染中定义函数。尝试将渲染内部的逻辑保持在绝对最低限度。

Bad ❌
jsx复制代码return (
  <button onClick={() => dispatch(ACTION_TO_SEND_DATA)}>
    {" "}
    // NOTICE HERE This is a bad example
  </button>
);
Good ✔
jsx复制代码const submitData = () => dispatch(ACTION_TO_SEND_DATA);

return <button onClick={submitData}>This is a good example</button>;

使用 Memo

React.PureComponent 和 Memo 可以显着提高应用程序的性能。它们帮助我们避免不必要的渲染。

Bad ❌
jsx复制代码import React, { useState } from "react";

export const TestMemo = () => {
  const [userName, setUserName] = useState("faisal");
  const [count, setCount] = useState(0);

  const increment = () => setCount((count) => count + 1);

  return (
    <>
      <ChildrenComponent userName={userName} />
      <button onClick={increment}> Increment </button>
    </>
  );
};

const ChildrenComponent = ({ userName }) => {
  console.log("rendered", userName);
  return <div> {userName} </div>;
};

尽管子组件应该只渲染一次,因为 count 的值与 ChildComponent 无关。但是,每次单击按钮时它都会呈现。2fd528cc7df716e116ff1e999709adac.jpeg

Good ✔

让我们将 ChildrenComponent 编辑为:

jsx复制代码import React, { useState } from "react";

const ChildrenComponent = React.memo(({ userName }) => {
  console.log("rendered");
  return <div> {userName}</div>;
});

现在,无论您单击该按钮多少次,它只会在必要时呈现。

7. 将 CSS 放入 JavaScript 中

儿童不宜,禁止观看!!!

8. 使用对象解构

使用对象解构对你有利。假设你需要显示用户的详细信息。

Bad ❌
jsx复制代码return (
  <>
    <div> {user.name} </div>
    <div> {user.age} </div>
    <div> {user.profession} </div>
  </>
);
Good ✔
jsx复制代码const { name, age, profession } = user;

return (
  <>
    <div> {name} </div>
    <div> {age} </div>
    <div> {profession} </div>
  </>  
)

9. 字符串参数不需要大括号

将字符串作为参数传递给子组件时。

Bad ❌
jsx
复制代码return <Navbar title={"My Special App"} />;
Good ✔
jsx
复制代码return <Navbar title="My Special App" />;

10. 从 JSX 中删除 JS 代码

如果任何 JS 代码不能用于渲染或 UI 功能,请将其移出 JSX。

Bad ❌
jsx复制代码return (
  <ul>
    {posts.map((post) => (
      <li
        onClick={(event) => {
          console.log(event.target, "clicked!"); // <- THIS IS BAD
        }}
        key={post.id}
      >
        {post.title}
      </li>
    ))}
  </ul>
);
Good ✔
jsx复制代码const onClickHandler = (event) => {
  console.log(event.target, "clicked!");
};

return (
  <ul>
    {posts.map((post) => (
      <li onClick={onClickHandler} key={post.id}>
        {post.title}
      </li>
    ))}
  </ul>
);

11. 使用模板字符串

使用模板文字构建大字符串。避免使用字符串连接。它又漂亮又干净。

Bad ❌
jsx复制代码const userDetails = user.name + "'s profession is" + user.proffession;

return <div> {userDetails} </div>;
Good ✔
jsx复制代码const userDetails = `${user.name}'s profession is ${user.proffession}`;

return <div> {userDetails} </div>;

12. 按顺序引入

始终尝试按特定顺序导入内容。它提高了代码的可读性。

Bad ❌
jsx复制代码import React from "react";
import ErrorImg from "../../assets/images/error.png";
import styled from "styled-components/native";
import colors from "../../styles/colors";
import { PropTypes } from "prop-types";
Good ✔

经验法则是保持导入顺序如下:

  • 内置;

  • 外部的;

  • 自己编写的;

所以上面的例子就变成了:

jsx复制代码import React from "react";

import { PropTypes } from "prop-types";
import styled from "styled-components/native";

import ErrorImg from "../../assets/images/error.png";
import colors from "../../styles/colors";

13. 使用隐式返回

使用 JavaScript 的隐式返回功能来编写漂亮的代码。假设您的函数执行简单的计算并返回结果。

Bad ❌
jsx复制代码const add = (a, b) => {
  return a + b;
};
Good ✔
jsx
复制代码const add = (a, b) => a + b;

14. 组件命名

始终对组件使用 PascalCase,对实例使用 CamelCase。

Bad ❌
jsx复制代码import reservationCard from "./ReservationCard";

const ReservationItem = <ReservationCard />;
Good ✔
jsx复制代码import ReservationCard from "./ReservationCard";

const reservationItem = <ReservationCard />;

15. 保留属性命名

不要使用 DOM 组件的属性名称用于在组件之间传递 props,因为其他人可能不会预期这些名称。

Bad ❌
jsx复制代码<MyComponent style="dark" />

<MyComponent className="dark" />
Good ✔
jsx
复制代码<MyComponent variant="fancy" />

16. 引号

对 JSX 属性使用双引号,对所有其他 JS 使用单引号。

Bad ❌
jsx复制代码<Foo bar='bar' />

<Foo style={{ left: "20px" }} />
Good ✔
jsx复制代码<Foo bar="bar" />

<Foo style={{ left: '20px' }} />

17. Prop 参数命名

如果 prop 值是 React 组件,则始终使用驼峰命名法作为 prop 名称或 PascalCase。

Bad ❌
jsx
复制代码<Component UserName="hello" phone_number={12345678} />
Good ✔
jsx复制代码<MyComponent
  userName="hello"
  phoneNumber={12345678}
  Component={SomeComponent}
/>

18. 括号中的 JSX

如果您的组件跨越一行以上,请始终将其括在括号中。

Bad ❌
jsx复制代码return (
  <MyComponent variant="long">
    <MyChild />
  </MyComponent>
);
c10e34712f831e6d58110bb0588f6906.jpeg
20230804074846

我这破垃圾编辑器自动格式化了,根部不存在这个问题哈哈哈哈哈

Good ✔
jsx复制代码return (
  <MyComponent variant="long">
    <MyChild />
  </MyComponent>
);

19. 自动闭合标签

如果您的组件没有任何子组件,请使用自闭合标签。它提高了可读性。

Bad ❌
jsx
复制代码<SomeComponent variant="stuff"></SomeComponent>
Good ✔
jsx
复制代码<SomeComponent variant="stuff" />

20. 方法名称中的下划线

不要在任何内部 React 方法中使用下划线。

Bad ❌
jsx复制代码const _onClickHandler = () => {
  // do stuff
};
Good ✔
jsx复制代码const onClickHandler = () => {
  // do stuff
};

21. 替代文本

在你的 <img> 标签中始终要包括 alt 属性。不要在 alt 属性中使用 "picture" 或 "image",因为屏幕阅读器已经默认将 <img> 元素识别为图像,无需重复说明。

Bad ❌
jsx复制代码<img src="hello.jpg" />

<img src="hello.jpg" alt="Picture of me rowing a boat" />
Good ✔
jsx
复制代码<img src="hello.jpg" alt="Me waving hello" />

参考资源

  • 21 Best Practices for a Clean React Project

总结

就这样吧。如果你已经做到了这一步,那么恭喜您!我希望你能从本文中学到一两件事。

最后分享两个我的两个开源项目,它们分别是:

  • 前端脚手架 create-neat

  • 在线代码协同编辑器

这两个项目都会一直维护的,如果你也喜欢,欢迎 star

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

提高 React 项目整洁度的 21 个最佳实践 的相关文章

随机推荐

  • 2023年信息与通信工程国际会议(JCICE 2023)

    会议简介 Brief Introduction 2023年第二届信息与通信工程国际会议 JCICE 2023 会议时间 2023年5月12日 14日 召开地点 中国 成都 大会官网 JCICE 2023 2023 International
  • DeeplabCut安装教程(CPU)版

    DeeplabCut安装教程 CPU 版 文章目录 DeeplabCut安装教程 CPU 版 前言 安装步骤 1 进入官网下载对应的DeepLabCut zip文件 附官网链接 2 解压到任意位置 3 打开Anaconda Navigato
  • c++模板(函数模板,类中函数模板,类模板)

    作用 减少程序中的冗余信息 如 多个函数或类的除了参数类型外 其余都完全相同时 可以使用模板来减少重复信息 参考函数重载时 输入参数数量也相同的情况 1 函数模板 即建立一个通用函数 只不过该函数的返回类型和形参类型都不具体指定 其定义格式
  • Python实现找零兑换的三种解法

    找零兑换 找零兑换问题最直接的解法就是贪心策略 比如问题 有面值1 5 10 25的硬币 求解兑换63元所需的最少硬币数 贪心策略的思想就是不断的利用面值最大的硬币去尝试 不行了 在尝试较小面值的硬币 该例中也即使用25的硬币去尝试 2枚2
  • 华为服务器怎么换系统,云服务器怎么更换系统

    云服务器怎么更换系统 内容精选 换一换 弹性云服务器系统密码涉及到客户重要的私人信息 提醒您妥善保管密码 如果您忘记密码或密码过期 可以重置密码 如果弹性云服务器提前安装了密码重置插件 请参见在控制台重置弹性云服务器密码 使用公共镜像的弹性
  • 【简单易用】基于Qt的跨平台自定义标题栏控件QJamWindow

    一 概述 QJamWindow是一个基于Qt的跨平台自定义标题栏控件 你可以通过它方便得设计出属于自己的标题栏 特性 1 标题栏高度可调 标题栏背景色设定 2 图标及其尺寸 图标背景色设定 3 Control box宽度 鼠标经过 按下颜色
  • JAVA基础必备功能之导出ZIP文件

    导出ZIP文件 比较常用的两种 导出图片压缩文件 导出excel压缩文件 导出思路 需要导出的文件转存为byte数组保存到Map 然后遍历压缩成zip 需要引入jar
  • 链表— —循环链表的算法实现

    Joseph问题 有 10 个小朋友按编号顺序 1 2 10 顺时针方向围成一圈 从 1 号开始顺时针方向 1 2 9 报数 凡报数 9 者出列 显然 第一个出圈为编号 9 者 最后一个出圈者的编号是多少 第 5 个出圈者的编号是多少 in
  • lintcode 631 · 最大矩阵II【矩阵 中等 vip】

    题目 https www lintcode com problem 631 给出一个只有 0 和 1 组成的二维矩阵 找出最大的一个子矩阵 使得这个子矩阵的主对角线元素均为 1 其他元素均为 0 你可以认为所求的矩阵一定是一个方阵 主对角线
  • 组是由圆括号分开的正则表达式 随后可以根据它们的组号进行调用 第 0 组表示整个匹 配表达式 第1 组表示第 1 个用圆括号括起来的组 等等 因此 在表达式 A B C D 中 有 3 个组 第 0 组 ABCD 第 1 组是 BC 以及第
  • Acwing790.数的三次方根

    解题思路 include
  • Pandora-ChatGPT(离线安装教程)(附安装包)

    要安装Pandora ChatGPT 1 1 0 tar gz 您可以按照以下步骤进行操作 安装包 https wwue lanzouj com iOMwG0yeozxg 解压缩文件 tar xvf Pandora ChatGPT 1 1
  • 设置bitmap的宽高,同时将bitmap转换为file对象

    public class BitmapToSizeChangeFile 将bitmap转换为file存储起来 param bitmap return public static File
  • Dijkstra C艹板子

    迪杰斯特拉算法主要特点是从起始点开始 采用贪心算法的策略 每次遍历到始点距离最近且未访问过的顶点的邻接节点 直到扩展到终点为止 题源 最短路 蓝桥云课 lanqiao cn 如下图所示 G 是一个无向图 其中蓝色边的长度是 1 橘色边的长度
  • 绕过JavaScript debugger三种解决方法

    最近网上挺火的一段加密混淆JS 格式化展开后有300多行 目的是解析生成一个cookie 不携带cookie 就不能加载网页源码 典型的反爬虫操作 看后觉得好使的请记得点赞哦 烧鸡么么哒 谢谢 JS会自动监视是否打开了调试器 如果打开了 就
  • STM32锁住,解开方法

    一 STM32 被锁住后的解开方法 问题 STM32 JTAG SWD禁用导致无法烧写 由于STM32的引脚功能较多 在为了方便硬件的使用 常会使用复用重映射的功能 这里主要涉及的是SWD和JTAG端口的引脚对应出现的问题 为了使得TIM2
  • php之RSA加密解密

    介绍 RSA算法属于非对称加密算法 非对称加密算法需要两个秘钥 公开密钥 publickey 和私有秘钥 privatekey 公开密钥和私有秘钥是一对 如果公开密钥对数据进行加密 只有用对应的私有秘钥才能解密 如果私有秘钥对数据进行加密那
  • Linux下nginx的安装以及环境配置

    linux下nginx的安装以及环境配置 刚好最近在处理服务器相关的工作 所以记录一下nginx的安装 ok 接下来直接开始操作 第一步 下载nginx压缩包 在这里可以去nginx官网下载 gt 点我下载nginx 也可以直接使用wget
  • 【解惑】一文告诉你,该学R还是Python!

    Python和R是统计学中两种最流行的的编程语言 R的功能性主要是统计学家在开发时考虑的 R具有强大的可视化功能 而Python因为易于理解的语法被大家所接受 在这篇文章中 我们将重点介绍R和Python以及它们在数据科学和统计上地位之间的
  • 提高 React 项目整洁度的 21 个最佳实践

    React 在如何组织结构方面非常开放 这正是为什么我们有责任保持项目的整洁和可维护性 今天 我们将讨论一些改善 React 应用程序健康状况的最佳实践 这些规则被广泛接受 因此 掌握这些知识至关重要 所有内容都将以代码展示 所以做好准备
Powered by Hwhale