可以把react、vue 、Angular框架简单地理解为构建用户界面的JavaScript库
最基础的MSV
数据响应式的结构分层基本可以归为 Model、State、View
- Model：保存到后端的原始数据
- view = component(state)
- state = transformToState(modelElements) + UIState
state就是前端工程师重点关注的， 是整个应用的状态，view 由 state 驱动更新
- 怎么管理state？： Redux & Mobx
- Redux 纯函数式的数据管理
- Mobx类/实例的方式持有和修改数据
- state数据转换为 Immutable 形式，可按通用的 PureRender 方式，对比引用确定数据是否更改，优化渲染效率。Immutable 实现机制可适用于任意 View 组件的渲染优化，省去新数据源创建开销，并且保证正确性
state数据的管理
Mobx & Redux
- Redux的编程范式是函数式的，而Mobx是面向对象的
- Redux追求的是immutable的，每次都返回一个新的数据
- Redux函数式编程思想的实践，需要借助一系列的中间件来处理异步和副作用
- Redux解决：多个组件共享状态破坏单向数据流的简洁性，即多个视图依赖于或者其行为变更同一状态把组件的共享状态抽取出来，以一个全局单例模式管理。另外，通过定义和隔离状态管理中的各种概念并强制遵守一定的规则，代码将会变得更结构化且易维护。
- Mobx采用观察者模式，观察可变数据，持有细粒度的数据响应模式，感知到哪些组件需要被更新的时间复杂度是O(1)的
本质：是在可变数据与不可变数据之间选择
- 当与副作用打交道非常频繁，倾向于 Mobx 例如 Http 请求的副作用，Dom 操作的副作用等等。使用不可变数据，还必须得使用中间件对副作用封装
函数副作用：当调用函数时，除了返回函数值之外，还对主调用函数产生附加的影响。 修改了变量值、数据结构、设置对象的成员、抛出一个异常或以一个错误终止、打印到终端或读取用户输入、读取或写入一个文件、在屏幕上画图
常见的副作用有哪些？
- 系统IO相关API Date.now()、Math.random()等不确定性方法
- 在函数体内修改函数外变量的值
- 在函数体内修改函数参数的值
- 调用会产生副作用的函数 http请求
函数副作用会给程序设计带来很多麻烦：难以查找的错误，降低程序的可读性 严格的函数式编程要求函数必须无副作用
- 中小型的前端程序，纯函数带来的可预测性的收益，远不及其带的代码复杂度（简单来说，在 Redux 中修改一次状态，需要经过 Action、Dispatch、Reducer 三个步骤）。
业务代码划分方式：MVC与DCI
正式的=的项目中，往往是很庞大的MSV系统，这时候我们怎么对代码进行进一步的分装管理
MVC 职责驱动
使用MVC时候需要区别于曾经的“三层模型”
- 三层模型：UI层表示用户界面，BLL层表示业务逻辑，DAL层表示数据访问
将软件的业务逻辑放在Controller里，将数据库访问操作的代码放在Model里 - View层是视图，Model层是程序的数据基础，是逻辑和数据的集合
- Controller层用来输入控制、检索/更新Model、调度正确的View层，将用户界面和业务逻辑合理的组织在一起，Controller要保持代码精简。
- 为什么这样设计？
业务逻辑经常重复使用，如果业务逻辑写在控制器中，不方便重用。然而各Model之间是可以相互调用的，Controller也可以随意调用Model，因此将业务逻辑放在Model中可以灵活的使用组合的方式复用代码。
DCI 功能驱动
- MVC是一种职责驱动的设计，而新起的DCI架构是功能驱动的设计，当同一职责下需要负责多而交错的功能时候，需要引入DCI的思想
- DCI是数据Data 场景Context 交互Interactions的简称
- DCI将MVC中Control和Model中一部分挖了出来，以角色场景方式进行重新组合。
- 场景Context是新的对象类型，场景不但可以替代SOA的Web服务，也可以替代MVC的控制器
React函数式组件开发，使用不同的useState就是一个从职责划分到功能划分的设计理念的转变 所有的操作都在C中，容易变成大而全高度耦合的集中器
一些良好的设计实现
Flux
Flux 是一个Facebook开发的、利用单向数据流实现的应用架构，可以用于react。当一个用户和React视图交互时，视图会将这个动作传播到一个中央Dispatcher，Dispatcher间接访问存储，获得应用的数据和业务逻辑
Flux应用有三个主要部分：
- Dispatcher调度：Action创建者-Dispatcher的帮助类的方法 -用于支持一个语义API，这个API是描述应用程序中所有变化的可能
- 存储Store
- 视图View(React 组件)
同时Flux 也是一种MVC框架思想，不同于传统的MVC，它采用单向数据流，不允许Model和Control相互引用，更加简单和清晰，解决软件的结构问题。redux也是借鉴了flux思想的实现
- 用户访问 View
- View 发出用户的 Action
- Dispatcher将 Action 派发到 全局Store。 收到 Action，要求 Store 进行相应的更新
- Store（类似model） 更新后，发出一个"change"事件
- View 收到"change"事件后，更新页面
