React JS - 命名约定

在计算机编程中，命名约定是一套规则，用于选择在源代码和文档中用于标识变量、类型、函数和其他实体的字符序列。（来源：维基百科）

在 React.js 的命名规范中，一致性和清晰性至关重要。

完善的命名规则有助于提高代码的可读性、可维护性和协作性。

命名规则

成分

React 组件名称应具有描述性和意义。组件名称应使用PascalCase命名法（每个单词的首字母大写）。

文件

请使用PascalCase命名法，使文件名与组件名称保持一致。例如，如果组件名为 UserCard，则文件应命名为 UserCard.js。

道具

道具名称应使用描述性词语，以便清晰地表明其用途。除非缩写或首字母缩略词在你的项目上下文中被广泛理解，否则请避免使用它们。

例如：

• 请使用 user 代替 usr。

在这个例子中，prop user 用于将用户数据传递给 UserCard 组件。通过使用像 user 这样描述性的名称，可以清楚地表明该 prop 代表用户数据，从而使代码更易读易懂。

状态变量

在状态变量前加上is、has或should前缀，以表示布尔值。

在这个例子中，我们有三个状态变量：

• isActive，
• hasError
• 应该渲染

根据命名约定，这些变量分别以is、has和should为前缀。

相应的状态更新函数setIsActive、setHasError和setShouldRender用于修改状态。

通过遵循命名约定，这些状态变量的用途和含义就很清楚了，使代码更易读、更易维护。

事件处理程序

使用handle作为事件处理函数的前缀。例如，handleClick、handleInputChange。

CSS 类

CSS类名请使用小写字母和连字符。

常量

在 JavaScript 中，使用带下划线的大写字母来表示常量。

例如，API_URL、MAX_RESULTS。

实用函数

选择能体现其用途或功能的描述性名称。

例如，formatDate，generateUniqueId。

记住，命名规则最重要的方面是确保项目或团队内部的一致性。最好将命名规则记录下来，以便所有团队成员都能始终如一地遵循。

如果您喜欢我的作品，请：

1. 捐赠 💕💸

使用Revolut 网站付款或扫描上方二维码付款。

您的捐赠将激励我继续创作有意义的作品。谢谢！🦁💚

2. 订阅 🤗