身為 React 開發人員，我們都遇過需要渲染資料清單的場景。雖然 .map() 方法效果很好，但每次渲染清單時重複相同的邏輯可能會讓人筋疲力盡，並導致程式碼重複。幸運的是，有一種更乾淨、可擴展的方法來處理這個問題，使用可重複使用元件、高階元件或自訂掛鉤。

在本文中，我將分享一種改進 React 中清單渲染的方法，確保您的程式碼保持 DRY、可重複使用且更易於維護。

主要問題：重複的.map()邏輯

假設您正在為電子商務應用程式建立儀表板。儀表板包含多個清單：最近訂單、最暢銷產品、用戶評論等。您需要使用 .map() 函數呈現每個清單。這是一個典型的例子：

const orders = [...]; // Array of order data

return (
  
    {orders.map((order, index) => (
      
    ))}
  >
);

現在，您可以看到每個清單都重複 .map() 邏輯，類似的程式碼使您的元件變得混亂。這就是可重複使用模式可以派上用場的地方。

解決方案：可重複使用的ListComponent

為了避免重複 .map() 邏輯，我們可以建立一個可重複使用的 ListComponent 來抽象化映射邏輯，並允許我們根據資料渲染不同的元件。

function ListComponent({ data, renderItem }) {
  return (
    
      {data.map((item, index) => renderItem(item, index))}
    >
  );
}

用法：

 (
    
  )} 
/>

在此模式中：
renderItem：定義每個項目應如何呈現的函數

透過傳遞不同的 renderItem 函數，我們可以為任何清單重複使用 ListComponent。這會產生一個乾淨、可重複使用的元件，減少重複的 .map() 邏輯。

更有彈性：高階組件（HOC）

如果多個元件需要列表渲染，讓我們透過建立一個高階元件來進一步採用此模式。 HOC 允許透過附加功能增強任何元件 - 在本例中為清單渲染。

function withListRendering(WrappedComponent) {
  return function ListWrapper({ data, ...props }) {
    return (
      
        {data.map((item, index) => (
          
        ))}
      >
    );
  };
}

用法：

const EnhancedOrderComponent = withListRendering(OrderComponent);

// Now render the component with any data array

透過使用 withListRendering HOC 包裝 OrderComponent，我們自動新增了清單渲染行為，而無需修改原始元件。這種模式使程式碼保持模組化。

對於 Hook 愛好者：用於列表渲染的自訂 Hook

React hooks 提供了一種封裝邏輯的函數式方法。如果您喜歡使用鉤子，這裡是使用自訂鉤子渲染清單的範例。

function useListRenderer(data, renderItem) {
  return data.map((item, index) => renderItem(item, index));
}

用法：

function OrdersDashboard({ orders }) {
  const orderList = useListRenderer(orders, (order, index) => (
    
  ));

  return {orderList}>;
}

這種方法將 .map() 邏輯移到鉤子中，使渲染邏輯與元件的結構分開。這是保持組件精簡並專注於演示的另一種方法。

現實場景：電子商務儀表板

讓我們將此模式應用在現實場景中。想像一下，您正在建立一個電子商務管理儀表板，其中需要呈現多個訂單、產品、評論等清單。

使用 ListComponent 方法，您可以呈現以下訂單清單：

 (
    
  )} 
/>

當我們需要渲染不同的清單（例如產品）時，相同的 ListComponent 可以與不同的 renderItem 函數重複使用：

 (
    
  )} 
/>

無需重寫 .map() 邏輯 - 只需將 ListComponent 與不同的資料和元件重複使用即可。這使得程式碼庫在成長時更易於維護。

結論：乾淨、可重複使用且可擴展的程式碼

可重複使用的 ListComponent 模式透過抽象重複的 .map() 邏輯來簡化 React 清單渲染。無論您喜歡使用基本組件方法、HOC 還是自訂掛鉤，此模式都可確保程式碼乾淨且可重複使用。

建立具有多個清單的 React 元件，請考慮使用其中一種模式來使元件專注於表示，同時將清單邏輯分離到外部。

您發現 React 中還有哪些其他有用的可重複使用模式？請在評論中告訴我！ 最後感謝您的閱讀