React命名约定 - 整洁代码的基础
我们将深入探讨命名约定的关键主题，以及它们如何作为 React 中干净且可维护的代码的基础。
命名约定在提高代码可读性、可维护性、组织和通信方面发挥着至关重要的作用。它们有助于创建一个有凝聚力和结构化的代码库，该代码库更易于使用、减少错误并促进开发人员之间的协作。
在这一部分中，我们将特别关注 React 中的命名约定。我们将探索在 React 项目中命名组件、变量、函数和其他标识符的推荐方法。您将深入了解PascalCase、CamelCase、kebab-case和SCREAMING_SNAKE_CASE等流行约定，并了解何时何地应用它们。
我们还将讨论准确反映代码中元素的用途和功能的有意义的描述性名称的好处。
（更|多优质内|容：java567 点 c0m）
### 帕斯卡案例
> 帕斯卡大小写通常是指书写复合词的惯例，其中每个单词的第一个字母大写，并且单词之间没有空格或标点符号。
在 React 中，我们可以对以下元素使用帕斯卡大小写：
1. 反应组件
```
// React Component
const Todo = () => {
//...
}
```
2.CSS类名
```
// CSS Class Names
Todo.css
Todo.scss
Todo.module.scss
```
3. 枚举
```
// Enums
const RequestType = {
//...
}
```
### 骆驼香烟盒
> 驼峰式大小写是指书写复合单词或短语的惯例，其中每个单词都以大写字母开头，第一个单词以小写字母开头。
在 React 中，我们可以对以下元素使用驼峰式大小写：
1. 变量名称
```
// Variable Name
const userName = "sathishskdev";
```
2. 函数名称
```
// Function Name
const getFullName = (firstName, lastName) => {
return `${firstName} ${lastName}`;
}
```
3. 对象属性
```
// Object Properties
const user = {
userName: "sathishskdev",
firstName: "Sathish",
lastName: "Kumar"
}
```
4.CSS模块类名
```
// CSS Module Class Names
.headerContainer {
display: "flex";
}
```
5. 自定义挂钩
```
const useTodo = () => {
//...
}
```
6. 高阶组件
```
const withTimer = () => {
//...
}
```
### 烤肉串盒
> Kebab 大小写是指用小写字母书写复合词并用连字符（“-”）分隔的约定。
在 React 中，我们可以对以下元素使用 kebab case：
1.CSS类名
```
// CSS Class Names
header-container {
display: "flex";
}
<div className="header-container">
//...
</div>
```
2. 文件夹名称
```
// Folder Names
src
todo-list // Folder name
TodoList.jsx
TodoList.module.scss
todo-item // Folder name
TodoItem.jsx
```
### SCREAMING_SNAKE_CASE
> SCREAMING_SNAKE_CASE 指的是用大写字母书写复合单词或短语的约定，单词之间用下划线（“_”）分隔。
1. 常量
```
// Constants
const BASE_PATH = "/services/api";
```
2. 枚举属性
```
// Enumeration Properties
const RequestType = { // Name in Pascal Case
// Properties in Screaming Snake Case
GET: 'GET',
POST: 'POST',
PUT: 'PUT',
DELETE: 'DELETE',
};
```
3. 全局变量
```
// Global Variables
const ENVIRONMENT = 'PRODUCTION';
const PI = 3.14159;
```
### 高阶组件命名约定
以下是命名高阶组件的最佳实践：
1.使用“with”作为前缀
常见约定是使用前缀“with”，后跟 HOC 的功能或用途。
2.使用“原始组件”作为后缀
在 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*/);
```
### 自定义 Hook 命名约定
以下是命名自定义挂钩的最佳实践：
1.使用“use”作为前缀
常见约定是使用前缀“use”，后跟自定义 Hook 的功能或用途。
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);
```
### 使用更具描述性和具体的名称
避免对组件、变量或函数使用通用或不明确的名称非常重要。
让我们举个例子来说明这一点：
```
// ❌ 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?
}
//...
}
```
在上面的示例中，组件名称、变量名称“data”和函数名称“onClick”是通用的，不传达它们的特定用途或上下文。
为了提高清晰度和可维护性，建议使用更具描述性和具体的名称。
这是一个最佳实践：
```
// ✅ Best Practice
const ProductDetails = () => {
const productInfo = fetchProductInfo();
// Fetches detailed product information
const addProductToCart = () => {
// Add the product to the shopping cart
};
//...
}
```
在改进的示例中，该组件被重命名为“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*/ }
]
```
通过将组件、函数和变量名称的单数或复数形式与其预期目的保持一致，我们提高了代码的可读性，并有助于其他开发代码库的开发人员更好地理解。
### 避免过多缩写
下面的示例演示了避免在代码中使用过多缩写的重要性：
```
// ❌ Bad example
// Excessive abbreviation
const selUsr = {
usrId: '1',
usrNm: 'Sathish Kumar',
usrEmail: 'sathish@domain.com',
};
// Usage
selUsr.usrId
```
在上面的示例中，对象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
```
在此示例中，属性名称userId、userName和userEmail更具描述性，可以更清楚地了解所使用的数据。这使得代码更易于阅读、维护和协作，从而有助于提高整体代码质量。
我们对 React.js 中命名约定的探索到此结束。通过遵循这些最佳实践，您就可以在 React 项目中创建干净、可读且可维护的代码。
请记住，为变量、函数、组件和其他元素选择有意义且具有描述性的名称对于提高代码清晰度和改善开发人员之间的协作至关重要。整个项目中命名约定的一致性将使您的代码库更有条理且更易于理解。
在本系列的下一部分中，我们将深入研究React 中文件夹结构的关键主题。我们将讨论如何有效地组织项目的文件和目录，以及如何实现提高代码可重用性和可维护性的模块化方法。
请继续关注下一篇文章！
快乐编码！😊👩💻👨💻
（更|多优质内|容：java567 点 c0m）
