经过技术选型研究,我们放弃了 React,转向 Vue

2018-12-22 14:39:22 +08:00
 nohup

因为几个项目下来,我们发现前端的应用过于卡顿,甚至还不如上一版本 JQuery Easy UI 做出来。在项目经理的会议主持下,我和前端同学在会议上就React 是否符合我们需求的问题充分交换了意见,最终会议决定放弃 React,转向 Vue。
具体原因如下: 我们应用需要每个 tab 内容显示 1000 个列表条目,每个条目显示一个文本状态和背景颜色,1000 个条目里随机每秒有一个改变文本状态。
之前有一版是用 JQ 的。JQuery 做出来的就初次只卡顿 2s,而 React 作出来每点击一次 button 却要卡的四五秒。经过前端深入对 React 研究之后,他认为这是 React 的缺陷-->无法很好地解决高频率渲染大量组件内容。

为什么无法解决呢?我不是前端,我这里拷贝一下前端的原话:

因为 React 在进行状态更新的时候,会进行判断每一个 listitem 的状态是否有改变。当然一两个组件这样就没啥问题,但是要是有 1000-1500 个小方块同时显示,而且每秒还要更新客户订单量,这样统计就会很卡了。你可以自己试一下,for 循环 1 到 1000,只输出一个文本,都会卡成狗屎,更别说 React 判断过程中不只判断一个 prop 属性呢,他要判断 N 个属性,你要在 1000*N 的判断之后,才进行渲染呢!我一开始就说用 Vue 会比较好,React 在 ERP 有嗯用完全搞不定那么多高频率的渲染需求的。“

而且我也觉得用 React 的大部分都是为了 CRUD 吧?如果像一些实时的高频率的刷新,抱歉,我和前端没看到哪一个大厂用 React 来做,感觉真的卡成狗屎。既然前端觉得 Vue 很 ok,那就让他去试试。

所以,各位认同 React 不适合大数据高频率的论点吗?

58185 次点击
所在节点    程序员
325 条回复
Pastsong
2018-12-22 21:31:47 +08:00
“ WebApp 卡顿了,有个 1000 条数据的列表渲染很慢”
前端提供的解决方案:我们换个框架把 App 重写一遍就好了
azh7138m
2018-12-22 21:46:45 +08:00
@codermagefox 是,没问题,这就是脏检查存在的问题。
可以看下 mobx 的介绍,里面会说为什么会这样,以及如何手动优化。
vue 这里快是因为有依赖收集。
youngxhui
2018-12-22 21:48:22 +08:00
你们是怎么得出没有大厂用 react 的?
tao1991123
2018-12-22 21:48:58 +08:00
技术不行 框架背锅
virtual-scroller 了解一下
zsx
2018-12-22 22:01:54 +08:00
我想吐槽的是,React 不行,OK 我们就当它不行吧。
那突然就把全项目转型 Vue,难道 Vue 就可以?前期调研过了没?
总不能是拍个脑门,“嗯我写的没问题,一定是 React 的问题。本来我就不喜欢 React,干脆重写用 Vue 吧,再不行的话就回到 jQuery。”
RaymondYip
2018-12-22 22:06:00 +08:00
实锤的水平不行,才 1000 行就挂
keelii
2018-12-22 22:19:21 +08:00
扯什么性能问题,1000 条数据根本没到算法时间复杂度的层面,绝壁操作 DOM 慢了。很多人搞不清出算法层级的性能问题和系统瓶颈的性能问题。
xichengh
2018-12-22 22:23:27 +08:00
我们一直用的 react,1000 太不应该了。。。。求例子拿出来
TabGre
2018-12-22 22:29:40 +08:00
@Justin13 有什么文章或者教程可以更好理解 react 的范式呀?谢谢
yljcyct
2018-12-22 22:37:53 +08:00
吃瓜
虽然作为一个入门的前端不懂什么, 但是我觉得 99.99% 不是 React 的锅
lisonfan
2018-12-22 22:47:02 +08:00
果然是 Web 前端娱乐圈,佩服佩服。
pryhub
2018-12-22 23:00:24 +08:00
我是后端的,坐等结贴
astrorobbie
2018-12-22 23:39:47 +08:00
我感觉每个 tab 1000 行数据,真的不至于有你说的性能问题。再排除下别的问题吧。
Perry
2018-12-22 23:49:35 +08:00
这确实是取舍的问题。但是你们是怎么如此确定换框架所需要的时间和人力小于解决 performance issue 的时间?在大多数人看来前者往往是费时费力而且在逃避问题。我之前工作上也有过类似的问题,我的建议是每个 lifecycle 所花的时间好好检查一下,5 秒我估计主要时间还是花在更新 DOM 上,应该确认是否只是更新了需要更新的元素。
kimoCHG
2018-12-22 23:58:09 +08:00
FYI, https://github.com/vuejs/vue/issues/2000 建议组织会议评估转 Vue 的收益
witcherhope
2018-12-23 00:21:23 +08:00
你们前端 React 写腻了,寻思换 Vue 捣鼓捣鼓,过几天怕是又要换回 jQuery
hlwjia
2018-12-23 00:24:42 +08:00
我觉得用不用 react 无所谓,适合不适合也是看团队的。

但是你的原始问题是:“所以,各位认同 React 不适合大数据高频率的论点吗?”

所以大伙才出来怼你们的前端。
hlwjia
2018-12-23 00:37:57 +08:00
大家都搞技术的都谦虚一点。

我写惯了 react 刚接触 vue 的时候,觉得老难用了。但我不会去吐槽 vue 怎样怎样,因为没深入研究过,就是简单看了文档。

而且还牵扯到常识问题,Facebook 的那帮工程师估计一个单手能打我们 100 个,写出来的东西不会那么不堪的。

很多时候要找自己的问题,别出问题就是别人的锅。

老人家又说多了。。。
Hypn0s
2018-12-23 00:51:11 +08:00
换框架就有立竿见影的效果的话说明真是换的值得,让这个去前端继续搞下去不知道会出多少问题
naturedy
2018-12-23 00:58:43 +08:00
不要真的把 1000 个 item 全部渲染出来,推荐看下这两个库,react-window,react-virtualized。react 官方文档里也有介绍性能优化

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

https://www.v2ex.com/t/519999

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

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

© 2021 V2EX