React UI组件库的选择

前言

主要对比 Antd, ChakraUI, Shadcn 三个主流组件库的区别， 以及他们的优缺点。

选择的原则

首先技术永远是为产品服务的。我们要根据开发的内容来选择技术。

对产品技术的认知：

  • 应用的类型，是前台展示型，还是后台应用
  • 重视组件功能性，还是重视组件的美观度和可定制性的
  • 是否需要自适应， 是否需要兼容移动端
  • 有无设计规范， 是否有设计师参与
  • 开发的灵活性， 是否需要自定义组件

对组件库的要求

  • 完整的设计规范
  • 组件库的丰富程度，数量
  • 样式的自定义程度
  • 开发的灵活性

设计规范

  • Antd: 传统风格， 适合企业后台管理系统
  • ChakraUI: 提供了 Figma 设计文件
  • Shadcn: 也提供了 Figma 设计文件

组件数量

Antd > Chakra UI > Shadcn

开发的灵活性

  • Antd: 组件只支持固定 Props
  • Chakra UI: 组件底层都是 chakra 的原子组件，都支持 style props， 很多组件封装，其实就是不同的 Box 组件预设了样式。
  • shadcn: 组件库是在本地的，又是基于 tailwindcss 的， 非常灵活

服务端渲染支持

主题定制

  • Antd: v5 也提供了更加灵活的方案： 定制主题 - Ant Design
  • Chakra UI: 提供类似 tailwindcss 的方式，扩展 theme
  • shadcn: 就是基于 tailwindcss 的， 可以直接修改 tailwindcss 的配置文件

技术总结

  • 快速验证，迭代项目， 选择 Antd， 组件多。结合其他 headless UI 的时候，样式不太好写。
  • shadcn 是基于 RadixUI， 使用 tailwindcss 封装的组件库, 适用范围最广，组件数量少， 方便结合其他 headless UI 组件
  • ChakraUI ，是自己一套原子组件，配合 emotion 提供样式， 写法上更加灵活， 组件数量也中等，只是暂不支持 SSR。结合其他 headless UI 的时候，样式不太好写。
  • 其他组件， 最近 tailwind 官方也推出了个类似 shadcn 的组件库， Introducing Catalyst: A modern UI kit for React - Tailwind CSS， 保持关注吧。