zoukankan      html  css  js  c++  java
  • Vue 和 React 数据绑定 Virtual Dom

    React 和 Vue 有许多相似之处,它们都有:

    使用 Virtual DOM

    提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。

    将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库。

    数据绑定

    双向绑定和单向绑定

    单向绑定:将View绑定到Model,Model数据更新,View就会自动更新。

    双向绑定:用户更新View,Model的数据也自动更新(如表单等)

    Flux架构(Redux,Vuex):统一状态管理。组件不允许直接修改Store中的数据,而是触发相应的action来分发(dispatch)事件通知store去改变。Store中的数据改变后,订阅(subscribe)该数据的View会触发相应的action来更新。

    只有UI组件才有讨论双向绑定或单向绑定的意义。

    单向绑定(单向数据流)的好处是便于进行统一的状态管理,可以记录变更、保存状态快照、实现回滚等。缺点是代码量比较大。

    双向绑定的好处是代码量较小(如多级联动form表单等)。缺点是状态管理变得不易管理。

    React是单项绑定。对于一个React组件,流程是用户在View上的操作触发相应的function,function更新组件数据,重新渲染组件。对于使用React-redux的应用来说,流程是:用户在View上的操作触发相应的Redux action,分发(dispatch)事件通知store更新数据。store数据更新后,会通知订阅(subscribe)该数据的组件触发action,更新组件数据,重新渲染视图。

    Vue支持双向绑定,是通过Object.defineProperty实现的。每个Vue实例都会有一个watcher,记录该组件实例渲染过程中接触过的data数据。给Vue实例中的每个`data`数据注册getter/setter函数,从而在数据setter函数触发数据发生变化时通知watcher。watcher发现数据改变则更新View视图。

    Virtual Dom:

    在数据和真实 DOM 之间建立了一层缓冲。对于开发者而言,数据变化了就调用 React 的渲染方法,而 React 并不是直接得到新的 DOM 进行替换,而是先生成 Virtual DOM,与上一次渲染得到的 Virtual DOM 进行比对,在渲染得到的 Virtual DOM 上发现变化,然后将变化的地方更新到真实 DOM 上。

    为什么需要Virtual Dom:

    虽然JS操作DOM对其节点的修改操作相对较快,但是Dom改变,浏览器重新计算CSS,重新布局(layout)的速度相对耗时。

    JS引擎很快,于是引入Virtual Dom,每一批次数据改变需要重新渲染页面时,先通过diff算法在virtual dom上计算出最小更新内容,对页面进行最小更新。

  • 相关阅读:
    git
    Java命令行参数解析
    Java调用本地命令
    理解JavaScript继承
    python selenium自动化(三)Chrome Webdriver的兼容
    python selenium自动化(二)自动化注册流程
    python selenium自动化(一)点击页面链接测试
    使用python selenium进行自动化functional test
    JUnit中测试异常抛出的方法
    爬坑 http协议的options请求
  • 原文地址:https://www.cnblogs.com/cnsec/p/13547557.html
Copyright © 2011-2022 走看看