react 让滚动条一直在下面_[Vue] 4 - Vue 和 React 不同

1. VUE MVVM 和 REACT View?
2. 数据触发: Vue数据变化拦截处理，React只生成新的。
3. 渲染逻辑: Vue对应数据变化的组件部分渲染，React VDOM 通过diff+补丁方式 再次渲染。
4. 思考  为什么说操作DOM代价很高?

1 - 模型 思想 不同

* Vue
* Vue 是个MVVM。Vue内部对数据和View都进行管理的。
* 本质是双向绑定, 数据能改变view, view也可以改变数据。

Vue 数据和视图都保存在Vue实例中，数据和视图通过类似桥(ViewModel)相连接。

* React
* 是单纯View, 本质是个纯函数, 函数式编程思想。
* 数据作为参数传入 render(), 输出的是需要浏览器render的内容。
* state => view 单向数据流。只能通过data 变化触发 view变化。

React 纯函数概念 来什么数据 渲染什么内容。

LIN.JY666：[Vue] 1 - Vue MVVM? React只是个View?​zhuanlan.zhihu.com

2 - 生命周期大致相似，数据触发渲染条件不同

LIN.JY666：[Vue] 3 - 对象的数据劫持? / 双向绑定实现 / Vue响应式原理?​zhuanlan.zhihu.com

大体上思路 差不多吧。 创建 => 挂载 => 数据变化 => 销毁。

Vue 对对象里数据进行劫持

* 是需要创建个实例。数据是在实例里保存的。
* 对于Vue来说，不分是外部或内部数据，一律一视同仁。因为都放在Vue实例里面。
* Vue是通过数据拦截(Object.defineProperty) 方式，已经知道了数据变化需要对应哪个View的变化。
  所以不需要 像React 一样 diff。

Vue每个实例里面自己去管理 数据和视图 通过对象数据变化拦截方式 进行view变更

React 因为只是View, 纯函数概念加持, 来什么数据重新渲染什么

* React 纯函数模式，内部数据 state 和 外部数据 props 是不一样的。
  对应数据变化的生命周期也不一样。

* 当根组件变化时候，下面的子节点也都会被重新渲染。

* 因为数据变化，React是需要diff运算 前后树的变化。来判断哪里是需要被剪枝，重新渲染。

数据来了得到最新结果，已经渲染的和新结果进行对比，只对变化节点进行渲染出去。

3 - JSX or HTML?

React: 

VirtualDOM 其实就是个用JS来管理DOM的。
一切均可JS 管理。
JS管理后，你可以让JS控制按需(patch补丁概念)去渲染，合并setState到一起后去渲染，
但是不要忘记本质上还是要直接操作DOM。只不过是成本最小的情况下去操作DOM。

Vue: 

也可以VirtualDOM，但大部分也都是模板处理。
模板处理的问题就是，repaint 和 reflow。
因为数据变了，view也需要跟着变化。
不停的构建成 Render Tree => repaint => reflow => composite => GPU

也不能说 VirtualDOM 就性能非常的强大。

VirtualDOM的意义在于对UI的解决。

• 可服务器渲染 => 同构概念
• 可跨平台 => RN, Web React
• 对组件抽象的处理 和 函数式编程思想

LIN.JY666：[React] 1 - 组件是什么? Virtual DOM?​zhuanlan.zhihu.com

LIN.JY666：[React] 5 - react / react-dom​zhuanlan.zhihu.com

LIN.JY666：[React] 6 - Fiber​zhuanlan.zhihu.com

4 - 为什么操作DOM代价很高?

例如一次操作需要对 10个DOM 节点进行，浏览器接收到第一个的时候，不知道还有9次。吭哧吭哧的 => Render Tree => reflow => repaint => compostie => GPU。等到第二个来的时候，前面的是个无用功啊。又一次次的吭哧吭哧的渲染。

计算DOM是消耗 机器的性能的。一直迭代更新。而且JS还是个单线程的玩应。一直站着主进程，用户看到的就是页面卡顿。

思考 ? 如果是你会怎么去优化?

10次合并成一次去处理不就优化了嘛。react diff找到需要变更的节点，合并处理 + 补丁处理 => render 到屏幕上。

5 - 最后

• React: 创新和思想我觉得是更重要的，函数式编程思路无处不在。处理大型业务时选择性更多一点。
• Vue: 适合端复杂度不是很高的场景。Vue对于团队来说，成本更低。
• 我个人觉得，黑猫白猫抓着耗子的才是好猫。学学底层的实现思想，才能知道当前业务需要什么。祝你好运。