继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

构建列表现在更简单了

30秒到达战场
关注TA
已关注
手记 463
粉丝 97
获赞 574

当有一个单一的真相来源时,列表就简单多了。

网站上到处都是列表,显示的内容包括——博客上的文章、产品的列表和帖子下面的评论,如此多的应用场景。

通常,你通常会在循环中显示每个单独的列表项,而这与我即将展示的抽象概念差不多 😉

有时候,我们希望在应用程序的不同部分对列表应用一些自定义逻辑,例如一些响应式设计、统一的排序和过滤,甚至在列表为空时显示消息提醒,甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒,甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。甚至在列表为空时显示消息提醒。

但这样一来,我们在每个列表的实现中都会重复同样的逻辑,但这绝不是好的处理方式。

怎么样把列表提取出来放到一个单独的组件里?

    import { ComponentProps, ReactNode } from 'react'  

    interface ListProps<T> extends ComponentProps<'ul'> {  
      data: T[]  
      renderItem: (item: NoInfer<T>) => ReactNode  
    }  

    export const List = <T,>({ data, renderItem, ...rest }: ListProps<T>) => {  
      return <ul {...rest}>{data.map(it => renderItem(it))}</ul>  
    }

上面的代码片段是一个非常基础的抽象组件,用React编写。
我们定义了一个带有数据接口、renderItem函数和原生ul HTML标签所有属性的List组件,使句子更加通顺。
(你还可以定义更多属性来适应你想要的列表类型,比如ulol),这样更加自然。

有趣的是,我们不希望 itemrenderItem 函数的回调中影响数据类型的定义,因为它们共享相同的泛型签名,所以我用了 TypeScript 的 NoInfer 工具类型。

如果你也发现了,这是一个通用组件,因为它不确定列表里的数据类型。我们通过typescript在renderItem函数里推断每个项目类型。如果你想了解如何使用NoInfer工具类型,可以观看这个视频

下面是一个如何使用上面定义的 List 组件的例子。
为了简单起见,我们这里只是展示一个产品列表。

    import { 列表 } from "path-to-list"  

    const 产品 = () => {  
      return (  
        <列表  
          data={[  
            { id: 1, name: '产品 1' },  
            { id: 2, name: '产品 2' },  
          ]}  
          renderItem={product => (  
            <li key={product.id}>  
              <div>{product.name}</div>  
            </li>  
          )}  
        />  
      )  
    }

如果你熟悉 React Native,你会发现他们使用相同的模式来渲染列表,不过这次他们自己提供了一个列表组件。

🦄 热爱开源,我创建了一个 GitHub 仓库,其中包含一些这样的抽象,并且未来我还会添加更多内容。
给它点个星吧,如果你发现某个抽象你喜欢,也欢迎提意见或建议。
希望你会喜欢。

趁现在,就这样了,趁我现在有你:

  • 想为本账号写客座文章,尽管告诉我!
  • LinkedInGitHub 上找我吧
  • 需要快速启动初创公司的模板吗?几天就能上线哦ShipFast
  • 请给我点杯咖啡 ☕️
打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP