头图

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

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

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

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

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

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

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

内部工具场景的其他选择

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

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

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

dashboard.png

MUI的特点

MUI的一些详细数据

  • ⭐ Github Star:90k
  • ⏬ NPM Download: 每周3,263,852次下载
  • 💪🏼 First Release Date:Nov 6, 2014

MUI作为一个老牌项目,从2014年维护至今,已经有将近10年的年龄,相信从稳定性的角度,肯定是开源项目里面的翘楚。并且超高的Star数和每周下载量可以保证社区是持续不断活跃的状态

mui.png

设计

设计风格上,MUI严格遵守了Google大名鼎鼎的Material Design设计风格。并且MUI支持的定制化能力非常丰富,可以满足对内对外的大部分场景,很多知名的开源项目也是使用MUI来构建前端页面的。对于大多数的功能,MUI基本上提供了最全面的支持。

除了常见的

  • 颜色
  • 圆角
  • 暗色模式 / 亮色模式

之外。MUI支持完整的任何字体,字号,颜色,内外边距的各种配置,作为一个构建了10年的项目,可以说功能是非常强大了。

在CSS的支持上MUI支持了一套自定义的系统,整体的布局使用了emotionjs来进行样式的调节,这可能存在一定的学习成本,不能做到直接开发,有些时候对于部分样式的修改还是需要查阅文档,这可能对一些开发者不够友好。

丰富度

MUI的组件类型非常的复杂,把整体组件划分为了几个纬度。

分别是

  • MUI Core:MUI的基础功能组件,包括大量的基础组件和样式系统
  • MUI X:MUI的高性能组件和复杂组件,包括高性能表格,图表等

如果你在开发一个非常复杂的系统可以使用MUI的全家桶解决方案,不过MUI X是一个收费组件库,可能需要为此而花费一笔订阅的费用。

MUI是一个比较重型的仓库,代码量和维护时间极长,可定制性非常高,比较适合大型的项目来使用。在MUI的仓库里面你可以找到大量的功能。

我该如何选择

✅优势

如果你想要开发大型项目,对于定制化有极高的要求,并且希望使用高性能的数据组件和图表组件,并且业务复杂度很高,而且愿意为此而订阅MUI X,推荐使用MUI来进行开发,灵活的配置和大量的组件可以完全满足你的需求。

❌劣势

如果你需要一个轻量级的框架,并且希望只使用css方案来调整布局,这里不推荐使用。MUI有一套完整的自有设计体系,存在一定的学习成本,并且Material Design的设计并不一定符合所有人的审美。如果存在这种情况,可以看看其他的开源仓库。


smallsohosolo
4 声望0 粉丝