组件管理全局状态对他的映射以及自己的状态,会破坏自己组件的纯洁性
存数据:
- 按照原始类型存
- 按照视图存
前端的MVC ——> backbone
model类,以map(对象)的形式存储数据,有一个collection存储模型的有序聚合,其实就是把数据库放到前端,把数据接口层放到前端(把数据库放到前端)
前端数据的核心问题:区别后端,前端的数据是以状态的形式展现,决定了视图层。而后端和状态有关的都是起辅助作用
UI = f(states)
jQuery里面要命令,在vue李只关心数据,数据变了,视图也变了,只关心数据(数据的可视化)
从对HTML的可视化变为对JSON的可视化
MVC中直接照搬后端数据,要在c层进行组装,不利于数据的复用和状态的管理不具备表结构
弹窗:jQuery中就是添加一个Dom,删除一个dom。MVVM则是state的true,false
数据:业务数据
状态数据:1. 和UI相关(木偶组件 element)
2. 库组建的状态数据:跨组建的三级联动状态数据 数据展示和父子是跨组建的 父对子props的传递,子对父是父组件传递一个处理函数,给子组件调用,这样数据就经由函数参数传递给父组件,兄弟通信就是父子的结合
组件是树状的 ,让数据也成为树状的
全局变量 —> eventbus管理
redux
- Single source of truth:应用程序的所有 state 应该被保存在单个 store 中。
- State is read-only: state 不能被直接修改,只能通过触发 action 来修改。
- Changes are made with pure functions: 使用纯函数式的 reducer 来处理数据修改逻辑。纯函数意味着没有side effect,也就是处理逻辑不能依赖于全局变量,只能依赖于传入的参数;不能修改传入的参数,返回的应该是一个全新的对象。
mobx
Redux 要配置的东西太繁琐
Redux核心是Immutable State mobx核心是obserableable/computed,实现了视图和数据的紧密绑定,更轻量
针对 state -> view
大量数据Redux中间件(处理异步,因为redux是纯函数,不能异步)
复杂依赖 -》 action太多难以管理 -》 单独成为一个层 请求依赖请求(rxjs)
Reactive 数据间的关系,建立数据流动,处理的管道(异步函数(数据分发)/promise(数据流程))
Lodash for events 时间是纯粹的,经典的状态机,时间作为维度,把不可控变得可控
Observable evenybus
Stream-based stream
优化:
- 当处理函数堆积在一起(mobx的autorun太冗余)
- 复杂度上升,流程化减弱(大量的callback,eventbus)