第一部分：命名约定 - 整洁代码的基础

2025-06-07

第一部分：命名约定 - 整洁代码的基础

欢迎阅读我的博客系列“2023 年 React 最佳实践”的第一部分。在本篇博客中，我们将深入探讨命名约定这一关键主题，以及它如何成为 React 中简洁易维护代码的基础。

命名约定在提高代码的可读性、可维护性、组织性和沟通性方面起着至关重要的作用。它们有助于创建一个更易于使用、减少错误并促进开发人员之间协作的、具有凝聚力和结构化的代码库。

在本部分中，我们将重点介绍 React 中的命名约定。我们将探索 React 项目中组件、变量、函数和其他标识符的推荐命名方法。您将深入了解一些常用的命名约定，例如PascalCase、camelCase、kebab-case和SCREAMING_SNAKE_CASE，并了解何时何地应用它们。

我们还将讨论有意义且描述性的名称的好处，这些名称可以准确反映代码中元素的目的和功能。

帕斯卡·凯斯

帕斯卡大小写通常是指复合词的书写惯例，其中每个单词的首字母大写，并且单词之间没有空格或标点符号。

在 React 中，我们可以对以下元素使用帕斯卡大小写：

1. React 组件

// React Component
const Todo = () => {
   //...
}
Enter fullscreen mode Exit fullscreen mode

2. CSS 类名

// CSS Class Names
Todo.css
Todo.scss
Todo.module.scss
Enter fullscreen mode Exit fullscreen mode

3. 枚举

// Enums
const RequestType = {
   //...
}
Enter fullscreen mode Exit fullscreen mode

驼峰式命名法

驼峰式命名法是指书写复合词或短语的惯例，其中每个单词都以大写字母开头，但第一个单词除外，而第一个单词以小写字母开头。

在 React 中，我们可以对以下元素使用驼峰式命名法：

1.变量名

// Variable Name
const userName = "sathishskdev";
Enter fullscreen mode Exit fullscreen mode

2. 函数名称

// Function Name
const getFullName = (firstName, lastName) => {
    return `${firstName} ${lastName}`;
}
Enter fullscreen mode Exit fullscreen mode

3.对象属性

// Object Properties
const user = {
  userName: "sathishskdev",
  firstName: "Sathish",
  lastName: "Kumar"
}
Enter fullscreen mode Exit fullscreen mode

4. CSS模块类名

// CSS Module Class Names
.headerContainer {
    display: "flex";
}
Enter fullscreen mode Exit fullscreen mode

5. 自定义钩子

const useTodo = () => {
  //...
}
Enter fullscreen mode Exit fullscreen mode

6. 高阶组件

const withTimer = () => {
  //...
}
Enter fullscreen mode Exit fullscreen mode

烤肉串案

串式命名是指用小写字母书写复合词并用连字符（“-”）分隔的惯例。

在 React 中，我们可以对以下元素使用 kebab 命名：

1. CSS 类名

// CSS Class Names
header-container {
    display: "flex";
}

<div className="header-container">
  //...
</div>
Enter fullscreen mode Exit fullscreen mode

2.文件夹名称

// Folder Names
  src
     todo-list // Folder name
         TodoList.jsx
         TodoList.module.scss
     todo-item // Folder name
         TodoItem.jsx
Enter fullscreen mode Exit fullscreen mode

尖叫蛇案

SCREAMING_SNAKE_CASE 指的是用大写字母书写复合词或短语的惯例，单词之间用下划线（“_”）分隔。

1. 常量

// Constants
const BASE_PATH = "https://domain.services/api";
Enter fullscreen mode Exit fullscreen mode

2. 枚举属性

// Enumeration Properties
const RequestType = { // Name in Pascal Case
  // Properties in Screaming Snake Case
  GET: 'GET',
  POST: 'POST',
  PUT: 'PUT',
  DELETE: 'DELETE',
};
Enter fullscreen mode Exit fullscreen mode

3.全局变量

// Global Variables
const ENVIRONMENT = 'PRODUCTION';
const PI = 3.14159;
Enter fullscreen mode Exit fullscreen mode

高阶组件命名约定

以下是命名高阶组件的最佳实践：

1. 使用“with”作为前缀

常见的约定是使用前缀“with”，后跟 HOC 的功能或目的。

2. 使用“Original Component”作为后缀

在 HOC 的名称中包含原始组件名称，以指示它正在增强或包装的组件

// HOC: name have "with" as Prefix
// "Filter" is add as Suffix which is original component
const withFilter = () => {
 //...
}

// Usage of the HOC
const Filter = withFilter(/*Component Name*/);
Enter fullscreen mode Exit fullscreen mode

