写 React 的学了一下 Vue，真香

[lihongming]

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

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

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

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

没想到随手发个感慨能赚到这么多铜币，谢谢各位捧场！

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

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

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

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

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

什么叫“好”？这是个值得思考的问题。或者说，是一种选择。你可以深入研究追求性能，也可以偷懒求简把时间花在别的地方，毕竟时间是公平的，每个人都不比别人多。向左向右都是走，只要别停下学习的脚步就好。

[pingfan]

@lihongming alipay hk 大量招前端，楼主要不要考虑

[xcatliu]

React 中向 children 传参可以不用 Clone：
```js
<children.type {...children.props} extraProp="Hello" />
```

[xcatliu]

这是官方文档中教的： https://reactjs.org/docs/react-api.html#cloneelement

[hurrytospring]

写了很多年 vue，一写 react 发现这东西真是神器，概念抽得一层一层的，各种花式的写法，插件，工具，能吹逼的地方太多了。。不像 vue,面试也没太多可以讲的。

[lambdaxs]

@no1xsyzy 好久没写 react 了，刚看了下 hooks，用法是蛮恶心的，背后的想法应该是为了处理副作用，函数式的一厢情愿就是把世界想的太美好了，而现实却充满副作用（手动狗头

[hantsy]

@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]

所以说，angular 在 3 年后等你们

[longjiahui]

哈哈哈哈哈哈， 我看 vue3.0 去了

[namelosw]

@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]

@namelosw #98 这不是叫数据驱动么…… source 和 sink 是信号处理相关的术语，所以应该叫信号驱动？
广义函数式…… 一说这是做函数式的很多人所不齿的，虽然我也不知道前端对这块看法是啥，好像 “弱纯性” 还算通融？

CycleJS 我记住了

[namelosw]

@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]

就凭楼主还用 redux vuex 这些，就说明水平一般，没啥好讨论的了

[DOLLOR]

早期很不喜欢 react 的 class 语法，感觉 class 写法特别啰嗦，而且 API 名称又臭又长（如 componentWillMount 、componentWillUnmount ）。现在有了 hooks 之后，感觉清爽好用多了。

[yanguango]

很不喜欢 Vue 或者 Angular 所谓的 ‘directive’， 存存的 JS 不好吗，为啥要搞什么 directive

[jakezh]

我们都是 vue 迅速出 mock up
拿到项目后再 react 实现

[wework]

web 开发来说，php+mysql 目前还是很稳的

[murmur]

@yanguango js 工程师和前端工程师的思路是不一样的，在没框架的年代，就开始各种 data-xxx 在元素上挂东西了（这其实也是避开闭包坑的一种途径），现在有官方 directive 了，用就是

为什么要搞 directive，你应该问问 react，明明 html 里用的 class，他为啥给写成 className，你长得像 html/xml，写的是 js，到底是个什么东西

[wangxiaoaer]

@gouflv #112 你好， 请问高手应该用什么呢？

[fescover]

又来了…
这么说吧，Vue 面试就是问双向绑定原理，React 面试就是问 hooks 实现原理，实际工作中都是写 js，开发效率没什么区别，遇到什么坑加群问人都能快速解决。

[Hanggi]

@bnm965321 请不要这么说话不负责任，react hook 不需要学是嘛，什么时候用 useState, 什么时候用 useMem，useEffect 怎么用，useCallback 有啥区别？ draft 是啥，reducer 是啥？这些不看就能懂？

[sugars]

@gouflv
“就凭楼主还用 redux vuex 这些，就说明水平一般，没啥好讨论的了”
感觉你就是在否定 redux 和 vuex 这两个好东西，你能写个更好点的开源一下吗，我们想用，求求了 555

[slert]

楼主说的还比较务实 其实就是各有所爱

[AX5N]

@sugars 他的这句话正确与否姑且不说，但他的意思类似于“喜欢用 python 的都是菜鸟，我们这些高手都是用 c++的”，如果他甩给你个 c++，你用不用？

[catinsides]

楼主的附言说的很好！

[hantsy]

@namelosw 最近重新看 React 遇到一个小问题，https://stackoverflow.com/questions/61628141/the-event-target-selectedoptions-in-custom-multiselect-component-did-not-return，一时想不到什么原因。

[hantsy]

@slert 最近和朋友聊到射雕电视剧，我一直觉得 83 年经典版本无法超越，其它版本几乎看不下去，内地最近 10 年翻拍感觉是在侮辱金庸先生。朋友觉得 95 朱茵版好看。神雕我觉得 95 的古天乐版本好一些，特别是李若彤的小龙女形象太有吸引力了，83 刘德华陈玉莲版本感觉太节省成本，场景实在太粗糙，加上音乐大不如射雕，另外还有翁去世了。

技术可能也一样，先入为主的印象很难改变吧。

[glacial]

我大 angular 在后面等着你们

[A388]

@toacnme 能告诉我什么样的业务用 react 比 vue 更合适，或者 vue 比 react 更合适。

[namelosw]

@hantsy 我试了这个代码在 jest 里能 log 出来 selected:one,two 。

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

我这里用的 ts-jest + js-dom + @testing-library/jest-dom，测试最前面加了 import '@testing-library/jest-dom'。

[namelosw]

@hantsy 感觉短期人们会有感情，放到长期就不能向电视剧一样有这种经典情怀了。

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

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

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

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

[namelosw]

> 向 children 传参再也不用 Clone 了

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

<Something {...props} />不香嘛？

[hantsy]

@namelosw 全局有引入。如果是用原始的 select 是没问题的，https://www.v2ex.com/t/668905#reply1 。

[uxstone]

如果接手别人写的 Vue 业务代码，我看你还香不香。

[zhfish]

react 接近后端写法，hook 简直神器，非常清爽
vue 接近原生写法，入门快，特性多

四舍五入等于没什么差别

[lihongming]

@zhfish 我更喜欢 class 的写法，觉得这样更接近 Java 。不知喜欢 hook 的人都是用什么语言做后端的呢？为何会更喜欢函数式？

[Tdy95]

vue 上手很舒服，就像自动挡的车，该做的都帮你做了，路由、状态管理库对新手的友好度都比 react 好太多，第一次看 reduce 的文档，一个 TODOS demo，模板代码吓死个人。

react 给我最大的感受是对 TS 的支持，太香了。 用 hook 语法 + mobx 真香警告⚠️

[Tdy95]

@lihongming 我感觉 hook 的出现是为了解决逻辑复用的，而不是硬要往函数式上靠吧

[uTuw2C6uf964Kx6o]

都是搬砖的，这种引战的帖子就别发了，因为你知道会引战；
还不如发帖探讨一些两者的实现原理、源码分析，能带来思考和答案

[leega0]

又是引战帖。。。说实话，切图仔是不能接受 react 的 css 和 js 混写的，本能抗拒，之前干后端的应该更喜欢，但是你让他写 css，也头大，人的精力有限，你不可能专注所有领域。

[jinsongzhao]

看看这篇文章吧，感觉 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