写 React 的学了一下 Vue,真香

2020 年 5 月 12 日
 lihongming

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

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

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

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

21513 次点击
所在节点    Vue.js
140 条回复
sugars
2020 年 5 月 13 日
@gouflv
“就凭楼主还用 redux vuex 这些,就说明水平一般,没啥好讨论的了”
感觉你就是在否定 redux 和 vuex 这两个好东西,你能写个更好点的开源一下吗,我们想用,求求了 555
23wEJhKrPYz2uRF5
2020 年 5 月 13 日
楼主说的还比较务实 其实就是各有所爱
AX5N
2020 年 5 月 13 日
@sugars 他的这句话正确与否姑且不说,但他的意思类似于“喜欢用 python 的都是菜鸟,我们这些高手都是用 c++的”,如果他甩给你个 c++,你用不用?
catinsides
2020 年 5 月 13 日
楼主的附言说的很好!
hantsy
2020 年 5 月 13 日
hantsy
2020 年 5 月 13 日
@slert 最近和朋友聊到射雕电视剧,我一直觉得 83 年经典版本无法超越,其它版本几乎看不下去,内地最近 10 年翻拍感觉是在侮辱金庸先生。朋友觉得 95 朱茵版好看。神雕我觉得 95 的古天乐版本好一些,特别是李若彤的小龙女形象太有吸引力了,83 刘德华陈玉莲版本感觉太节省成本,场景实在太粗糙,加上音乐大不如射雕,另外还有翁去世了。

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

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

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

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

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

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

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

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

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

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

react 给我最大的感受是对 TS 的支持,太香了。 用 hook 语法 + mobx 真香警告⚠️
Tdy95
2020 年 5 月 14 日
@lihongming 我感觉 hook 的出现是为了解决逻辑复用的,而不是硬要往函数式上靠吧
uTuw2C6uf964Kx6o
2020 年 5 月 14 日
都是搬砖的,这种引战的帖子就别发了,因为你知道会引战;
还不如发帖探讨一些两者的实现原理、源码分析,能带来思考和答案
seven2f
2020 年 5 月 14 日
又是引战帖。。。说实话,切图仔是不能接受 react 的 css 和 js 混写的,本能抗拒,之前干后端的应该更喜欢,但是你让他写 css,也头大,人的精力有限,你不可能专注所有领域。
jinsongzhao
2020 年 5 月 14 日
看看这篇文章吧,感觉 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

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://v2ex.ih06.com/t/670771

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX