Taro.js现代UI组件库

chioio
591 阅读3分钟

srcube-taro.jpg

本文将分享我在开发一套适用于 Taro 小程序生态的 React 组件库时的架构设计、技术选型、项目结构与最佳实践。希望能为有类似需求的开发者提供参考。

一、项目背景

随着小程序生态的不断发展，越来越多团队选择 Taro 作为多端开发的解决方案。Taro 4.x 已经全面支持 React 18，配合 TailwindCSS 能极大提升开发效率和组件一致性。但市面上缺乏一套真正适合 Taro + React + TailwindCSS 的高质量组件库。因此，我基于以下技术栈自研了一套组件库，并采用 monorepo 进行管理。

二、技术选型

  • Taro.js：多端统一开发，支持小程序、H5、RN 等。
  • React.js：组件化开发，生态丰富，易于维护。
  • TailwindCSS：原子化 CSS，极致灵活，风格统一。
  • Weapp TailwindCSS：适配小程序的 Tailwind 方案。
  • Tailwind Variants：更优雅地管理组件样式变体。
  • Monorepo：多包统一管理，便于复用和维护。

三、项目结构

项目采用 monorepo 管理，结构如下：

  • apps
  • envs
  • packages
    • core
      • hooks [公共hook包]
      • theme [组件样式包]
      • ui [全局引入包]
    • ui [组件子包]
    • utils [工具包]
  • templates
    • ui [moon创建模版]

每个组件都是独立包，便于按需引入和 tree-shaking。

四、设计原则

1. 参考 HeroUI 和 Adobe React Spectrum

2. 组件独立、解耦

  • 每个组件都是独立 npm 包，支持单独发布和升级。
  • UI 与逻辑分离，遵循 presentation/container 模式。

3. 结构规范

  • 文件夹采用 kebab-case。
  • 组件主文件为 [component-name].tsx，导出文件为 index.ts。
  • 逻辑 hooks 单独放在 use.ts。
  • 样式统一写在 packages/core/theme/component/[component-name].ts，用 tailwind-variants 管理。

4. 代码可维护、易扩展

  • 充分利用 TypeScript 类型系统，提升开发体验。
  • 组件 props 设计灵活，支持自定义插槽、样式扩展。
  • 兼容小程序和 H5，适配多端。

五、组件开发最佳实践

1. 组件目录结构示例

以 dialog 组件为例：

packages/ui/dialog/
├── src/
│ ├── dialog.tsx # 组件 UI
│ ├── dialog-footer.tsx # Footer 子组件
│ ├── [other].tsx # 其他子组件
│ ├── use.ts # 组件逻辑
│ └── index.ts # 统一导出
├── package.json
├── README.md
└── ...

2. 组件实现要点

  • 插槽机制：支持自定义 Header/Footer，自动检测并渲染用户自定义内容。
  • Context 复用：如 Dialog 复用 Modal 的 context，保证状态一致。
  • 样式变体：通过 tailwind-variants 实现样式预设。
  • Logic/Render分离：组件采用Render/Logic分离设计理念。

3. 代码示例

以 Dialog 组件为例，支持自定义 Footer：

// Dialog 实现
import { Children, isValidElement } from 'react'
import DialogFooter from './dialog-footer'

const childrens = Children.toArray(children)
const content = childrens.filter(
  c => !(isValidElement(c) && [DialogHeader, DialogBody, DialogFooter].includes(c.type))
)
const CustomFooter = childrens.find(
  c => isValidElement(c) && c.type === DialogFooter
)

return (
  <Modal>
    <ModalHeader>{title}</ModalHeader>
    <ModalBody>{content}</ModalBody>
    {CustomFooter || <ModalFooter>默认按钮</ModalFooter>}
  </Modal>
)

4. Tailwind Variants 样式管理

所有组件样式都集中在 core/theme，用 tailwind-variants 管理，方便主题切换和统一风格。

// packages/core/theme/component/dialog.ts
export const dialog = tv({
  base: 'bg-white rounded-lg shadow-lg',
  variants: {
    size: {
      sm: 'w-64',
      md: 'w-96',
      lg: 'w-[32rem]',
    },
  },
})

六、开发体验与收获

  • 开发效率高：TailwindCSS + 组件化极大提升了开发速度。
  • 风格统一：所有组件样式集中管理，主题切换简单。
  • 易于维护：monorepo 管理，依赖清晰，升级方便。
  • 多端适配：Taro 让组件天然支持小程序、H5 等多端。

七、结语

这套组件库开发体验和可维护性都非常优秀。后续会持续完善更多高质量组件，欢迎关注和交流！

项目地址
GitHub - srcube-taro

小程序预览

如果你对 Taro + React + TailwindCSS 组件库开发有任何问题，欢迎评论区留言交流！

avatar
文章
阅读
粉丝