国内外组件库的一些差异

标题有些大哈哈!最近在两个项目里分别用了 antd 和 shadcn 两个 react ui 库,又对比了一下国内外的一些组件库,发现两边有一些不一样。

CSS 样式

不得不说老外总是能从一些我们已经不怎么关注的地方卷出一些东西来,Tailwind CSS 出现以后,国外组件库样式方案基本都是这一套了。

我自己尝试了一下,配合 vscode 插件无脑写样式确实挺爽的,虽然 classname 会超长。当然也有方式组合这些原子样式,但那味道就不对了。

因为这些样式最终都是构建到最终产物内,那就肯定是按需使用了😂。类似的 shadcn 组件也是这样用到哪个 install 哪个,还管什么摇树😆,而且组件和样式都暴露给你,随意修改。

再说说 antd,从 classname 过渡到 css in js ,但对使用者来讲并没有什么本质的变化,不过想覆盖样式的时候确实方便了许多。从 antd 里学到了 has where 这些 css 知识。

不过有一点是一致的,css variable 已经是共识了。

表单

都说国内已经搞大而全的超级 app,组件库也一样。通常表单都会附带一个表单实例,这个实例可以管理各个表单组件的 value onChange,负责收集表单组件的数据以及给表单组件赋值。同时会贴心的提供数组类型的表单,联动也会支持。我用的反正挺爽的。

国外的这些组件库,好像都不做这些事情。如果要管理表单,自己去 install 个 useForm。联动和复杂格式也都没有提供,组件库就真的只是 ui。

虽然他们内部不提供很多功能,但通常又会有大量的模板,或许国外模板付费意愿比较强吧。😂

API

用 shadcn 的时候,copy 代码的时候有个明显的感觉,就是量大。他们是真的奉行了组件要组合。比如 Drawer:

typescript 复制代码
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"

function App () {
  return (
    <Drawer>
      <DrawerTrigger>Open</DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Are you absolutely sure?</DrawerTitle>
          <DrawerDescription>This action cannot be undone.</DrawerDescription>
        </DrawerHeader>
        <DrawerFooter>
          <Button>Submit</Button>
          <DrawerClose>
            <Button variant="outline">Cancel</Button>
          </DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}

可以看到,什么关闭按钮、标题都会抽成一个组件。

国内一般都是提供一个数据的 props ,奉行了一切皆数据。即使像 radio 这种组合的组件,也会提供一个 options 的数据接口。

typescript 复制代码
import React, { useState } from 'react';
import { Button, Drawer } from 'antd';

const App: React.FC = () => {
  const [open, setOpen] = useState(false);

  const showDrawer = () => {
    setOpen(true);
  };

  const onClose = () => {
    setOpen(false);
  };

  return (
    <>
      <Button type="primary" onClick={showDrawer}>
        Open
      </Button>
      <Drawer title="Basic Drawer" onClose={onClose} open={open} closeIcon={} footer={}>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Drawer>
    </>
  );
};

export default App;

以上只是针对我看到的几个点做了对比,没有哪个好哪个坏,毕竟我都用的挺爽的。

最后!国内有些组件库,甚至是大厂的组件库,一个大厂还搞两个类似的没有创意的组件库,真的让人感觉丢人!


原文地址:sleepy-zone.github.io/blog/ui-dif...

相关推荐
FinGet9 小时前
那总结下来,react就是落后了
前端·react.js
王解12 小时前
Jest项目实战(2): 项目开发与测试
前端·javascript·react.js·arcgis·typescript·单元测试
AIoT科技物语1 天前
免费,基于React + ECharts 国产开源 IoT 物联网 Web 可视化数据大屏
前端·物联网·react.js·开源·echarts
初遇你时动了情1 天前
react 18 react-router-dom V6 路由传参的几种方式
react.js·typescript·react-router
番茄小酱0011 天前
ReactNative中实现图片保存到手机相册
react native·react.js·智能手机
王解1 天前
Jest进阶知识:深入测试 React Hooks-确保自定义逻辑的可靠性
前端·javascript·react.js·typescript·单元测试·前端框架
小牛itbull1 天前
ReactPress—基于React的免费开源博客&CMS内容管理系统
前端·react.js·开源·reactpress
~甲壳虫1 天前
react中得类组件和函数组件有啥区别,怎么理解这两个函数
前端·react.js·前端框架
用户8185216881172 天前
react项目搭建create-router-dom,redux详细解说
react.js
new Vue()2 天前
Vue vs React:两大前端框架的区别解析
vue.js·react.js·前端框架