头图

2024年已经来临,React组件库的生态依然十分繁荣,本文会通过几个角度来拆解一下两个时下流行的组件库,通过客观的分析针对不同的角度来让使用者选择的时候更加的客观。

我们为什么要选择组件库?

一般来说每家公司在构建Web网站的时候都会选择一个组件库,组件库解决了大量的重复性工作,有非常好的开箱即用的组件,比如Select,Input,CheckBox等。这些组件通过自定义样式或者通过自带的美观的样式,可以使用他们快速制作精美的网站,而不需要从零开始构建大量的基础功能。

所以总结一下我们一般在两个场景使用组件库:

  • 外部工具:直接面向公司的用户,通常有公司自己的风格,更加美观和可响应。
  • 内部工具:面向公司内部的员工使用,设计美观即可,更加注重功能的快速实现。

下面我们会根据几个下面几个点来分析Shadcn UI组件库

  1. 设计
  2. 能力丰富度
  3. 不同场景下如何选择

内部工具场景的其他选择

ILLA Cloud是一个开箱即用的低代码工具,使用ILLA可以无需新建任何项目,使用简单的JS即可快速构建内部工具

  • Web & App Admin Panel
  • Data Dashboard
  • Customized B2B Tools

相对于使用组件库构建的场景下,使用ILLA Cloud可以10x速度构建上述工具,并且ILLA Cloud支持多人协作,可以团队内部多人协同编辑。

dashboard.png

Shadcn UI的特点

Shadcn的一些详细数据

  • ⭐ Github Star:37k
  • ⏬ NPM Download: 每周23,962次下载
  • 💪🏼 First Release Date:Mar 8, 2023

Shadcn UI是一个新诞生的项目,一经出现即在不到一年的时间里面获得了37k Star的好成绩,看来优秀的开源项目非常容易获得大家的认可。

shadcn_ui.png

设计

设计风格上Shadcn UI更加偏向商务风格,简洁的UI,非常适合内部工具的场景和一些严肃的应用类场景,Shadcn UI也支持自定义主题,不过看上去只有

  • 颜色
  • 圆角
  • 暗色模式 / 亮色模式
  • 预制的“默认风格”和“纽约风格”

对于细节的把握,比如字体和字号等是没有的,看上去在设计方面可控性相对来说只能满足基础的需求,不过对于内部工具场景是非常足够的,但是对于外部工具场景就有点捉襟见肘了。

在CSS上也同时支持了css和css-in-js方案,css-in-js方案使用的Stitches,css默认支持传统css,如果要使用less和sass可能需要二次配置,不能开箱即用

丰富度

组件的丰富度上是完全可以满足日常的开发需求,大多数的能力均支持并且有完整的回调,是一个比较完善的组件库。一些比较重要的能力Shadcn UI均支持

包括不限于

  • SSR
  • Accessibility
  • Animation

不过对于更加深入的需求比如超级丰富的图表和高性能的表格看上去是不支持的,相信随着项目的不断发展,项目方会持续不断的迭代。

我该如何选择

✅优势

如果你是一个对新事物充满好奇心的开源极客,对于开发的产品不需要高度定制化的UI,并且不存在复杂的数据处理需求,推荐使用Shadcn UI来进行开发。更加轻量,配置更简单,开箱即用,无需关心任何细节即可直接开发。

❌劣势

如果你对UI和组件有高度定制化的需求,并且希望使用Shadcn UI开发大型的项目,这里不推荐使用,Shadcn UI的定制化能力没有那么的强大。并且Shadcn不提供开箱即用的图表和高性能数据组件,这会导致你在这方面有需求的时候,需要寻找其他开源项目来做补充。


smallsohosolo
4 声望0 粉丝