Data Flow in Frontend

之前使用过react和vue,比较明显的特点是vue中有watch和v-model。所以之前React Native有想要根据深层数据比对更新,是通过轮训实现的。

单双向绑定对比

单向数据流是通过统一的状态管理(如Redux等),然后单一绑定映射到UI。
React本身只是解决视图层的问题,需要依靠其他库完成更多的功能。React本身不监听数据变化,通过this.setState触发virtualDiff(可以通过在生命周期中设定状态值,来控制是否改变)。当然,如果了解vue中双向绑定的实现,也可以亲手写一个到state里面。

双向绑定的核心在于,将数据变更的操作写到了框架内部,调用者无感知。单向绑定(one-way-binding)+内部封装自动处理回调(auto event binding)。

只有 UI控件 才存在双向,非 UI控件 只有单向。控件指如按钮、标签、单选框、复选框、列表、树型选单等交互子模块,是UI组件的子集。

一般全局数据都使用单向数据流,组件内部可以使用双向绑定。单向的好处是便于数据变化跟踪,调试控制;双向的好处在于,简单逻辑时写起来减少代码量,尤其是在复杂表单页面,可以大量的简化代码。

FLux

类似的vuex,redux

分为4个部分,View, Action, DIspatcher, Store

过程:

  1. 用户访问view
  2. view发出用户的Action
  3. Dispatcher接受Action,对Store更新
  4. Store更新触发change
  5. view收到change,更新页面

参考资料: