前端开发里的数据管理 Flux, Redux, Vuex, Mobx

  • 前端页面，本质上来说，是一个 GUI
  • 驱动页面 GUI 的是数据
  • 数据变化时，GUI 需要相应的更新
  • GUI 的操作反过来会对数据进行修改
  • 数据有时也被叫做状态
Action -> Data -> View
  ^                 |
  `-----------------'

Flux

Action -> Dispatcher -> Store -> View
  ^                                |
  `---------------------------------

Vuex

  • Single Store as Data Source
  • 通过 mapState 把数据传入 Component
  • Getter - 数据的函数读取接口
  • Mutation - 数据的函数写入接口
  • Action - 异步的Mutation
  • 通过 Module 拆分数据

Vue

trace add variable data write update-dom

Redux

  • store.dispatch(action)
  • store.subscribe(render)
  • new_state = reduce(old_state, action)
  • suggest immutable state

React

  view = render(state)
  new_view = render(new_state)
  delta = diff(view, new_view)
  patch_to_dom(delta)

Mobx

  Action -> State -> Computed Value -> Reaction
  • Store 可以有多个