V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
vdrapb
V2EX  ›  程序员

一些关于 React 的疑问

  •  
  •   vdrapb · 2023-08-23 10:32:47 +08:00 · 7022 次点击
    这是一个创建于 443 天前的主题,其中的信息可能已经有所发展或是发生改变。
    1. React 应该搭配什么前端 UI 框架使用,有没有推荐的
    2. 在调用接口服务的时候,用 axios 还是直接 fetch
    3. 如果不使用 UI 框架,有没有哪些推荐的 css 框架
    49 条回复    2023-10-13 13:48:23 +08:00
    veture
        1
    veture  
       2023-08-23 10:36:52 +08:00   ❤️ 1
    1.mui
    2.fetch
    3.tailwind
    NessajCN
        2
    NessajCN  
       2023-08-23 10:37:28 +08:00   ❤️ 1
    1. 自己写 style: https://github.com/tailwindlabs/headlessui , 现成 style: https://mui.com/material-ui/
    2. 都行,没区别。用 fetch 不兼容老 ie. 不过都用 react 了也不大可能还想兼容老 ie
    3. https://tailwindcss.com/
    zed1018
        3
    zed1018  
       2023-08-23 10:40:37 +08:00
    1. ant-design
    2. fetch
    3. tailwindcss
    vlgs
        4
    vlgs  
       2023-08-23 10:44:14 +08:00
    1. 主流都可。个人推荐 radix shadcn
    2. fetch, 可以试试 RSC
    3. tailwind
    surfwave
        5
    surfwave  
       2023-08-23 11:03:41 +08:00
    1. 建议自己写 css ,省事就 tailwindcss
    2. nextjs 可以选用 swr ,或者强绑定的 tRPC ,不用 nextjs ,啥都行,比如 axios ,fetch 这些
    3. tailwindcss ,刚开始会觉得很繁琐,用多了就能体会到好处了
    vdrapb
        6
    vdrapb  
    OP
       2023-08-23 11:12:56 +08:00
    @surfwave 看到你说 next.js ,那 next ui 可以用吗?我去官网看了一下,感觉挺不错的
    surfwave
        7
    surfwave  
       2023-08-23 11:16:00 +08:00
    @vdrapb 常用组件是有的。没有的组件只有自己手搓了。
    CodingNaux
        8
    CodingNaux  
       2023-08-23 11:21:38 +08:00
    1. 后台无脑 antd ,前台随便,看风格
    2. SWR ,fetcher 随便搭配,xhr 或 fetch 都可以( swr 可以当一个全局的 api 数据 store 挺方便)
    3. tailwind

    建议新项目直接从 full-stack React framework 开始
    RealJacob
        9
    RealJacob  
       2023-08-23 11:22:19 +08:00
    1 b 端项目还是 antd 吧,整体确实是方便。c 端项目就 headlessui ,mui
    2 fetch 和 axios 没区别
    3 tailwind
    mdn
        10
    mdn  
       2023-08-23 11:44:32 +08:00
    @vdrapb next-ui 是非官方的,就像 material-ui ,模仿官方效果做的
    gogogo1203
        11
    gogogo1203  
       2023-08-23 11:52:15 +08:00   ❤️ 2
    2023 年,React api call 不要直接用 axios 或者 fetch 做 async, 需要自己写各种 isLoading, isError. 用 react-query, 可以做 cache ,各种状态和结果直接一个 hook 就搞定了。
    gogogo1203
        12
    gogogo1203  
       2023-08-23 11:54:17 +08:00
    ui 的话,shadcn+tailwind 最近非常流行。 可以说开创了一个新的组件调用的方式,非常方便
    christin
        13
    christin  
       2023-08-23 11:55:08 +08:00
    antd axios 手写 css
    zq51500
        14
    zq51500  
       2023-08-23 14:42:01 +08:00
    感觉 @vanilla-extract/css 也蛮好用的
    lianchi
        15
    lianchi  
       2023-08-23 14:52:36 +08:00
    UI 框架选择:
    1 、unocss ,它和 Vue 搭配更好,不过在 Vite + React 上的配置稍微多一点点;
    2 、tailwindcss ;
    3 、同样是 tailwind 团队出的 Headless UI ,是基于 tailwindcss 的简单封装,兼具了自由、灵活、美观。

    接口调用:都行,一般都会基于现成的库(根据项目需要)做一层封装。
    plasticman64
        16
    plasticman64  
       2023-08-23 15:02:18 +08:00
    fetch ,axios 区别不大,如果以后要给别人维护的话推荐 axios ,会的人多点
    tkHello
        17
    tkHello  
       2023-08-23 15:39:21 +08:00
    什么类型的项目 项目不同 选型不同
    xiaoxinshiwo
        18
    xiaoxinshiwo  
       2023-08-23 16:05:10 +08:00
    @gogogo1203 #12 原子化吗?组件这么调用感觉有点麻烦了

    ```
    <AlertDialog>
    <AlertDialogTrigger>Open</AlertDialogTrigger>
    <AlertDialogContent>
    <AlertDialogHeader>
    <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
    <AlertDialogDescription>
    This action cannot be undone. This will permanently delete your account
    and remove your data from our servers.
    </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
    <AlertDialogCancel>Cancel</AlertDialogCancel>
    <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
    </AlertDialogContent>
    </AlertDialog>

    ```
    gogogo1203
        19
    gogogo1203  
       2023-08-23 16:14:35 +08:00
    @xiaoxinshiwo composition 我认为才是终极组件,按照自己的需要加减。 有些 component lib 一定要塞个按钮,多个 divider. shadcnui 大火不是没有道理的。
    xiaoxinshiwo
        20
    xiaoxinshiwo  
       2023-08-23 16:18:05 +08:00
    @gogogo1203 #19 确实灵活很多
    vdrapb
        21
    vdrapb  
    OP
       2023-08-23 16:38:04 +08:00
    @tkHello 个人学着做点东西
    iamppz
        22
    iamppz  
       2023-08-23 16:44:07 +08:00   ❤️ 2
    前面几楼基本都说了,个人感觉目前的最佳实践是 tailwindcss + radix shadcn ,慎重选择 antd 和 mui 这种不太容易自定义样式的框架
    gogogo1203
        23
    gogogo1203  
       2023-08-23 16:48:51 +08:00
    @xiaoxinshiwo 而且你可以随便改逻辑,样式和组合, 代码在你 src 文件夹里,不是 node_modules 。
    vdrapb
        24
    vdrapb  
    OP
       2023-08-23 16:51:14 +08:00
    @xiaoxinshiwo 但是自由度高了
    shui14
        25
    shui14  
       2023-08-23 17:27:30 +08:00
    next-ui 或者 material-ui 吧,它们有设计,否则你自己来,出活不尽人意,选一个标准模仿,上限不高,但是保证下限
    全栈就 nextjs trpc ,前端就随便 nextjs 或者 cra 都行,io 可以 react-query ,这样不用折腾状态,看样子你这小项目,也没用整
    LFL976
        26
    LFL976  
       2023-08-23 17:29:54 +08:00 via iPhone
    官方推荐了 next.js 咋样
    zogwosh
        27
    zogwosh  
       2023-08-23 18:01:49 +08:00
    1.无脑 ant design
    2.react query+axios
    3.tailwindcss +daisyui
    DICK23
        28
    DICK23  
       2023-08-23 18:02:53 +08:00   ❤️ 1
    1.随便都行,要快速就阿里系,antd antd pro-components,要搞定制化就 headui, 比如 shadcn-ui 这种
    2.简单点可以直接请求,fetch 自己封装一下就行,要考虑状态管理啥的可以用 @tanstck/react-query 这种包,还有 swr,这些和 axios 同时使用配合更好
    3.tailwindcss
    fyxtc
        29
    fyxtc  
       2023-08-23 18:20:40 +08:00
    居然没人推荐 chakra-ui ,那我推荐一下吧,mui 老牌子了,可以把 chakra-ui 当成下一代的 mui
    shunia
        30
    shunia  
       2023-08-23 21:52:56 +08:00
    mui 比 antd 拉多了,antd 不如 tailwindcss/unocss 自定义万物,虽然 antd 也可以自定义吧,所以 antd 和 css 自选一种。
    headlessui 之类的不太适合没有自己的设计系统的项目用,组装太费劲。
    next 系的 UI 设计系统里字太小,费眼,个人用没啥问题但是不适合商用不如 antd 。如果自定义设计系统又回到第一行了,选 css 。
    那个 shad 就是 vercel 的员工,所以他那库样式风格也那样。
    如果选了 css 可以适当配合 daisy ui 或者 flowbite 之类的库,但是我个人觉得意义不大。
    gzf6
        31
    gzf6  
       2023-08-23 22:05:18 +08:00 via Android
    不需要监听上传进度就 fetch,否则用 axios 之类的
    cbdyzj
        32
    cbdyzj  
       2023-08-23 22:47:05 +08:00
    1. mui
    2. fetch
    3. emotion
    maiyasu
        33
    maiyasu  
       2023-08-23 23:53:14 +08:00
    TailwindCSS 没有错的,如果你喜欢自己控制的话。
    shervinchen
        34
    shervinchen  
       2023-08-24 00:23:31 +08:00   ❤️ 1
    @shunia
    主要是看需求,B 端项目(比如管理系统)不追求高定制化的话,就适合用 antd/mui 这种把逻辑样式封装好的库

    如果是 C 端项目,要追求组件逻辑的高度定制化,那还是 radix/chakra 这种 headless 库好一点,可以自己用一些其他的逻辑库去组合实现想要的效果,灵活度很高(用 antd 这样的库,逻辑基本没法定制)
    shuding
        35
    shuding  
       2023-08-24 00:52:46 +08:00   ❤️ 1
    1. Radix UI:细节做到极致
    2. fetch:拥抱标准,同一份代码在主流浏览器和 Node.js 18+ 里都可以无依赖直接运行
    3. TailwindCSS:所有 React 环境和模式下都完美的一套方案(当然也可以用类似的原子化方案如 UnoCSS / Windi CSS )
    HaroldFinchNYC
        36
    HaroldFinchNYC  
       2023-08-24 01:43:09 +08:00
    React 应该搭配什么前端 UI 框架使用,有没有推荐的

    其实几个出名的框架都不错

    在调用接口服务的时候,用 axios 还是直接 fetch

    如果只是前端网页,fetch 足够
    如果有 ssr ,axios 很稳

    如果不使用 UI 框架,有没有哪些推荐的 css 框架

    bootstrap

    但还是用框架吧,更省事一些
    sakae010
        37
    sakae010  
       2023-08-24 09:50:07 +08:00
    1. to b 或者业务复杂,ui 定制化不高 antd; 业务不太复杂,ui 定制化高,选国外的,主要国内想法花里胡哨的,antd 很多好用的组件可以直接上,国外的封装的都简单,需要你再次封装费时间

    2. fetch + react query

    3. unocss + less
    wednesdayco
        38
    wednesdayco  
       2023-08-24 11:19:15 +08:00
    好多推荐 tailwind 的,只有我不喜欢用这类型的 css 框架的么?
    lidongyx
        39
    lidongyx  
       2023-08-24 11:33:08 +08:00
    我一般前端、后端都一起写,而且非常喜欢用套装
    比如 Nextjs ,就喜欢用 Nextui 、vercel 的全套服务;
    比如 Amplify ( Lambda )或 Firebase 也是能全套就尽量全套,而且这些都是全栈都有
    小程序也喜欢用原生的...然后小程序云开发的网页会有 antd
    接口都是用 axios
    tonytonychopper
        40
    tonytonychopper  
       2023-08-24 12:05:14 +08:00
    如果是那种后台项目,不考虑审美的情况下可以无脑 antd 吧,但是用它如果后续想改下风格会比较头疼
    xiaoxinshiwo
        41
    xiaoxinshiwo  
       2023-08-24 13:40:43 +08:00
    @gogogo1203 #23 谢谢,再问下,你如果在项目里面使用 shadcn , 你会对组件再次封装吗?
    speedofstephen
        42
    speedofstephen  
       2023-08-24 15:46:32 +08:00
    mantine 这个 UI 库不错
    gogogo1203
        43
    gogogo1203  
       2023-08-24 16:01:26 +08:00
    @xiaoxinshiwo 我记得我在上个项目碰到一个特殊的需求. 我在 shadcn 源文件下,copy and paste 一个组件,改了名字, 改了里面的一些逻辑。 使用的时候用我起的名字。 随意改动就是 shadcn 最大的优点。
    gogogo1203
        44
    gogogo1203  
       2023-08-24 16:04:37 +08:00
    @shuding 活捉 shu 大
    gogogo1203
        45
    gogogo1203  
       2023-08-24 16:11:22 +08:00
    当然 shadcn 用的 Radix UI + tailwind css
    abelmakihara
        46
    abelmakihara  
       2023-08-24 16:20:54 +08:00
    @wednesdayco 不用觉得自己是少数 v2 并不是主流
    vdrapb
        47
    vdrapb  
    OP
       2023-08-25 09:24:37 +08:00
    @shui14 好的,谢谢
    WhiteCat1111
        48
    WhiteCat1111  
       2023-10-10 09:48:26 +08:00
    @gogogo1203 我最近使用 npx shadcn-ui@latest init 报 connect ETIMEDOUT 是什么原因
    2chanriban
        49
    2chanriban  
       2023-10-13 13:48:23 +08:00
    @WhiteCat1111 解决了吗,好像国内用户会遇到这个问题,我是在 wsl 环境下跑这个命令才成功......
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2784 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 36ms · UTC 13:21 · PVG 21:21 · LAX 05:21 · JFK 08:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.