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

单纯的 CRUD 项目,你会选择 Vue 还是 React?

  •  1
     
  •   iloveyouso · 2018-10-24 17:01:19 +08:00 · 5845 次点击
    这是一个创建于 2206 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我先来一个,我选 Vue,原因如下:
    1,Vue 有官方支持的<keep-alive>,React 没有或者是要自己去实现一遍,实现不好还容易踩坑,没有大量使用案例做经验支撑。而且 Vue 的 keepalive 组件还可以保持所有 DOM 各个细节的状态,React 必须把 state 都放在 store 里面,繁琐的要死
    2,Vue 也有 JSX 支持,而且 slot 比 React 传入的 JSX props 不知道要直观到哪里去了,看起来很直接方便
    3,Vue 管理依赖跟踪很方便,不会像 React 那样又要 setState 又要 this.props.onChange(),而且 Redux 搞一个状态跟踪要弄三处地方。如果我一个页面有二十来个状态,我就得搞二十来个 reducer。
    4,React-Router V4 的 BUG 可以列一长清单,之前踩过好几次坑,比如 this.location.pathname 为空,跳转之后拿不到对应的 params,后来查询发现都是官方自己的 bug 问题。在 Issue 里,可以看到对 V4 的路由 BUG 描述那是十个手指头都列不完,每个 BUG 都可以说比较致命,甚至还有作者和提 Issue 的互骂。</keep-alive>

    最主要是 keep-alive 让我一直离不开 Vue,这个特性是 Vue 官方支持且经过大量使用的。
    我也曾查询 React 官方对这一特性是否愿意支持,很遗憾他们提供的建议都是让开发者自己造个轮子(比如设置为 display:none),不愿意官方统一开一个类似 React-Router 这样的项目,让使用用户更集中,BUG 更容易被发现,你一个造轮子的项目我一个造轮子的项目,这样的开源库谁敢用啊,无语。

    所以 Vue 让我感觉就是一个词:务实。技术风格就像 Java 那样,每个 Api 都经过几十万用户的使用验证,不管对个人 solo 还是团队开发,都能稳步推进项目进度,就算是出问题了也能很快排查出来,不用花费无用功在性能啊 store 同步身上。

    而 React 给我的感觉就是:非常 hack 和先进前卫。喜欢偏重概念和思想,虽然看起来很 good 的,但是对一个项目各方面的支持比不上 Vue,耗费大量时间精力做出来的东西,性价比并不高。做着 React 总是没有那种稳定的感觉,而且感觉自己像个码农一样,如果不是十几人起步的团队,我真的不会选择 React,太过于学术派了,不切和开发者体验,那真的是很不好用!!

    所以问题来了,你们在做 CRUD 项目时,会用 React 还是 Vue?

    56 条回复    2019-01-17 13:44:24 +08:00
    allce231
        1
    allce231  
       2018-10-24 17:09:52 +08:00
    vue
    whypool
        2
    whypool  
       2018-10-24 17:12:23 +08:00
    vue
    Lax
        3
    Lax  
       2018-10-24 17:14:47 +08:00
    听听大家怎么说,有个 electron 的项目不知道怎么选
    tremblingblue
        4
    tremblingblue  
       2018-10-24 17:15:50 +08:00
    都不选,rails/django
    jerrry
        5
    jerrry  
       2018-10-24 17:17:17 +08:00
    感觉又要战起来了
    Wincer
        6
    Wincer  
       2018-10-24 17:18:25 +08:00 via Android
    前面都说 Vue,那我来说一个 react (#滑稽
    garlics
        7
    garlics  
       2018-10-24 17:20:04 +08:00 via iPhone
    选 PHP (#滑稽
    riverxs
        8
    riverxs  
       2018-10-24 17:27:35 +08:00
    其实选楼主选 Vue 一个原因就够了,更熟悉 Vue,其他论据都是站不住脚的,我要选 React 我也能列出一大堆 Vue 和生态的缺点
    90928yao
        9
    90928yao  
       2018-10-24 17:28:55 +08:00
    React-Router 现在没这么搞人的 bug 了吧
    我个人喜欢 React
    xuhaoyangx
        10
    xuhaoyangx  
       2018-10-24 17:29:46 +08:00
    后端+手机移动端开发来说,我选择 jq
    Keyes
        11
    Keyes  
       2018-10-24 17:31:25 +08:00
    @Lax 刚好我也在公司开了个 electron 坑,好在比较简单就是一个 OpenVPN 客户端,目前在用 react+antd
    iloveyouso
        12
    iloveyouso  
    OP
       2018-10-24 17:33:12 +08:00
    @riverxs 不管是性能还是效率还是周边,我感觉 Vue 更贴近开发者的角度,没有那么多理论的东西。
    我指出来的这些应该不只是我个人的痛点,也是很多开发者的痛点,相比之下,我找不出为什么放着 vue 不用跑去用 react 的理由
    asAnotherJack
        13
    asAnotherJack  
       2018-10-24 17:33:26 +08:00
    我选韩信
    qingzhan
        14
    qingzhan  
       2018-10-24 17:35:34 +08:00
    引战嗦,就像八楼说的你只是更熟悉 vue 而已,选自己喜欢的就好
    tyrealgray
        15
    tyrealgray  
       2018-10-24 17:35:46 +08:00
    当然是选 jquery 了啊。

    还是个人非常喜欢 redux,自己已经开始用在非前端的项目中了。react 和 redux 结合起来用的那些繁琐其实可以看成是一种强制的规范,挺合理的,再差的新人改 reducer 里面的东西的时候,只要跑通了,基本上你也不担心会有什么特别大的问题。
    wu67
        16
    wu67  
       2018-10-24 17:36:00 +08:00
    好吧, 作为一只小渣渣, 我选择 vue.js, 毕竟我就只会这个
    lijsh
        17
    lijsh  
       2018-10-24 17:37:10 +08:00
    一个滚动加载下一页的列表,当滚动到第 n 页的时候,点进某个详情再后退,大部分 SPA 就回到顶了,单这个需求来看,keep-alive 好用很多;不过因为是把列表缓存起来,item 太多的话,性能肯定有影响。
    as80393313
        18
    as80393313  
       2018-10-24 17:40:44 +08:00
    Vue 大发好啊。全局的 bus,react,还没有想到这么实现。
    LokiSharp
        19
    LokiSharp  
       2018-10-24 17:45:18 +08:00 via iPhone
    我选 Angular
    hosea
        20
    hosea  
       2018-10-24 17:56:02 +08:00
    小的用 Vue 大型的用 React
    deepdark
        21
    deepdark  
       2018-10-24 17:58:24 +08:00
    angular
    rockjike
        22
    rockjike  
       2018-10-24 18:00:42 +08:00 via Android
    react 会更加灵活
    feverzsj
        23
    feverzsj  
       2018-10-24 18:02:27 +08:00
    那你让后端干什么
    blackboom
        24
    blackboom  
       2018-10-24 18:05:55 +08:00
    以前我会选 Vue 目前我选 Angular
    xiaojie668329
        25
    xiaojie668329  
       2018-10-24 19:19:43 +08:00
    我 vue 用得很多,算是比较熟悉了。但是新项目都打算用 react 了,vue 对 TS 实在不大好,特别是写测试的时候。当然也可能是我不熟。
    jiyinyiyong
        26
    jiyinyiyong  
       2018-10-24 19:53:07 +08:00
    想当年 React 也曾是一个油头粉面的屠龙少年...
    leconio
        27
    leconio  
       2018-10-24 19:57:19 +08:00 via Android
    我选择 angular🤔
    PythonAnswer
        28
    PythonAnswer  
       2018-10-24 20:03:30 +08:00 via iPhone
    后端模板 哈哈
    Bryan0Z
        29
    Bryan0Z  
       2018-10-24 20:06:25 +08:00 via Android
    Vue,作为一个后端只会这个
    jlkm2010
        30
    jlkm2010  
       2018-10-24 20:46:36 +08:00
    我选 angular
    gouflv
        31
    gouflv  
       2018-10-24 20:59:35 +08:00 via Android
    react 组件直接基于 class,继承、抽象类都可以做。vue 是自己定义的一套对象结构声明,用 extend 和 mixin 实现。显然前者的 IDE 支持更好。

    虽然 vue 也能用 class-component 实现 oop 的风格,但是毕竟不是官方,用起来总觉得别扭。还是得等 vue3.0 官方支持。

    jsx 我是排斥很久的了,但是复杂度真到了那个程度,template 这种半封闭的结结构还真驾驭不了。

    最后,vue 的好处当然是简单,足够应付轻量的场景。react 要做到简单就要自己踩很多坑,现在最顺手的是 reach-router 和 mobx。
    gouflv
        32
    gouflv  
       2018-10-24 21:05:32 +08:00 via Android
    vue 的曲线平,但是上限低。楼主对 vue 有好感很正常,但是长期来看学习 react 或者 ng 才是有能力上升的空间。
    Wolfx
        33
    Wolfx  
       2018-10-24 21:07:52 +08:00
    vue
    xiaqi
        34
    xiaqi  
       2018-10-24 21:55:02 +08:00 via Android
    react
    作为后端人员来说,似乎更喜欢 react 的风格🤔🤔🤔
    dbpe
        35
    dbpe  
       2018-10-24 21:58:31 +08:00
    react 大法好。。
    valueOne
        36
    valueOne  
       2018-10-24 21:59:01 +08:00 via Android
    vue 不解釋
    riverxs
        37
    riverxs  
       2018-10-24 22:20:27 +08:00   ❤️ 1
    @iloveyouso 这个论题涉及一些价值观的东西,但还是需要理性评价一下你给出的论据
    1. 对 react 设计理念有更好的理解后,就会知道<keep-alive>这种是应用组件的事,是 ant-design 类似的东西来提供的,React 必须把 state 放在 store 里面(我理解你要说的是用上 redux ),这个首先就是错的,只有必要的 state (大多数)才会放到 store,有些 state 放到 store 反而是错误的实践,为啥要这么做?做过有复杂状态的应用就会知道这是一条极大提高工程质量的建议
    2. slot 比 JSX props 直观?这是极为主观的感受,就我而言用 JSX 比 template 要来的直观易用,表达能力更强
    3. 状态的依赖管理 Vuex 和 Redux (或者说 Dva/Rematch )可以说是极为相似,但 Vuex 学习成本更低是事实
    4. 性能, react fiber 了解一下,况且性能两者基本没差别,生态问题,React 更繁荣,选择更多,但差距不大,效率问题,这个和个人技术熟练度和业务熟悉度更高度相关(和具体技术真的强相关?)
    5. 学术 Vs 务实,React 是核心概念极简(自由发挥空间大),Vue API 更多(意味使用方便),但也不会像是 Lisp Vs Java 那样,二者皆是工程务实的,做起项目来两者都是更多的关注数据流和组件化
    6. 做着 React 总是没有那种稳定的感觉,其本质还是熟悉程度问题

    7. 关于如何做技术选择,真的和技术本身优劣强相关?个人觉得和个人技术品味、经验、团队更相关些
    kisnows
        38
    kisnows  
       2018-10-24 22:30:25 +08:00
    React,jsx 表达能力更强,上限更高。
    rhyttr
        39
    rhyttr  
       2018-10-24 22:30:52 +08:00
    Angular +1
    chenxu
        40
    chenxu  
       2018-10-24 22:47:55 +08:00 via Android
    angular 路过
    binaryify
        41
    binaryify  
       2018-10-24 23:09:14 +08:00 via Android   ❤️ 1
    选择 Vue
    不喜欢 React 把问题都丢给开发者,连路由都没有官方的,React-router 讲真一点都不好用,为了组件化而组件化,问题一大堆,没有 keep-alive 也是个大问题,另外做页面过渡动画也没有 Vue 那么简单
    binaryify
        42
    binaryify  
       2018-10-24 23:10:05 +08:00 via Android   ❤️ 1
    还有 React 子组件和父组件通信太麻烦
    iloveyouso
        43
    iloveyouso  
    OP
       2018-10-24 23:43:31 +08:00   ❤️ 2
    @riverxs
    1,我并不主张 redux 把所有 state 都放到 store 里面,相反我更希望把组件紧紧关联的自我状态交由组件自己去管理。我所纠结地在于,一个组件在当前页面被用户操作之后,组件状态改变了,更换页面回来会发现 state 居然被清空了。
    从用户角度来说,这是并不友好的。我原本用户操作的状态(比如一个 tab 标签选择某一个高亮),居然跳回页面就恢复原样了,这是反直觉的。如果需要实现 keep-alive,你就必须通过一些状态管理库来管理 store 来同步状态。这当然是最佳实践而且优雅至极的方式了,但是对于一些 CRUD 项目来说,十几个 Tab 标签页,五六个 table 并且带有过滤高亮用户点击高亮行功能,渲染起码 2 秒的三四个 echarts 实例,如果你要在页面跳转回来渲染的成本需要多高?就不说这个渲染的问题,就算你能把所有状态都保存下来,做好了各种数据同步的工作->重新获取 store 值->判断是否需要渲染->在组件 mount 的时候做一些初始化的工作,我绝对相信这个性能会大大打折扣,甚至比不上 jQuery 时代的页面,舍本逐末了。
    keep-alive 有缓存页面太多导致卡顿的缺点,redux 也有不缓存页面节省空间的优点。但是我觉得不能认为因为 react 可以通过数据管理库来管理状态,从而忽略掉 keep-alive 这一方便开发者的特性。无论是小的 CRUD 项目,还是大型的 ERP 企业应用,keep-alive 这个特性绝对是值得关注的。就我所知的确有开源的 react-keeper,但这并不是官方组件,说不定哪天跟不上 react-router 的搭配,从开发者角度来看并不令人信任。
    2,的确是我主观了,各有所好吧
    3,都是参考 flux 思想的,Vuex 学习成本的确更低
    4,性能两者都是没有明显差距的,能拉开开发效率和性能的恰恰路由、状态管理库这些周边生态。一个开发者如果以相同时间和精力去做一个项目,我相信 Vue 绝对是一把瑞士军刀,无论从:sync 这类语法糖,还是周边生态的完备和用户体验良好,更剩于 react。
    5,React 自由发挥空间大,这意味着开发者需要花费时间去精心搭配工具链,如果不巧踩坑了(参考 RR4,这个发布多久还像测试版),又需要花费精力去修复。自由也是有代价的,也正因为这些代价难免让人感受到 React 不安全,从项目技术稳妥和效率上来看,Vue 无疑是更佳。
    Lax
        44
    Lax  
       2018-10-25 09:24:20 +08:00
    看楼上大佬的对比评价,感觉我这种非专职前端的新手用 vue 足够了
    azh7138m
        45
    azh7138m  
       2018-10-25 09:33:51 +08:00 via Android
    > 如果我一个页面有二十来个状态,我就得搞二十来个 reducer。

    那还是用 vue 吧,哪个熟悉用哪个。
    KuroNekoFan
        46
    KuroNekoFan  
       2018-10-25 09:34:44 +08:00 via iPhone
    vue 记忆成本比较高,各种奇奇怪怪的指令
    wanghao2018
        47
    wanghao2018  
       2018-10-25 09:59:58 +08:00
    @KuroNekoFan vue 的指令还好吧,angular 的指令才是多。适当的指令挺方便的 react 面条式的 从上写到下。
    sm1314
        48
    sm1314  
       2018-10-25 10:21:38 +08:00
    前几天写了个 crud 的后台管理系统,第一次接触前端,用的基于 reactjs 的 react-admin 框架,发现一个很奇怪的问题,测试的时候一切正常,编译部署之后首次加载正常,刷新后样式错乱。。。如果有下次的话我想我会去试下 vue
    shuhao
        49
    shuhao  
       2018-10-25 11:20:18 +08:00
    react + antd 写后台管理系统简直不能更方便;喜欢 jsx 语法,比较灵活
    binaryify
        50
    binaryify  
       2018-10-25 11:36:37 +08:00
    @KuroNekoFan 常用的就那几个指令,而且都是实用性的
    binaryify
        51
    binaryify  
       2018-10-25 11:39:30 +08:00
    @shuhao 后台管理系统表单多,用 React 很痛苦的
    lovelybear
        52
    lovelybear  
       2018-10-25 13:25:12 +08:00 via Android
    原生 js
    TangMonk
        53
    TangMonk  
       2018-10-25 15:28:50 +08:00
    SonataAdmin 自动生成后台
    wzhndd2
        54
    wzhndd2  
       2018-10-25 16:38:07 +08:00
    jquery 不好用吗?
    Lax
        55
    Lax  
       2018-10-25 21:26:10 +08:00
    * mw.js 还是 electron ?
    * vue 还是 react ?
    * localStorage 还是 sqlite ?
    tuomasi
        56
    tuomasi  
       2019-01-17 13:44:24 +08:00
    antd 虽然犯过错 但是 react 确实是屠龙刀 antd 还是值得一用的 >>>>>>>>偏右君 你还安好?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5663 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 41ms · UTC 01:51 · PVG 09:51 · LAX 17:51 · JFK 20:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.