写 React 的学了一下 Vue,真香

2020 年 5 月 12 日
 lihongming

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

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

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

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

21511 次点击
所在节点    Vue.js
140 条回复
no1xsyzy
2020 年 5 月 12 日
@namelosw #80 单这一条就够诡异的了。
我倒是非常讨厌函数式编程 /风格,但 hooks 就还好,只感觉非常脏。
看上去 Algebraic effects 实质上是向环境暴露续延,相当于 call/cc 和 parameter 的结合体。但 JavsScript 没有 First-class Continuation 的话连风格都是做不到的。
哪怕一个很简单的要求,就 https://reactjs.org/docs/hooks-rules.html 里面,只改 surname 的话是不应该运行 persistForm 的,但测试了一下并不能。
LG3xFA6kpn88HxEW
2020 年 5 月 12 日
对象是穷人的闭包,闭包是穷人的对象,react 不用 class 组件了,结果在函数组件里面写了一大堆的 function,这么一看好像和对象方法没什么区别了,哎,终究逃不过这个定律,但是 hooks 肯定是好的,虽然有很多问题,但是 hooks 的 ts 类型约束比 hoc 简单太多了
devwolf
2020 年 5 月 12 日
比什么,反正最后全都要学
pecopeco
2020 年 5 月 12 日
至少,在 rn 面前,vue 的生态暂时一个能打的都没有
ljpCN
2020 年 5 月 12 日
我也 react 转 vue,喜欢 react 。你说的这些应该是说明了 vue 开箱即用的程度更高。至于谁更好用,见仁见智。
namelosw
2020 年 5 月 12 日
@no1xsyzy 毕竟当 Library 实现,而不是语言实现,没办法。感觉如果要走 Svelte 那种编译器路线理论上还可能实现完整的版本,但是感觉更不透明。

我想采访一下为什么讨厌函数式编程呢?我个人的体验是除去写底层 API,再除去 mutable 算法很好写的情况,普通的业务用函数式风格各方面都要好一点,好读 /好重构 /好扩展 /好测试 /好 reload 代码等等。
rain0002009
2020 年 5 月 12 日
玩了 3 年 vue 最近开始学习 react (因为大家都在说这东西贼香),因为对 vue 的 nuxt 有好感(我都把它当 cli 用)所以用 next 搭建项目,我以为会像 nuxt 一样 一装就啥都有了呢,还会问你用 ts 还是用 js,以下 ui 框架都很好要不要装一个(好 那就装个 ant ),还可以使用其他服务框架,express koa hapi 啥的(不懂,默认吧),我们还集成了 axios 和 pwa 要不要用(那就装个 axios 吧),eslint,prettier 啥的要用不(虽然就我一个人玩,还是用一下吧),测试框架要不要装一个有 jest 和 ava (玩不来,算了),要使用 ssr 不(要吧,不然就真当 cli 了)

一进项目主目录,基本结构都有了呀,assets/ 放图片啥的,components/ 放组件,layouts/ 可以自定义布局,middleware/ 可以写中间件 判断登录啥的,pages/ 写页面,plugins/ 放第三方插件,static/ 还可以放静态资源 基本不会变动的那种,store/ 里面放 vuex
还要啥自行车,每个文件夹里还有一个 readme 告诉你这个文件夹是干啥的,服务端大佬都哭了呀,谁跟我说现在写前端配置就得学半天的,说着撸起了自己的博客

现在我配置个 next 搞了老半天,想用个按需加载 ant,直接就报错了 说什么 不能从 node_modules 里面 import css,没耐心找解决方法就全局引用了,尝试了 styled-jsx,又搞了半天 vscode 代码高亮和代码提示,搞半天还是不支持 postcss 的嵌套语法,气不过就不用了 直接用 sass 了

也就组件不用像 vue 那样手动注册一下,爽一点,其他的初学也没体验到啥
组件通讯是真的考验我的心智,原来没有 emit 是这么麻烦的吗

我已经忘了这项目是为了干啥了,我已经迷失在 react 优化里了,顺便问问各位 react 的大佬,我写了这么一个组件,里面有个输入框,输入特定字符就会在那个地方弹一个框出来,整个页面里面会添加有很多这样的组件,功能是可以,就是选一个组件输入,所有组件都会运行一下 render,这正常吗(还没学 redux,所以用的 hooks 模拟的 redux )
yazoox
2020 年 5 月 12 日
@namelosw ramda ?这是啥?你说的练一练什么意思?
namelosw
2020 年 5 月 12 日
@yazoox Ramda 只是一个比较贴合函数式风格的函数库而已。只是说大部分人写所谓函数式 React 都是很入门的内容,所以写起来很尴尬很麻烦。写过 Haskell 的人一般都能写出来很漂亮的 React 代码。

Scala 红皮书里面说过,如果函数式编程写得很笨很蹩脚,一般都是缺乏某种抽象。

