经过技术选型研究,我们放弃了 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 不适合大数据高频率的论点吗?

56402 次点击
所在节点    程序员
325 条回复
geshansuiyue
2018-12-22 14:42:42 +08:00
准备看戏
momocraft
2018-12-22 14:44:18 +08:00
能不能把你们实验时的代码发出来看看
niubee1
2018-12-22 14:46:11 +08:00
编译成 webassembly 试试
reus
2018-12-22 14:48:25 +08:00
你这前端肯定不懂二分法
水平不行怪框架?
hlwjia
2018-12-22 14:50:21 +08:00
能不能把你们实验时的代码发出来看看 + 1
reus
2018-12-22 14:50:42 +08:00
当然,就这个需求,vue 确实对菜鸡友好,但请不要说是 react 的缺陷,是你们前端不懂状态管理而已。
duan602728596
2018-12-22 14:53:05 +08:00
果然是水平不行怪框架
VDimos
2018-12-22 14:57:49 +08:00
vue 不也是 vdom 遍历查找更新? react 的快速算法是目前最优的算法,这个框架真不背锅
shangjiyu
2018-12-22 14:58:00 +08:00
flutter ?
VDimos
2018-12-22 14:59:27 +08:00
而且大量列表这个还和 css 与 html 有关,有些设置来会很卡
zuoyouTU
2018-12-22 15:00:29 +08:00
同意 demo 开源下,大家免费帮你找找坑
codermagefox
2018-12-22 15:01:06 +08:00
"因为 React 在进行状态更新的时候,会进行判断每一个 listitem 的状态是否有改变。"

蛤????我学的是假 React?

Vue 不会这样难道不是因为为了性能手动切断了 Object.defineProperty 的状态更新吗?

React 的 SetState 做不到??您能把代码发一下吗???

看我的一头问号
codermagefox
2018-12-22 15:01:33 +08:00
@codermagefox #12 看我的->看的我
reus
2018-12-22 15:03:11 +08:00
@VDimos 不是,vue 不需要遍历,vue 组件读写属性时会标记为需要更新。react 这个需要自己实现 shouldUpdateComponent 或者用 PureComponent,比 vue 灵活但对菜鸡不友好。
hlwjia
2018-12-22 15:03:39 +08:00
In conclusion, 前端的门槛太低了
Cbdy
2018-12-22 15:03:47 +08:00
技术不行,框架背锅,稳
leega0
2018-12-22 15:04:59 +08:00
只想说你们的选择是正确的,react 不是不行,而是不适合你们。
nohup
2018-12-22 15:08:34 +08:00
这里我的前端回复一下:
应用用的是 React+Redux+React-Router,demo 就不放了,公司保密

@codermagefox Vue 有 getter/setter 加持,压根就不需要判断哪些属性变了哪些属性没变。setState 一样要判断属性是否更改,这是很低效反人类的,你需要判断了 1000*N 个属性之后才进行渲染

@reus 讨论不是更新某个条目去找到这个条目,而是 React 在高频度渲染情况远不如 Vue。React 需要一个个去判断,低效的很呢,作为开发者能参与的性能优化最多加个 PureComponentn,其实没什么软用的,就算你自己写 ShouldComponentUpdate 还是卡成狗屎
codermagefox
2018-12-22 15:09:00 +08:00
@reus #14 我甚至怀疑都不到这个优化层级,卡 4-5 秒啊!

我甚至怀疑原因是他们没有加 Key,不然怎么可能卡 4-5 秒.哪怕有 1/3 走 Update,也就 1000 个条目,会用得着这么久?

我当初用某开源库就碰到过这种情况,用数据去检索中文 Key 无法检索导致点一下就卡 5 秒.后来还是绕弯路解决的.

看到这个帖子真是有点生气
nohup
2018-12-22 15:11:37 +08:00
回复 by 前端

@codermagefox 我们应用是每秒都会有新数据要刷新,1000 个条目虽说不多,但肯定是有性能问题的,加 key 没什么乱用,react 就是这点比较弱

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

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

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

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

© 2021 V2EX