首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
lihongming
V2EX  ›  Vue.js

写 React 的学了一下 Vue,真香

  •  
  •   lihongming · 61 天前 · 11317 次点击
    这是一个创建于 61 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最近接手一个项目,由于以前是用 Vue 写的,只好临时学了一下,结果发现……

    我艹,这玩意比 React 好用太多了。

    很多 React 里处理起来比较麻烦的问题,在 Vue 里都解决了。向 children 传参再也不用 Clone 了,Vuex 也比 Redux 好使,连路由参数都能直接传入 props……

    其实 React 的那些麻烦已经很多年了,只是老外似乎不太注重用户体验,不愿解决。还是中国同胞好啊!

    第 1 条附言  ·  60 天前
    没想到随手发个感慨能赚到这么多铜币,谢谢各位捧场!

    补充附言是想劝大家消消火,PHP 都能成为最好的语言,Vue 和 React 真没什么可吵的。

    更何况很多人争吵的点还局限在技术优劣上,这种思维方式可能是程序员职业生涯最大的局限。

    十年前我刚开始接客时,经常会在心里骂客户,觉得这人怎么这么笨,一点常识都没有,还想要那么高级的功能?现在我最喜欢的就是什么都不懂的客户,他们越笨,我赚钱的机会越大。只要把产品做得比别人更好用一点,就能轻易拿下客户。

    一款产品的成功需要很多因素,技术优劣只在其中占一部分,甚至是一小部分。这并不是说技术不重要,毕竟技术是个必要因素。但程序运行速度、技术开发难度对用户的影响,可能还不如一个设计优美的按钮大。

    很多人评论我是新手,确实,这两个框架我都没有深入研究过,都是实用主义,学到够用即止。我主用 React 也是因为 React 在北美更流行,更容易找工作、招人、赚钱,并不是觉得它比其他框架更“好”。

    什么叫“好”?这是个值得思考的问题。或者说,是一种选择。你可以深入研究追求性能,也可以偷懒求简把时间花在别的地方,毕竟时间是公平的,每个人都不比别人多。向左向右都是走,只要别停下学习的脚步就好。
    140 条回复    2020-05-14 20:51:31 +08:00
    1  2  
    pingfan
        101
    pingfan   61 天前
    @lihongming alipay hk 大量招前端,楼主要不要考虑
    xcatliu
        102
    xcatliu   61 天前   ❤️ 1
    React 中向 children 传参可以不用 Clone:
    ```js
    <children.type {...children.props} extraProp="Hello" />
    ```
    xcatliu
        103
    xcatliu   61 天前
    hurrytospring
        104
    hurrytospring   61 天前
    写了很多年 vue,一写 react 发现这东西真是神器,概念抽得一层一层的,各种花式的写法,插件,工具,能吹逼的地方太多了。。不像 vue,面试也没太多可以讲的。
    lambdaxs
        105
    lambdaxs   61 天前
    @no1xsyzy 好久没写 react 了,刚看了下 hooks,用法是蛮恶心的,背后的想法应该是为了处理副作用,函数式的一厢情愿就是把世界想的太美好了,而现实却充满副作用(手动狗头
    hantsy
        106
    hantsy   61 天前
    @namelosw >>> Ng 用没 React 和 Vue 人多是有原因的。
    这个只是国内的情况吧,世界范围用 Angular,React 的比例是不相上下的,自己可以看 Google 分析结果。国内对于大多数人来讲,使用 Angular,还要学习 TS 语言,Rxjs 等, 成本在那里,不懂 DI 还要了解 DI 。当然没有用 JS 来得直接,和写早期的 PHP 感觉一样,什么样的烂程序都可以跑。国内很多程序员,简单粗暴的东西用习惯了,比如 Mybatis 吧,放到世界范围看一下,有几个人在用? 国内招人的时候还不是标配。

    很多时候我是不完全写前端的代码,实在没碰到你说的这么多的问题,也没看 Angular 与 React 有那么差别。对于 Angular 和 React 两都我没有仔细研究过他们的原理,不大明白 VirtualDOM 和 ShadowDOM 的区别。从使用上讲,感觉 Angular 和 React 概念上可以互补,也有第三方项目,将 Angular DI 引入 React,Ionic 下也项目把 JSX 引入 Angular Component 中。

    之前项目,我们按照 React 中 Container/Presenter pattern 细分一个页面来写 Angular Components,感觉也 Angular 和 React 代码和概念上都很接近,更新按树型结构一个从上到下方向形成环流,感觉 Changes Detection 效率是差不多的。我实在不清楚你的无限刷是怎么弄出来的。

    开始很长一段时间我不怎么关注 react, 只是因为早期的 Reactjs 只能用 es5, 对于我来讲写 es5 太难了。直到出现 es6,react 开始支持 Compoent class,我才感觉有点吸引力。现在感觉 Reactjs 可能只在测试工具方面更胜一筹,jest, testing-library,cypress 比 Angular 官方推崇的 Karma/Jasmine/Protractor 要舒服一些。
    beyondex
        107
    beyondex   61 天前 via Android
    所以说,angular 在 3 年后等你们
    longjiahui
        108
    longjiahui   61 天前
    哈哈哈哈哈哈, 我看 vue3.0 去了
    namelosw
        109
    namelosw   61 天前
    @hantsy > 很多时候我是不完全写前端的代码,实在没碰到你说的这么多的问题,也没看 Angular 与 React 有那么差别。
    React 最大的区别是参数可以传递组件,然后在消费这个组件里面直接用 JSX 直接使用这个组件,在不添加新的 API 的情况下就可以用语言本身实现 Higher order component,render callback 之类的模式,大部分的抽象都可以用编程语言本身机制实现,而不需要某些特别的 API 。比如最常见的自造路由,或者外框固定,内部是动态组件,还要用外部的数据,或者渲临时染外面给内部的动态组件都非常简单。Angular 的解决这些东西的 API 很复杂,而且互相重叠,有时候还 cover 不了,ng-template,ng-container,ng-content 满天飞。

    > 我实在不清楚你的无限刷是怎么弄出来的。
    无限刷比如你绑定一堆 getter 就会经常无限刷了,前端一般都有大量的衍生数据,所以这些读模型怎么从写模型同步是前端的一个非常基本的问题。getter 是最直接的方式。React 的一般用 Selector 解决这个问题。Vue 和 Mobx 的机制可以精确全自动更新 getter 。Angular 只能更新完手动赋值,或者 Rx subscribe,都不是特别好用,一般需要 Ng*x 解决。

    > 国内很多程序员,简单粗暴的东西用习惯了,比如 Mybatis 吧,放到世界范围看一下,有几个人在用? 国内招人的时候还不是标配。
    对我来说 React 跟 Angular 比并不是 Mybatis 和 Spring 的关系,而是 Akka + Scala 和 Spring 的关系。React 模式还是要先进一代。Angular 只是克服了大部分缺点的 AngularJS 。
    no1xsyzy
        110
    no1xsyzy   61 天前
    @namelosw #98 这不是叫数据驱动么…… source 和 sink 是信号处理相关的术语,所以应该叫信号驱动?
    广义函数式…… 一说这是做函数式的很多人所不齿的,虽然我也不知道前端对这块看法是啥,好像 “弱纯性” 还算通融?

    CycleJS 我记住了
    namelosw
        111
    namelosw   61 天前
    @no1xsyzy 一般来说数据驱动指 D3 那种,逻辑可以用数据结构表示。

    函数式是一个大筐,啥都能往里放,有人 map filter 这些 HOC 就算。我觉得函数式的核心是一等函数+ADT,写好 ADT 和对应函数基本就能享受函数式组织逻辑的好处了,其他的部分都和平台和需求相关性太大(响应式,并发等等)。

    Source,Sink 应该是响应式,特别是流式处理常用的概念吧。虽然这个是从信号处理来的。前端比如 Cycle 会用这个 term,后端 Akka,Kafka,Spark 这些基本都会用。

    我还真没看到不齿的现象,我理解一般 stream 可以建模成 monad,如果 stream 是惰性的,那么对 stream 的 map / filter / flatMap 都算 pure operation 。就算不是 pure 的,这套类 monad 的 API 也是非常函数式的,因为它分离了作用(stream)和数据操作(传进去的 callback),这样你的数据操作既可以在 stream 里用,也可以在 list 或者 maybe 之类里用。

    追求纯的人是很多,但是现在恶意打击不纯的感觉已经很少了。
    gouflv
        112
    gouflv   61 天前 via iPhone
    就凭楼主还用 redux vuex 这些,就说明水平一般,没啥好讨论的了
    DOLLOR
        113
    DOLLOR   60 天前   ❤️ 1
    早期很不喜欢 react 的 class 语法,感觉 class 写法特别啰嗦,而且 API 名称又臭又长(如 componentWillMount 、componentWillUnmount )。现在有了 hooks 之后,感觉清爽好用多了。
    yanguango
        114
    yanguango   60 天前
    很不喜欢 Vue 或者 Angular 所谓的 ‘directive’, 存存的 JS 不好吗,为啥要搞什么 directive
    jakezh
        115
    jakezh   60 天前 via iPhone
    我们都是 vue 迅速出 mock up
    拿到项目后再 react 实现
    wework
        116
    wework   60 天前
    web 开发来说,php+mysql 目前还是很稳的
    murmur
        117
    murmur   60 天前
    @yanguango js 工程师和前端工程师的思路是不一样的,在没框架的年代,就开始各种 data-xxx 在元素上挂东西了(这其实也是避开闭包坑的一种途径),现在有官方 directive 了,用就是

    为什么要搞 directive,你应该问问 react,明明 html 里用的 class,他为啥给写成 className,你长得像 html/xml,写的是 js,到底是个什么东西
    wangxiaoaer
        118
    wangxiaoaer   60 天前
    @gouflv #112 你好, 请问高手应该用什么呢?
    fescover
        119
    fescover   60 天前 via Android
    又来了…
    这么说吧,Vue 面试就是问双向绑定原理,React 面试就是问 hooks 实现原理,实际工作中都是写 js,开发效率没什么区别,遇到什么坑加群问人都能快速解决。
    Hanggi
        120
    Hanggi   60 天前 via iPhone
    @bnm965321 请不要这么说话不负责任,react hook 不需要学是嘛,什么时候用 useState, 什么时候用 useMem,useEffect 怎么用,useCallback 有啥区别? draft 是啥,reducer 是啥?这些不看就能懂?
    sugars
        121
    sugars   60 天前
    @gouflv
    “就凭楼主还用 redux vuex 这些,就说明水平一般,没啥好讨论的了”
    感觉你就是在否定 redux 和 vuex 这两个好东西,你能写个更好点的开源一下吗,我们想用,求求了 555
    slert
        122
    slert   60 天前
    楼主说的还比较务实 其实就是各有所爱
    AX5N
        123
    AX5N   60 天前
    @sugars 他的这句话正确与否姑且不说,但他的意思类似于“喜欢用 python 的都是菜鸟,我们这些高手都是用 c++的”,如果他甩给你个 c++,你用不用?
    catinsides
        124
    catinsides   60 天前
    楼主的附言说的很好!
    hantsy
        126
    hantsy   60 天前
    @slert 最近和朋友聊到射雕电视剧,我一直觉得 83 年经典版本无法超越,其它版本几乎看不下去,内地最近 10 年翻拍感觉是在侮辱金庸先生。朋友觉得 95 朱茵版好看。神雕我觉得 95 的古天乐版本好一些,特别是李若彤的小龙女形象太有吸引力了,83 刘德华陈玉莲版本感觉太节省成本,场景实在太粗糙,加上音乐大不如射雕,另外还有翁去世了。

    技术可能也一样,先入为主的印象很难改变吧。
    glacial
        127
    glacial   60 天前
    我大 angular 在后面等着你们
    A388
        128
    A388   60 天前
    @toacnme 能告诉我什么样的业务用 react 比 vue 更合适,或者 vue 比 react 更合适。
    namelosw
        129
    namelosw   60 天前
    @hantsy 我试了这个代码在 jest 里能 log 出来 selected:one,two 。

    你这没有 package 和 import,猜不出来区别,感觉可能是 js-dom 之类的环境问题。

    我这里用的 ts-jest + js-dom + @testing-library/jest-dom,测试最前面加了 import '@testing-library/jest-dom'。
    namelosw
        130
    namelosw   60 天前
    @hantsy 感觉短期人们会有感情,放到长期就不能向电视剧一样有这种经典情怀了。

    现在有很多人对 Lisp 有情怀是因为 Lisp 虽然活得很长,但是到现在用起来不会输给其他语言。

    但是如果是 Cobol 之类的,虽然以前很流行,但是由于它的设计有限,现在基本被时代抛弃了。

    我们争论的这些技术和思想,在很久以后的主流看法就会完全不同。

    90 年代 Java 和 C++打得不可开交,现在基本上除了必须用 C++不可的地方,大部分人都会躲开 C++。C++严重的设计缺陷以前经常被选择性忽视,或者甚至反而被认为是优点。
    namelosw
        131
    namelosw   60 天前
    > 向 children 传参再也不用 Clone 了

    Clone 只是有 Ref 的时候才用,正常用 React 不应该出现 Ref,Ref 基本是 Hack 一些集成点才用的。

    <Something {...props} />不香嘛?
    hantsy
        132
    hantsy   60 天前
    @namelosw 全局有引入。如果是用原始的 select 是没问题的,https://www.v2ex.com/t/668905#reply1
    uxstone
        133
    uxstone   60 天前
    如果接手别人写的 Vue 业务代码,我看你还香不香。
    zhfish
        134
    zhfish   59 天前
    react 接近后端写法,hook 简直神器,非常清爽
    vue 接近原生写法,入门快,特性多

    四舍五入等于没什么差别
    lihongming
        135
    lihongming   59 天前 via iPhone
    @zhfish 我更喜欢 class 的写法,觉得这样更接近 Java 。不知喜欢 hook 的人都是用什么语言做后端的呢?为何会更喜欢函数式?
    Tdy95
        136
    Tdy95   59 天前
    vue 上手很舒服,就像自动挡的车,该做的都帮你做了,路由、状态管理库对新手的友好度都比 react 好太多,第一次看 reduce 的文档,一个 TODOS demo,模板代码吓死个人。

    react 给我最大的感受是对 TS 的支持,太香了。 用 hook 语法 + mobx 真香警告⚠️
    Tdy95
        137
    Tdy95   59 天前
    @lihongming 我感觉 hook 的出现是为了解决逻辑复用的,而不是硬要往函数式上靠吧
    mrant
        138
    mrant   59 天前
    都是搬砖的,这种引战的帖子就别发了,因为你知道会引战;
    还不如发帖探讨一些两者的实现原理、源码分析,能带来思考和答案
    leega0
        139
    leega0   59 天前
    又是引战帖。。。说实话,切图仔是不能接受 react 的 css 和 js 混写的,本能抗拒,之前干后端的应该更喜欢,但是你让他写 css,也头大,人的精力有限,你不可能专注所有领域。
    jinsongzhao
        140
    jinsongzhao   59 天前
    看看这篇文章吧,感觉 Vue3,已经开始超越 React 了: https://segmentfault.com/a/1190000022616689

    没有验证到那么细,但是看看也感觉不错:
    React Hook 和 Vue Hook 对比
    其实 React Hook 的限制非常多,比如官方文档中就专门有一个章节介绍它的限制:

    不要在循环,条件或嵌套函数中调用 Hook
    确保总是在你的 React 函数的最顶层调用他们。
    遵守这条规则,你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。
    而 Vue 带来的不同在于:

    与 React Hooks 相同级别的逻辑组合功能,但有一些重要的区别。 与 React Hook 不同,setup 函数仅被调用一次,这在性能上比较占优。
    对调用顺序没什么要求,每次渲染中不会反复调用 Hook 函数,产生的的 GC 压力较小。
    不必考虑几乎总是需要 useCallback 的问题,以防止传递函数 prop 给子组件的引用变化,导致无必要的重新渲染。
    React Hook 有臭名昭著的闭包陷阱问题(甚至成了一道热门面试题,omg ),如果用户忘记传递正确的依赖项数组,useEffect 和 useMemo 可能会捕获过时的变量,这不受此问题的影响。Vue 的自动依赖关系跟踪确保观察者和计算值始终正确无误。
    不得不提一句,React Hook 里的「依赖」是需要你去手动声明的,而且官方提供了一个 eslint 插件,这个插件虽然大部分时候挺有用的,但是有时候也特别烦人,需要你手动加一行丑陋的注释去关闭它。
    我们认可 React Hooks 的创造力,这也是 Vue-Composition-Api 的主要灵感来源。上面提到的问题确实存在于 React Hook 的设计中,我们注意到 Vue 的响应式模型恰好完美的解决了这些问题。

    顺嘴一题,React Hook 的心智负担是真的很严重,如果对此感兴趣的话,请参考:

    使用 react hooks 带来的收益抵得过使用它的成本吗? - 李元秋的回答 - 知乎
    https://www.zhihu.com/question/350523308/answer/858145147
    1  2  
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1753 人在线   最高记录 5168   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 16:48 · PVG 00:48 · LAX 09:48 · JFK 12:48
    ♥ Do have faith in what you're doing.