这是一个创建于 1658 天前的主题，其中的信息可能已经有所发展或是发生改变。
最近接手一个项目，由于以前是用 Vue 写的，只好临时学了一下，结果发现……
我艹，这玩意比 React 好用太多了。
很多 React 里处理起来比较麻烦的问题，在 Vue 里都解决了。向 children 传参再也不用 Clone 了，Vuex 也比 Redux 好使，连路由参数都能直接传入 props……
其实 React 的那些麻烦已经很多年了，只是老外似乎不太注重用户体验，不愿解决。还是中国同胞好啊！
第 1 条附言 · 2020-05-13 03:46:07 +08:00
没想到随手发个感慨能赚到这么多铜币，谢谢各位捧场！
补充附言是想劝大家消消火，PHP 都能成为最好的语言，Vue 和 React 真没什么可吵的。
更何况很多人争吵的点还局限在技术优劣上，这种思维方式可能是程序员职业生涯最大的局限。
十年前我刚开始接客时，经常会在心里骂客户，觉得这人怎么这么笨，一点常识都没有，还想要那么高级的功能？现在我最喜欢的就是什么都不懂的客户，他们越笨，我赚钱的机会越大。只要把产品做得比别人更好用一点，就能轻易拿下客户。
一款产品的成功需要很多因素，技术优劣只在其中占一部分，甚至是一小部分。这并不是说技术不重要，毕竟技术是个必要因素。但程序运行速度、技术开发难度对用户的影响，可能还不如一个设计优美的按钮大。
很多人评论我是新手，确实，这两个框架我都没有深入研究过，都是实用主义，学到够用即止。我主用 React 也是因为 React 在北美更流行，更容易找工作、招人、赚钱，并不是觉得它比其他框架更“好”。
什么叫“好”？这是个值得思考的问题。或者说，是一种选择。你可以深入研究追求性能，也可以偷懒求简把时间花在别的地方，毕竟时间是公平的，每个人都不比别人多。向左向右都是走，只要别停下学习的脚步就好。
补充附言是想劝大家消消火，PHP 都能成为最好的语言，Vue 和 React 真没什么可吵的。
更何况很多人争吵的点还局限在技术优劣上，这种思维方式可能是程序员职业生涯最大的局限。
十年前我刚开始接客时，经常会在心里骂客户，觉得这人怎么这么笨，一点常识都没有，还想要那么高级的功能？现在我最喜欢的就是什么都不懂的客户，他们越笨，我赚钱的机会越大。只要把产品做得比别人更好用一点，就能轻易拿下客户。
一款产品的成功需要很多因素，技术优劣只在其中占一部分，甚至是一小部分。这并不是说技术不重要，毕竟技术是个必要因素。但程序运行速度、技术开发难度对用户的影响，可能还不如一个设计优美的按钮大。
很多人评论我是新手，确实，这两个框架我都没有深入研究过，都是实用主义，学到够用即止。我主用 React 也是因为 React 在北美更流行，更容易找工作、招人、赚钱，并不是觉得它比其他框架更“好”。
什么叫“好”？这是个值得思考的问题。或者说，是一种选择。你可以深入研究追求性能，也可以偷懒求简把时间花在别的地方，毕竟时间是公平的，每个人都不比别人多。向左向右都是走，只要别停下学习的脚步就好。
 |
101
pingfan 2020-05-12 20:05:29 +08:00
@lihongming alipay hk 大量招前端，楼主要不要考虑
|
 |
102
xcatliu 2020-05-12 20:10:43 +08:00  1
React 中向 children 传参可以不用 Clone：
```js <children.type {...children.props} extraProp="Hello" /> ``` |
|
103
xcatliu 2020-05-12 20:11:22 +08:00
|
 |
104
hurrytospring 2020-05-12 20:48:12 +08:00
写了很多年 vue，一写 react 发现这东西真是神器，概念抽得一层一层的，各种花式的写法，插件，工具，能吹逼的地方太多了。。不像 vue,面试也没太多可以讲的。
|
 |
105
lambdaxs 2020-05-12 20:59:14 +08:00
@no1xsyzy 好久没写 react 了，刚看了下 hooks，用法是蛮恶心的，背后的想法应该是为了处理副作用，函数式的一厢情愿就是把世界想的太美好了，而现实却充满副作用（手动狗头
|
 |
