增强 React 列表渲染：干净且可重用的模式

php中文网 2024-10-15 11:52:10

作为 react 开发人员，我们都遇到过需要渲染数据列表的场景。虽然 .map() 方法效果很好，但每次渲染列表时重复相同的逻辑可能会让人筋疲力尽，并导致代码重复。幸运的是，有一种更干净、可扩展的方法来处理这个问题，使用可重用组件、高阶组件或自定义挂钩。

在本文中，我将分享一种改进 react 中列表渲染的方法，确保您的代码保持 dry、可重用且更易于维护。

主要问题：重复的.map()逻辑

假设您正在为电子商务应用程序构建仪表板。仪表板包含多个列表：最近订单、最畅销产品、用户评论等。您需要使用 .map() 函数呈现每个列表。这是一个典型的例子：

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

return (
  
    {orders.map((order, index) =&gt; (
      <ordercomponent key="{index}" data="{order}"></ordercomponent>
    ))}
  &gt;
);

现在，您可以看到每个列表都重复 .map() 逻辑，类似的代码使您的组件变得混乱。这就是可重复使用的模式可以派上用场的地方。

解决方案：可重用的listcomponent

为了避免重复 .map() 逻辑，我们可以创建一个可重用的 listcomponent 来抽象映射逻辑，并允许我们根据数据渲染不同的组件。

function listcomponent({ data, renderitem }) {
  return (
    
      {data.map((item, index) =&gt; renderitem(item, index))}
    &gt;
  );
}

用法：

<listcomponent data="{orders}" renderitem="{(order," index> (
    <ordercomponent key="{index}" data="{order}"></ordercomponent>
  )} 
/&gt;
</listcomponent>

在此模式中：
renderitem：定义每个项目应如何渲染的函数

通过传递不同的 renderitem 函数，我们可以为任何列表重用 listcomponent。这会产生一个干净、可重用的组件，减少重复的 .map() 逻辑。

更灵活：高阶组件（hoc）

如果多个组件需要列表渲染，让我们通过创建一个高阶组件进一步采用此模式。 hoc 允许通过附加功能增强任何组件 - 在本例中为列表渲染。

function withlistrendering(wrappedcomponent) {
  return function listwrapper({ data, ...props }) {
    return (
      
        {data.map((item, index) =&gt; (
          <wrappedcomponent key="{index}" data="{item}"></wrappedcomponent>
        ))}
      &gt;
    );
  };
}

用法：

const enhancedordercomponent = withlistrendering(ordercomponent);

// now render the component with any data array
<enhancedordercomponent data="{orders}"></enhancedordercomponent>

通过使用 withlistrendering hoc 包装 ordercomponent，我们自动添加了列表渲染行为，而无需修改原始组件。这种模式使代码保持模块化。

对于 hook 爱好者：用于列表渲染的自定义 hook

react hooks 提供了一种封装逻辑的函数式方法。如果您更喜欢使用钩子，这里是使用自定义钩子渲染列表的示例。

function uselistrenderer(data, renderitem) {
  return data.map((item, index) =&gt; renderitem(item, index));
}

用法：

function ordersdashboard({ orders }) {
  const orderlist = uselistrenderer(orders, (order, index) =&gt; (
    <ordercomponent key="{index}" data="{order}"></ordercomponent>
  ));

  return {orderlist}&gt;;
}

这种方法将 .map() 逻辑移动到钩子中，使渲染逻辑与组件的结构分开。这是保持组件精简并专注于演示的另一种方法。

现实场景：电子商务仪表板

让我们将此模式应用到现实场景中。想象一下，您正在构建一个电子商务管理仪表板，其中需要呈现多个订单、产品、评论等列表。

使用 listcomponent 方法，您可以呈现如下所示的订单列表：

<listcomponent data="{orders}" renderitem="{(order," index> (
    <ordercomponent key="{index}" data="{order}"></ordercomponent>
  )} 
/&gt;
</listcomponent>

当我们需要渲染不同的列表（例如产品）时，可以通过不同的 renderitem 函数重用相同的 listcomponent：

<listcomponent data="{products}" renderitem="{(product," index> (
    <productcomponent key="{index}" data="{product}"></productcomponent>
  )} 
/&gt;
</listcomponent>

无需重写 .map() 逻辑 - 只需使用不同的数据和组件重用 listcomponent 即可。这使得代码库在增长时更易于维护。