函数式风格真正用起来是各种很流畅的函数组合,用函数高效流畅地地组装出绝大部分函数,大部分都是高阶函数各种传参生成一个需要的函数,而不是每次从头手写。
hikarugo
2020 年 5 月 12 日
@Hanggi 感叹一下前端的框架真是太多了。。
no1xsyzy
2020 年 5 月 12 日
@namelosw #86 一方面是和我的理想形态(纯响应化)有点远,我非常希望写出一个函数之后,传入 atom 传出 atom,传入 source 传出 source,传入 sink 传出 sink 。打个比方,JavaScript 有 element.addEventListener('event', handler) 这样处理的,我觉得就应该变成
handler(element.eventSource('event')) |> sink
或者
element.eventSource('event') |> handler(sink)
或者更平衡的写法
element.eventSource('event') |> handler |> sink
也就是说,handler(source) 相当于每当 source 产生数据即丢给 handler,而该表达式的值是 handler 的结果作为新的 source,而 sink 会反过来,构造一个新的 sink,这个新的 sink 传入的任何数据都会经过 handler 然后将结果再传入原 sink 。
或者就是 Qt 信号槽。
但这种一条语句永久运行的模式,现在称为函数式的那些都反对这么做。
(话说 REPL 也有点难搞)

另外,不是很重要地,函数式 “编程” 有点强行造词的意味。我上面除了 #81 说讨厌外没有在 “函数式” 后面跟上 “编程”。
从我明白了 Excel 是真真正正的函数式之后就这样了。
menyakun
2020 年 5 月 12 日
日常又开始了,狗头
hantsy
2020 年 5 月 12 日
唯一爽的只有 Angular,从 Spring Boot 切换过去一天上手,DI,Module 概念太相似了。Angular 内置使用 Rxjs, 天生就是异步,Reactive 编程(对于使用过 ReactiveX 下的组件的后端开发人员,太亲切了)。

React 虽然一直在改进 Type 支持,现在对 TS 支持也很好,但是它不够 OOP,Function 是一等公民。JS 印迹太深。

VUE 没正经使用过,看过比较各框架的 TODO 例子,第一眼觉得与早期 Polymer 1 相似(语法杂交了 AngularJS 1 概念),实在没好感,实在找不到什么理由用它。

期待 WebComponents 流行起来。
hantsy
2020 年 5 月 12 日
工具方面,Angular 生态圈很强大,很 Angular 扩展都支持 Angular Semantics,用 NG ADD 完成自动配置,用 NG UPdate 来自动升级。希望 React 下面能有一样工具加入 CRA 。
duan602728596
2020 年 5 月 12 日
@rain0002009 https://github.com/ant-design/ant-design/issues/22802#issuecomment-621622699
next 里面使用 antd 按需加载的方法。因为 node_modules 里面的组件是使用 node 的 commonjs 的方式加载,而不是用 webpack 编译打包的,所以会报错
louieliu
2020 年 5 月 12 日
是 React 太灵活 不好掌握到精髓 使用起来心智负担比 Vue 大
mandex
2020 年 5 月 12 日
我用 React,因为 JSX 表现力远远强于 VUE 的模板语法,而且不需要重新学习各种指令,会 JS 就可以了,充分利用了 JS 的一切优点。
namelosw
2020 年 5 月 12 日
@no1xsyzy 感觉这个形式和函数式也不矛盾啊,只是有个 sink 而已。比如 CycleJS 基本就是这样无限 sink,而且还有回绕,但我理解它还是非常函数式的,main 函数里面全都是 pure 的。

不过对比 Cycle,我觉得 React 只解决了 Model -> View 的 Reactive,没有实现像 Cycle 一样 View -> Model 的 Reactive 。

我理解大部分函数式其实都是指处理逻辑的核心是函数操作数据,操作以 transform ADT 为主就是非常函数式了。基本上也能获得函数式的核心好处-靠 referential transparency 和 local reasoning 让 business logic 更容易理解,测试和修改。

至于这个核心外面的 container 五花八门,Haskell 靠 ST,比如 Erlang 靠 process,Clojure 靠 Atom,ML 靠 ref,我理解都算函数式。但是这些和业务关系就变小了,是一些技术上的设计。只不过追求 Pure 的函数式是另外一回事。
ragnaroks
2020 年 5 月 12 日
csharp => vue
java => react
namelosw
2020 年 5 月 12 日
@hantsy React,AngularJS 和 Angular 我都写了很多年,RxJS 我也用了很多年。

Angular 问题很多,特别写库和写业务完全就是两套不同的代码,感觉 Angular 很多东西写出来都特别困难,难受得一批。API 很多,我们都是后端团队,学起来上手快,后面还是各种踩坑。

Mark for check 机制完全就是自动挡变手动挡,而且机制完全没 React 和 Vue 直接,一不小心就无限刷,或者 onPush 就不更新得手动调 Zone 。

Rx 本身也不够建模用,写多了极乱,最后还是需要 Ng*s 之类的东西。

而且实话说 OO 相比 FP 扩展性很差。


React vs Vue 感觉还有的比,Ng 用没 React 和 Vue 人多是有原因的。

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

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

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

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

© 2021 V2EX