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: '[email protected]',
 };
 
 // Usage
 selUsr.usrId           

在上面的示例中，對象selUsr包含標明的使用者資訊以及縮寫屬性名稱usrId，例如usrNm、 和usrEmail。雖然此代碼可能有效，但它缺乏清晰度，可能會給需要使用此對象和屬性的其他開發人員造成混亂。

這是一個最佳實踐：

// ✅ Best Practice
 
 // Descriptive object and property names
 const selectedUser = {
   userId: 1,
   userName: 'Sathish Kumar',
   userEmail: '[email protected]',
 }
 
 // Usage
 selectedUser.userId           

在此示例中，屬性名稱userId、userName和userEmail更具描述性，可以更清楚地了解所使用的資料。這使得代碼更易于閱讀、維護和協作，進而有助于提高整體代碼品質。

我們對 React.js 中命名約定的探索到此結束。通過遵循這些最佳實踐，您就可以在 React 項目中建立幹淨、可讀且可維護的代碼。

請記住，為變量、函數、元件和其他元素選擇有意義且具有描述性的名稱對于提高代碼清晰度和改善開發人員之間的協作至關重要。整個項目中命名約定的一緻性将使您的代碼庫更有條理且更易于了解。

在本系列的下一部分中，我們将深入研究React 中檔案夾結構的關鍵主題。我們将讨論如何有效地組織項目的檔案和目錄，以及如何實作提高代碼可重用性和可維護性的子產品化方法。

請繼續關注下一篇文章！

快樂編碼！‍‍

（更|多優質内|容：java567 點 c0m）