作为 react 开发人员，我们都遇到过需要渲染数据列表的场景。虽然 .map() 方法效果很好，但每次渲染列表时重复相同的逻辑可能会让人筋疲力尽，并导致代码重复。幸运的是，有一种更干净、可扩展的方法来处理这个问题，使用可重用组件、高阶组件或自定义挂钩。
在本文中，我将分享一种改进 react 中列表渲染的方法，确保您的代码保持 dry、可重用且更易于维护。
主要问题：重复的.map()逻辑
假设您正在为电子商务应用程序构建仪表板。仪表板包含多个列表：最近订单、最畅销产品、用户评论等。您需要使用 .map() 函数呈现每个列表。这是一个典型的例子：
const orders = [...]; // array of order datareturn ( {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 方法，您可以呈现如下所示的订单列表：
( )} />
登录后复制登录后复制
当我们需要渲染不同的列表（例如产品）时，可以通过不同的 renderitem 函数重用相同的 listcomponent：
( )} />
登录后复制
无需重写 .map() 逻辑 - 只需使用不同的数据和组件重用 listcomponent 即可。这使得代码库在增长时更易于维护。
结论：干净、可重用且可扩展的代码
可重用的 listcomponent 模式通过抽象重复的 .map() 逻辑来简化 react 列表渲染。无论您喜欢使用基本组件方法、hoc 还是自定义挂钩，此模式都可确保代码干净且可重用。
构建具有多个列表的 react 组件，请考虑使用其中一种模式来使组件专注于表示，同时将列表逻辑分离出来。
您发现 react 中还有哪些其他有用的可重用模式？请在评论中告诉我！ 最后感谢您的阅读
以上就是增强 React 列表渲染：干净且可重用的模式的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2668733.html
