作为 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 中还有哪些其他有用的可重用模式？请在评论中告诉我！ 最后感谢您的阅读