这是一个创建于 695 天前的主题，其中的信息可能已经有所发展或是发生改变。
这两个框架的本质是什么？就是对比虚拟 DOM 的 diff 变动，来映射浏览器真实的 DOM 节点。
所以写程序一定需要这个吗？其实并不需要。
一个变量变动后，把变量的 flags 设置为脏就可以了。然后把所有依赖这个变量的函数，都自动计算一次。
如何自动计算？就是每帧都调用 update()函数，里面有一系列类似 if (var_A.is_dirty) call_some_function(); 的语句。
这些变量依赖语句，都可以通过源代码预处理器，来进行自动推导和生成。
使用 React/VUE 框架，能较好的组织你的代码，但是并不能让你的程序跑的更快。
所以写程序一定需要这个吗？其实并不需要。
一个变量变动后，把变量的 flags 设置为脏就可以了。然后把所有依赖这个变量的函数，都自动计算一次。
如何自动计算？就是每帧都调用 update()函数，里面有一系列类似 if (var_A.is_dirty) call_some_function(); 的语句。
这些变量依赖语句，都可以通过源代码预处理器，来进行自动推导和生成。
使用 React/VUE 框架，能较好的组织你的代码，但是并不能让你的程序跑的更快。
 |
1
kop1989smurf 2022-12-30 14:19:59 +08:00  1
很大程度上，就是《康威定律》
既：即系统设计本质上反映了企业的组织机构。 vue 、React 等这些框架工具束缚了开发人员的手脚，让相同功能的实现的方式尽量复用与标准化、模块化。 从而做到了生产角度上的解耦、统一和通用。 大公司恰恰就需要的是人才与产出二者的解耦与通用。 |
|
2
kop1989smurf 2022-12-30 14:21:37 +08:00
勘误：即系统设计本质上反映了企业的组织结构（不是机构）。
|
 |
3
tool2d OP web developer 里的 UI 有两种模式，分别是 Retained Mode 和 Immediate Mode ，你可以在 youtube 找到解释。
React 就是 Retained Mode ，主要工作就是维护各种变量的当前状态。 而很少有人会提到 Immediate Mode ，这是基于游戏那种每帧更新的模式，完全不需要保存状态。为什么？因为每帧更新的情况下，你能直接通过和上一帧对比，知道那几个变量被设置和改动了，就不需要额外保存和维护状态了。 |
 |
4
retrocode 2022-12-30 14:28:10 +08:00
问题在于: 使用框架并不是为了更快, 至少更快不是优先级最高的考虑, 而是为了工程化, 为了开发更快, 修改更便捷, 移植更方便, 降低心智负担
|
 |
5
wu67 2022-12-30 14:32:17 +08:00
为什么不想一想, 如果 vue react angular 没有出现, 网页会是怎样的?
答案是 jsp asp php, 或者 ejs pug 这样的模版. 从 seo 方面来说, 服务端渲染确实比客户端渲染要好一点. 在服务器资源占用没达到瓶颈之前, 加载速度也确实比客户端渲染要好. 但是 ajax 方面呢, 前端开发者需要手工操作 DOM, 势必造成更大的心智负担. 当然你也可以直接丢掉心智负担, 流水线式面条逻辑 if else 一把梭, 那么手工操作 DOM 的性能问题就暴露出来了. 为了拉高 DOM 操作的性能下限, 势必会写各种各样的工具库、制定约束规范, 到了最后, 造出来的轮子, 其实就是一个简易版的 3 大框架, 恭喜你重新发明了 vue react angular ! |
 |
6
loading 2022-12-30 14:33:02 +08:00 via Android
说个冷知识:
浏览器操作 dom 效率非常低。 |
 |
7
TWorldIsNButThis 2022-12-30 14:36:50 +08:00 via iPhone
性能上来说
精确更新 dom > v-dom diff > 粗粒度更新 dom |
 |
9
rabbbit 2022-12-30 14:41:33 +08:00
前端工程化
Java 不一样么,为了工程化所以啰嗦. |
 |
10
weiwoxinyou 2022-12-30 14:51:12 +08:00 1
可以先进行检索再提问，知乎上已经有非常棒的回答了。
我个人的理解就是： 1. mvvm 优于 mvc 的好处之一就是把逻辑和页面分离，你可以试试写一个纯 js 的 TODOList 再把他转化为 react/vue 版本，你可以明显感觉到项目组织上的提升，对大型项目而言这点就更重要了。 2. 框架通过浏览器操作 dom 的方式更新 dom ，但是框架比原生操作更快的原因就是它会把能合并的操作合并完再去操作，对大部分人而言都比原生操作 dom 更快。 3. “源代码预处理器”并没有你以为的那么智能，本质上只是将你的代码通过词法分析语法分析进行了 AST 的抽取，这个 update 函数如果你觉得写的不好，你完全可以进行重写。 |
 |