自定义 Hooks 命名约定

以下是命名自定义钩子的最佳实践：

1. 使用“use”作为前缀

常见的约定是使用前缀“use”，后跟自定义钩子的功能或目的。

2. 使用“钩子的行为”作为后缀

命名自定义钩子，准确描述自定义钩子的目的或行为。

// Custom Hook: useTimer
// name have "use" as Prefix
// "Timer" is add as Suffix which is behaviour of hook
const useTimer = (initialTime) => {
  // ... hook implementation
};

// Usage of the custom hook
  const { time, start, stop, reset } = useTimer(60);
Enter fullscreen mode Exit fullscreen mode

使用更具描述性和更具体的名称

避免对组件、变量或函数使用通用或不清楚的名称非常重要。

让我们举一个例子来说明这一点：

// ❌ Pitfalls to Avoid

const MyComponent = () => { 
// What kind of component is this?

const data = getData() 
// What kind of data is this?

const onClick = () => {
  // What does it do?
}
//...
}
Enter fullscreen mode Exit fullscreen mode

在上面的例子中，组件名称、变量名称“data”和函数名称“onClick”都是通用的，并没有传达它们特定的目的或上下文。

为了提高清晰度和可维护性，建议使用更具描述性和具体的名称。

以下是最佳实践：

// ✅ Best Practice

const ProductDetails = () => {

const productInfo = fetchProductInfo();
// Fetches detailed product information

const addProductToCart = () => {
  // Add the product to the shopping cart
};
//...
}
Enter fullscreen mode Exit fullscreen mode

在改进的示例中，组件被重命名为“ProductDetails”，这清楚地表明了它的用途。变量名“productInfo”表示它保存了产品的详细信息。函数名“addProductToCart”描述了将产品添加到购物车的操作。

通过使用描述性和有意义的名称，其他开发人员（包括您自己）可以更轻松地理解和长期维护代码。

选择单数或复数命名

决定对各种元素（例如组件、变量和函数）使用单数或复数名称会显著影响代码的清晰度。

让我们举个例子：

// ✅ Best Practice

const fetchConversation = () => {
  // Fetch single conversation.
}

const fetchConversations = () => {
  // Fetch multiple conversations.
}

// Use singular name for a single conversation
const conversation = { /*Conversation Details*/ }

// Use plural name for multiple conversation
const conversations = [
  { /*Conversation Details*/ }, 
  { /*Conversation Details*/ }
]
Enter fullscreen mode Exit fullscreen mode

通过使组件、函数和变量名称的单数或复数形式与其预期用途保持一致，我们提高了代码的可读性，并方便其他开发人员更好地理解代码库。

避免过度缩写

以下示例说明了避免在代码中使用过多缩写的重要性：

// ❌ Bad example

// Excessive abbreviation
const selUsr = {
  usrId: '1',
  usrNm: 'Sathish Kumar',
  usrEmail: 'sathish@domain.com',
};

// Usage
selUsr.usrId
Enter fullscreen mode Exit fullscreen mode

在上面的示例中，对象selUsr包含选定的用户信息，其属性名称缩写为usrId、usrNm和usrEmail。虽然这段代码可能可以正常工作，但它缺乏清晰度，可能会给需要使用此对象和属性的其他开发人员造成困惑。

以下是最佳实践：

// ✅ Best Practice

// Descriptive object and property names
const selectedUser = {
  userId: 1,
  userName: 'Sathish Kumar',
  userEmail: 'sathish@domain.com',
}

// Usage
selectedUser.userId
Enter fullscreen mode Exit fullscreen mode

在此示例中，属性名称userId、userName和userEmail更具描述性，可以更清晰地理解所使用的数据。这使得代码更易于阅读、维护和协作，从而有助于提高整体代码质量。

以上就是我们对 React.js 命名规范的探索。遵循这些最佳实践，你将能够在 React 项目中创建简洁、易读且易于维护的代码。

请记住，为变量、函数、组件和其他元素选择有意义且描述性的名称，对于增强代码清晰度和改善开发人员之间的协作至关重要。在整个项目中保持一致的命名约定将使您的代码库更有条理，更易于理解。

在本系列的下一篇中，我们将深入探讨React 中文件夹结构这一关键主题。我们将讨论如何有效地组织项目的文件和目录，以及如何实现模块化方法以提高代码的可重用性和可维护性。

请继续关注下一篇文章！

编码愉快！😊👩‍💻👨‍💻

文章来源：https://dev.to/sathishskdev/part-1-naming-conventions-the-foundation-of-clean-code-51ng
Devto 翻译
PREV
😬 10 个必须知道的 JavaScript 数组方法
NEXT
很棒的 HTML 标签和属性