作为 react 开发人员，我们都遇到过需要渲染数据列表的场景。虽然 .map() 方法效果很好，但每次渲染列表时重复相同的逻辑可能会让人筋疲力尽，并导致代码重复。幸运的是，有一种更干净、可扩展的方法来处理这个问题，使用可重用组件、高阶组件或自定义挂钩。
在本文中，我将分享一种改进 react 中列表渲染的方法，确保您的代码保持 dry、可重用且更易于维护。
主要问题：重复的.map()逻辑
假设您正在为电子商务应用程序构建仪表板。仪表板包含多个列表：最近订单、最畅销产品、用户评论等。您需要使用 .map() 函数呈现每个列表。这是一个典型的例子：
const orders = [...]; // array of order data
return (
<>
{orders.map((order, index) => (
<ordercomponent key={index} data={order} />
))}
</>
);
现在，您可以看到每个列表都重复 .map() 逻辑，类似的代码使您的组件变得混乱。这就是可重复使用的模式可以派上用场的地方。
解决方案：可重用的listcomponent
为了避免重复 .map() 逻辑，我们可以创建一个可重用的 listcomponent 来抽象映射逻辑，并允许我们根据数据渲染不同的组件。
function listcomponent({ data, renderitem }) {
return (
<>
{data.map((item, index) => renderitem(item, index))}
</>
);
}
用法：
<listcomponent
data={orders}
renderitem={(order, index) => (
<ordercomponent key={index} data={order} />
)}
/>
在此模式中：
renderitem：定义每个项目应如何渲染的函数
通过传递不同的 renderitem 函数，我们可以为任何列表重用 listcomponent。这会产生一个干净、可重用的组件，减少重复的 .map() 逻辑。
更灵活：高阶组件（hoc）
如果多个组件需要列表渲染，让我们通过创建一个高阶组件进一步采用此模式。 hoc 允许通过附加功能增强任何组件 - 在本例中为列表渲染。
function withlistrendering(wrappedcomponent) {
return function listwrapper({ data, ...props }) {
return (
<>
{data.map((item, index) => (
<wrappedcomponent key={index} data={item} {...props} />
))}
</>
);
};
}
用法：
const enhancedordercomponent = withlistrendering(ordercomponent);
// now render the component with any data array
<enhancedordercomponent data={orders} />
通过使用 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) => (
<ordercomponent key={index} data={order} />
));
return <>{orderlist}</>;
}
这种方法将 .map() 逻辑移动到钩子中，使渲染逻辑与组件的结构分开。这是保持组件精简并专注于演示的另一种方法。
现实场景：电子商务仪表板
让我们将此模式应用到现实场景中。想象一下，您正在构建一个电子商务管理仪表板，其中需要呈现多个订单、产品、评论等列表。
使用 listcomponent 方法，您可以呈现如下所示的订单列表：
<listcomponent
data={orders}
renderitem={(order, index) => (
<ordercomponent key={index} data={order} />
)}
/>
当我们需要渲染不同的列表（例如产品）时，可以通过不同的 renderitem 函数重用相同的 listcomponent：
<ListComponent
data={products}
renderItem={(product, index) => (
<ProductComponent key={index} data={product} />
)}
/>
无需重写 .map() 逻辑 - 只需使用不同的数据和组件重用 listcomponent 即可。这使得代码库在增长时更易于维护。
结论：干净、可重用且可扩展的代码
可重用的 listcomponent 模式通过抽象重复的 .map() 逻辑来简化 react 列表渲染。无论您喜欢使用基本组件方法、hoc 还是自定义挂钩，此模式都可确保代码干净且可重用。
构建具有多个列表的 react 组件，请考虑使用其中一种模式来使组件专注于表示，同时将列表逻辑分离出来。
您发现 react 中还有哪些其他有用的可重用模式？请在评论中告诉我！ 最后感谢您的阅读