106
hantsy 2020-05-12 21:28:03 +08:00
@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 要舒服一些。 |
 |
107
beyondex 2020-05-12 21:31:21 +08:00 via Android
所以说，angular 在 3 年后等你们
|
 |
108
longjiahui 2020-05-12 22:36:28 +08:00
哈哈哈哈哈哈， 我看 vue3.0 去了
|
 |
109
namelosw 2020-05-12 22:36:35 +08:00
@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 。 |
 |
110
no1xsyzy 2020-05-12 22:40:19 +08:00
@namelosw #98 这不是叫数据驱动么…… source 和 sink 是信号处理相关的术语，所以应该叫信号驱动？
广义函数式…… 一说这是做函数式的很多人所不齿的，虽然我也不知道前端对这块看法是啥，好像 “弱纯性” 还算通融？ CycleJS 我记住了 |
|
111
namelosw 2020-05-12 23:29:10 +08:00
@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 之类里用。 追求纯的人是很多，但是现在恶意打击不纯的感觉已经很少了。 |
 |
112
gouflv 2020-05-13 00:15:30 +08:00 via iPhone
就凭楼主还用 redux vuex 这些，就说明水平一般，没啥好讨论的了
|
 |
113
DOLLOR 2020-05-13 01:49:18 +08:00 1
早期很不喜欢 react 的 class 语法，感觉 class 写法特别啰嗦，而且 API 名称又臭又长（如 componentWillMount 、componentWillUnmount ）。现在有了 hooks 之后，感觉清爽好用多了。
|
 |
114
yanguango 2020-05-13 02:06:41 +08:00
很不喜欢 Vue 或者 Angular 所谓的 ‘directive’， 存存的 JS 不好吗，为啥要搞什么 directive
|
 |
115
jakezh 2020-05-13 04:25:37 +08:00 via iPhone
我们都是 vue 迅速出 mock up
拿到项目后再 react 实现 |
 |
116
wework 2020-05-13 06:51:17 +08:00
web 开发来说，php+mysql 目前还是很稳的
|
 |
117
murmur 2020-05-13 08:01:21 +08:00
@yanguango js 工程师和前端工程师的思路是不一样的，在没框架的年代，就开始各种 data-xxx 在元素上挂东西了（这其实也是避开闭包坑的一种途径），现在有官方 directive 了，用就是
为什么要搞 directive，你应该问问 react，明明 html 里用的 class，他为啥给写成 className，你长得像 html/xml，写的是 js，到底是个什么东西 |
 |
118
wangxiaoaer 2020-05-13 08:23:46 +08:00
@gouflv #112 你好， 请问高手应该用什么呢？
|
 |
119
fescover 2020-05-13 08:38:28 +08:00 via Android
又来了…
这么说吧，Vue 面试就是问双向绑定原理，React 面试就是问 hooks 实现原理，实际工作中都是写 js，开发效率没什么区别，遇到什么坑加群问人都能快速解决。 |
 |
120
Hanggi 2020-05-13 08:47:02 +08:00 via iPhone
@bnm965321 请不要这么说话不负责任，react hook 不需要学是嘛，什么时候用 useState, 什么时候用 useMem，useEffect 怎么用，useCallback 有啥区别？ draft 是啥，reducer 是啥？这些不看就能懂？
|
 |
121
sugars 2020-05-13 08:53:31 +08:00
@gouflv
“就凭楼主还用 redux vuex 这些，就说明水平一般，没啥好讨论的了” 感觉你就是在否定 redux 和 vuex 这两个好东西，你能写个更好点的开源一下吗，我们想用，求求了 555 |
 |
122
slert 2020-05-13 11:03:56 +08:00
楼主说的还比较务实 其实就是各有所爱
|
 |
123
AX5N 2020-05-13 11:35:25 +08:00
@sugars 他的这句话正确与否姑且不说，但他的意思类似于“喜欢用 python 的都是菜鸟，我们这些高手都是用 c++的”，如果他甩给你个 c++，你用不用？
|
 |
