CN自由之翼

浅谈 UI 组件库

我在某天尝试了几款不同的组件库之后，写下了一些想法

主流与小众

主流 UI 组件库，使用人群多，维护与开发稳定。如 Bootstrap、Element、Antd。通常在正常学习过程当中，就能知道它们存在。并不是说没有其他组件库了，而是先学习一种最常用的

后续我会将 UI 组件库简称为组件库

能够应对日常开发，再考虑其他个性化。

且主流组件库通常会影响后续出现的组件库，成了一个大众的模板，在 API 上便是大同小异

或者说，这几乎成了 UI 组件库的通用模板

个人组件库，比如 Naive UI。在我学习 Vue3 ，正在挑选合适的组件库时，就收到了推荐（尤大），效果确实非同凡响，官方文档也是跟段子站点一般，很“不正经”。但这种“不正经”的官方文档反而更受欢迎，这也是自由思想

不过，这种组件库很难在一开始就受到关注。甚至说成型之后，如果没有牛人推荐，很多人是不会知道它们的存在，哪怕这个组件库已经成型，可以应对所有开发

不存在最爱的，只是没有遇到更好的

相比之下，在大厂孵化出来的产物，比如最近出现的 Semi Design，社区知晓度会高很多

灵活与封装

某天，我想看看 Antd 之外的世界，于是看到了 Material-UI

后续简称 MUI

但是，那次给了我一种非常的可怕体验，感觉糟糕透了。有太多，感觉是伸手就来的东西，但是在 MUI 当中都是不存在的

比如

，很难想象一个组件库当中居然都没有。深入了解之后，发现验证都需要自己手写，这样的一种出界体验让我又缩回了 Antd 的怀抱。那时候就感觉很迷离，这样的组件为什么还有这么多人使用？

对比两者的下拉框组件，我将对其进行了提纯，仅展示基本使用

// MUI
import React from "react"  
import Select from "@mui/material/Select"  
import MenuItem from "@mui/material/MenuItem"  
  
export default function BasicSelect() {  
  return (  
      
  )  
}

// antd
import React from "react"
import { Select } from "antd" 

const { Option } = Select

export default function BasicSelect() { 
  return (
    
  )
);

当前来看差异不大，还有一个参数似乎应该存在，options

// 必要字段
export interface Option {  
  label: string  
  value: string  
}

可以通过传入参数动态渲染

import React from "react"
import { Select } from "antd" 

const { Option } = Select

export default function BasicSelect() { 
  return (