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

一些关于 React 的疑问

  •  
  •   vdrapb · 306 天前 · 6540 次点击
    这是一个创建于 306 天前的主题,其中的信息可能已经有所发展或是发生改变。
    1. React 应该搭配什么前端 UI 框架使用,有没有推荐的
    2. 在调用接口服务的时候,用 axios 还是直接 fetch
    3. 如果不使用 UI 框架,有没有哪些推荐的 css 框架
    49 条回复    2023-10-13 13:48:23 +08:00
    veture
        1
    veture  
       306 天前   ❤️ 1
    1.mui
    2.fetch
    3.tailwind
    NessajCN
        2
    NessajCN  
       306 天前   ❤️ 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  
       306 天前
    1. ant-design
    2. fetch
    3. tailwindcss
    vlgs
        4
    vlgs  
       306 天前
    1. 主流都可。个人推荐 radix shadcn
    2. fetch, 可以试试 RSC
    3. tailwind
    surfwave
        5
    surfwave  
       306 天前
    1. 建议自己写 css ,省事就 tailwindcss
    2. nextjs 可以选用 swr ,或者强绑定的 tRPC ,不用 nextjs ,啥都行,比如 axios ,fetch 这些
    3. tailwindcss ,刚开始会觉得很繁琐,用多了就能体会到好处了
    vdrapb
        6
    vdrapb  
    OP
       306 天前
    @surfwave 看到你说 next.js ,那 next ui 可以用吗?我去官网看了一下,感觉挺不错的
    surfwave
        7
    surfwave  
       306 天前
    @vdrapb 常用组件是有的。没有的组件只有自己手搓了。
    CodingNaux
        8
    CodingNaux  
       306 天前
    1. 后台无脑 antd ,前台随便,看风格
    2. SWR ,fetcher 随便搭配,xhr 或 fetch 都可以( swr 可以当一个全局的 api 数据 store 挺方便)
    3. tailwind

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

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

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

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

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

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

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

    bootstrap

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

    2. fetch + react query

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