124
catinsides 2020-05-13 11:48:09 +08:00
楼主的附言说的很好！
|
|
125
hantsy 2020-05-13 13:07:51 +08:00
|
|
126
hantsy 2020-05-13 13:32:25 +08:00
@slert 最近和朋友聊到射雕电视剧，我一直觉得 83 年经典版本无法超越，其它版本几乎看不下去，内地最近 10 年翻拍感觉是在侮辱金庸先生。朋友觉得 95 朱茵版好看。神雕我觉得 95 的古天乐版本好一些，特别是李若彤的小龙女形象太有吸引力了，83 刘德华陈玉莲版本感觉太节省成本，场景实在太粗糙，加上音乐大不如射雕，另外还有翁去世了。
技术可能也一样，先入为主的印象很难改变吧。 |
 |
127
glacial 2020-05-13 16:54:47 +08:00
我大 angular 在后面等着你们
|
|
129
namelosw 2020-05-13 18:59:26 +08:00
@hantsy 我试了这个代码在 jest 里能 log 出来 selected:one,two 。
你这没有 package 和 import，猜不出来区别，感觉可能是 js-dom 之类的环境问题。 我这里用的 ts-jest + js-dom + @testing-library/jest-dom，测试最前面加了 import '@testing-library/jest-dom'。 |
|
130
namelosw 2020-05-13 19:05:18 +08:00
@hantsy 感觉短期人们会有感情，放到长期就不能向电视剧一样有这种经典情怀了。
现在有很多人对 Lisp 有情怀是因为 Lisp 虽然活得很长，但是到现在用起来不会输给其他语言。 但是如果是 Cobol 之类的，虽然以前很流行，但是由于它的设计有限，现在基本被时代抛弃了。 我们争论的这些技术和思想，在很久以后的主流看法就会完全不同。 90 年代 Java 和 C++打得不可开交，现在基本上除了必须用 C++不可的地方，大部分人都会躲开 C++。C++严重的设计缺陷以前经常被选择性忽视，或者甚至反而被认为是优点。 |
|
131
namelosw 2020-05-13 19:13:46 +08:00
> 向 children 传参再也不用 Clone 了
Clone 只是有 Ref 的时候才用，正常用 React 不应该出现 Ref，Ref 基本是 Hack 一些集成点才用的。 <Something {...props} />不香嘛？ |
|
132
hantsy 2020-05-13 19:49:09 +08:00
@namelosw 全局有引入。如果是用原始的 select 是没问题的，https://www.v2ex.com/t/668905#reply1 。
|
 |
133
uxstone 2020-05-13 20:15:48 +08:00
如果接手别人写的 Vue 业务代码，我看你还香不香。
|
 |
134
zhfish 2020-05-14 01:02:59 +08:00
react 接近后端写法，hook 简直神器，非常清爽
vue 接近原生写法，入门快，特性多 四舍五入等于没什么差别 |
 |
135
lihongming OP @zhfish 我更喜欢 class 的写法，觉得这样更接近 Java 。不知喜欢 hook 的人都是用什么语言做后端的呢？为何会更喜欢函数式？
|
 |
136
Tdy95 2020-05-14 09:25:24 +08:00
vue 上手很舒服，就像自动挡的车，该做的都帮你做了，路由、状态管理库对新手的友好度都比 react 好太多，第一次看 reduce 的文档，一个 TODOS demo，模板代码吓死个人。
react 给我最大的感受是对 TS 的支持，太香了。 用 hook 语法 + mobx 真香警告⚠️ |
|
137
Tdy95 2020-05-14 09:26:42 +08:00
@lihongming 我感觉 hook 的出现是为了解决逻辑复用的，而不是硬要往函数式上靠吧
|
 |
138
uTuw2C6uf964Kx6o 2020-05-14 09:34:01 +08:00
都是搬砖的，这种引战的帖子就别发了，因为你知道会引战；
还不如发帖探讨一些两者的实现原理、源码分析，能带来思考和答案 |
 |
139
leega0 2020-05-14 09:50:47 +08:00
又是引战帖。。。说实话，切图仔是不能接受 react 的 css 和 js 混写的，本能抗拒，之前干后端的应该更喜欢，但是你让他写 css，也头大，人的精力有限，你不可能专注所有领域。
|
 |
140
jinsongzhao 2020-05-14 20:51:31 +08:00
看看这篇文章吧，感觉 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 |
Select Language