11
terranboy 2022-12-30 14:53:35 +08:00
C 语言做的东西很快啊 我写网站也用 C 语言？
|
 |
12
MossFox 2022-12-30 14:56:21 +08:00
"使用 React/VUE 框架，能较好的组织你的代码，但是并不能让你的程序跑的更快。"
……确实就是为了更好地组织代码和方便开发的。与 1L 说的一样，如果没有这两个架子在这，也就很难有那些大家喜闻乐见的组件库了（特指含交互控件的那种组件库，不是单纯 CSS 为主的库）。 然后，React/Vue 开发的应用有 view = f(state) 的特点，在 state 不发生变化的时候，页面不会占用额外的处理器资源来处理渲染相关事项。用户操作带来 state 变化、再进行重渲染，这样耗费的资源可以尽可能少。游戏那种按帧刷新的，放在常见的网页应用场景下面会有性能问题。 |
 |
14
wonderfulcxm 2022-12-30 15:16:15 +08:00 via iPhone
我也不知道，大家学我就学了。🐶
“人们在可以自由行事时，往往互相模仿。”——埃里克·霍弗 |
 |
15
GzhiYi 2022-12-30 15:22:26 +08:00
我觉得使用 react 和 vue 可以让你和程序跑的“更快”。
1. 可以让你更轻松流畅的完成项目任务，同样让你接手其他同事写的代码时不会那么杂乱无章。 2. 同一个功能，如果使用框架封装的 api ，即便本质是操作 vnode 等对象来更新 DOM 节点，也会比纯用 js 操作 DOM 节点来的高效，这里的高效可以考虑复用性和可读性等等。死抠“虚拟 DOM 最后都是更新 DOM 节点，所以速度<=js 操作 DOM 节点”是没意义的。 在现在的 web 开发上，效率是远大于那点性能损耗的。 |
 |
16
libook 2022-12-30 15:36:02 +08:00
实际上，对于任何技术来说，都是先有需求再考虑选型，而不是先拿到选型再考虑是不是需要。
任何技术都有其适用或不适用的场景。如果只是写个简单交互页面，使用原生 API 也能很快写出来。框架通常都是用于复杂的交互场景，减少重复工作。 |
 |
17
mozhizhu 2022-12-30 16:14:58 +08:00
因为💴，要是无法带来💴，jquery 一把梭
|
 |
18
awesomes 2022-12-30 16:18:58 +08:00
这个问题很难理解吗？项目的性能并不是第一位的，可维护性才是最重要的。为什么要用 sass 、tailwind ?难道是因为他们的性能更好吗
|
 |
19
Feiex 2022-12-30 17:24:30 +08:00
能减少 bug 就行了，尤其是后台系统，那字段太多了，用 jq 写就得吭哧吭哧调
|
 |
20
nomagick 2022-12-30 17:30:02 +08:00 1
现在的前端行业有严重的结构性问题
React 和 Vue ，怎么较好组织代码使项目可维护了， 还有人提 tailwind ，这东西更毒。 就现在前端的写法，那个可读性， 任何一个稍微复杂的项目，你能找出第二个人接前一个人的代码而不用重写算我输。 |
 |
21
jeffwcx 2022-12-30 19:09:17 +08:00
学什么技术别忽略生态
|
 |
22
autoxbc 2022-12-30 20:13:21 +08:00
楼主说的这个东西就是 Svelte
|
 |
23
z4oSkDNGGC2svsix 2022-12-31 01:09:11 +08:00
楼主刚刚搞了把锤子, 正在到处砸一砸.
|
 |
24
zzwyh 2023-01-04 09:27:18 +08:00
请问楼主，您的这种思想跟 vue ，react 的实现原理有什么区别吗，我个人认为 vue ，react 的也差不多是这样的
|
|
25
tool2d OP @zzwyh 就是粗粒度更新和细粒度更新区别，现在 VUE 好像也支持局部更新。
还是那句话，框架并没有什么不好，你要说最大的区别，就是性能。你可以看一下 solidjs 主页的各种框架性能对比图。 传统语言很依赖预编译 /编译器的优化，而 JS 刚好相反，强依赖运行时，性能一直上不去，才会杀出一个替代者 wasm 。 |
 |
26
l4ever 2023-01-05 11:40:29 +08:00
我觉得还是生态,
比如我学 react, 有现成的 antd 拿来即用快速上手. 我根本不用操心某个组件如何设计. |
Select Language