封装代码是个技术活，你可能还不会

你好，我是alova的作者胡镇。喜欢alova的话，请给它来颗star🎈

你是不是也曾经有过这样的经历：产品不断提出新需求，而你则疲于在代码中“打补丁”，导致代码变得臃肿难维护？比如下面的小明。

小明封装的代码

小明封装了一个用户列表组件，本以为可以一劳永逸，但产品突然说：“小明，这个列表需要在A页面显示年龄，而其他页面不需要。”小明急忙在组件里加了showAge控制其显示。

// 列表组件的初步实现
function ListComponent({ list, showAge }) {
  // ...
  return (
    <table>
      {list.map((item) => (
        <tr key={item.id}>
          <td>{item.name}</td>
          {showAge && <td>{item.age}</td>}
          <td>{item.address}</td>
        </tr>
      ))}
    </table>
  )
}

没过几天，产品又说：“小明，H页面用户列表我们得隐藏下手机号，小明心里开始嘀咕了“啥玩意需求啊…”，但没办法，只能继续又加了个showPhone。

你是不是觉得小明很无助？但其实，需求总是多变的，总不能老怪产品让你加班，那么，怎么封装更好呢？

我将在4月14日20:00来一起聊聊封装，纯分享啥也不卖

内容大纲

在直播间我们一同来探讨以下的话题，如果你也感兴趣，诚挚邀请你来一起聊聊。

后序

如果想了解alova的话，可以访问官网，在这里，你可以找到更详细的文档和示例代码，帮助你更好地理解和使用这个工具。

有任何问题，你可以加入以下群聊咨询，也可以在github 仓库中发布 Discussions，如果遇到问题，也请在github 的 issues中提交，我们会在最快的时间解决。

• 加入微信群参与交流
• 加入在 Discord 社区参与交流

同时也欢迎贡献你的一份力量，请移步贡献指南。

原文链接：https://juejin.cn/post/7356447891823312905 作者：胡镇alovajs