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)

複数のコンポーネントでリストのレンダリングが必要な場合は、HigherOrder コンポーネントを作成して、このパターンをさらに進めてみましょう。 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

OrderComponent を withListRendering HOC でラップすることにより、元のコンポーネントを変更することなく、リストのレンダリング動作が自動的に追加されました。このパターンはコードをモジュール化します。

フック愛好家向け: リスト レンダリング用のカスタム フック

React フックは、ロジックをカプセル化する機能的な方法を提供します。フックを使用したい場合は、カスタム フックを使用したリストのレンダリングの例を次に示します。

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

使用法：

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

  return {orderList}>;
}

このアプローチでは、.map() ロジックをフックに移動し、レンダリング ロジックをコンポーネントの構造から切り離します。これは、コンポーネントを無駄のない状態に保ち、プレゼンテーションに重点を置くもう 1 つの方法です。

現実世界のシナリオ: E コマース ダッシュボード

このパターンを現実世界のシナリオに適用してみましょう。注文、製品、レビューなどの複数のリストを表示する必要がある e コマース管理ダッシュボードを構築していると想像してください。

ListComponent アプローチを使用すると、次のような注文のリストをレンダリングできます:

 (
    
  )} 
/>

商品などの別のリストをレンダリングする必要がある場合、同じ ListComponent を別の renderItem 関数で再利用できます:

 (
    
  )} 
/>

.map() ロジックを書き直す必要はありません。ListComponent を別のデータとコンポーネントで再利用するだけです。これにより、コードベースが成長しても保守しやすくなります。

結論: クリーンで再利用可能、スケーラブルなコード

再利用可能な ListComponent パターンは、反復的な .map() ロジックを抽象化することで React リストのレンダリングを簡素化します。基本的なコンポーネント アプローチ、HOC、カスタム フックのいずれを使用する場合でも、このパターンによりコードがクリーンで再利用可能になります。

複数のリストを含む React コンポーネントを構築する場合は、リスト ロジックを外部に分離しながらコンポーネントをプレゼンテーションに集中させるために、次のパターンのいずれかを使用することを検討してください。

React で役立つ再利用可能なパターンは他に何がありますか?コメントで知らせてください！ 最後に読んでいただきありがとうございます