状态管理
传统MVC框架的缺陷
什么是MVC？
[外链图片转存失败(img-5UKs5YTH-1563154546022)(./images/mvc-base.png)]
MVC的全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，是一种软件设计典范。
V即View视图是指用户看到并与之交互的界面。
M即Model模型是管理数据 ，很多业务逻辑都在模型中完成。在MVC的三个部件中，模型拥有最多的处理任务。
C即Controller控制器是指控制器接受用户的输入并调用模型和视图去完成用户的需求，控制器本身不输出任何东西和做任何处理。它只是接收请求并决定调用哪个模型构件去处理请求，然后再确定用哪个视图来显示返回的数据。
MVC只是看起来很美
MVC框架的数据流很理想，请求先到Controller, 由Controller调用Model中的数据交给View进行渲染，但是在实际的项目中，又是允许Model和View直接通信的。然后就出现了这样的结果：
[外链图片转存失败(img-y6j9vFlC-1563154546028)(./images/defect-of-mvc.png)]
前端几个核心框架出现的时间
1. Backbone.js MVP 2010.10
2. Angular.js ( 1.0 版本) MVC ->MVVM 2010.10
3. React 可以认为是MVC中的V 2013
4. Vue 1.0 MVVM 2014
5. Vue 2.0 MVVM 2016/9
6. Angular.ts( 2.0 版本) 2016年
Flux Redux 都是和MVC MVP MVVM 一样是架构层级
Flux Redux 都是状态管理工具
1. 数据的集中存储者（ 集中存储数据的一个仓库 ）
2. 数据的管理者
##Flux
在2013年，Facebook让React亮相的同时推出了Flux框架，React的初衷实际上是用来替代jQuery的，Flux实际上就可以用来替代Backbone.js，Ember.js等一系列MVC架构的前端JS框架。
其实Flux在React里的应用就类似于Vue中的Vuex的作用，但是在Vue中，Vue是完整的mvvm框架，而Vuex只是一个全局的插件。
React只是一个MVC中的V(视图层)，只管页面中的渲染，一旦有数据管理的时候，React本身的能力就不足以支撑复杂组件结构的项目，在传统的MVC中，就需要用到Model和Controller。Facebook对于当时世面上的MVC框架并不满意，于是就有了Flux, 但Flux并不是一个MVC框架，他是一种新的思想（ 新的架构思想 ）。
[外链图片转存失败(img-BBfJt7uu-1563154546029)(./images/flux.png)]
Flux 组成部分
- View： 视图层 （ 用React的组件来代替 ）
- ActionCreators（动作创造者）：视图层发出的消息（比如mouseClick）
- Dispatcher（派发器）：用来接收Actions、执行回调函数
- Store（数据层）：用来存放应用的状态，一旦发生变动，就提醒Views要更新页面
Flux的流程：
- 组件获取到store中保存的数据挂载在自己的状态上
- 用户产生了操作，调用actions的方法
- actions接收到了用户的操作，进行一系列的逻辑代码、异步操作
- 然后actions会创建出对应的action，action带有标识性的属性
- actions调用dispatcher的dispatch方法将action传递给dispatcher
- dispatcher接收到action并根据标识信息判断之后，调用store的更改数据的方法
- store的方法被调用后，更改状态，并触发自己的某一个事件
- store更改状态后事件被触发，该事件的处理程序会通知view去获取最新的数据
##Redux
[外链图片转存失败(img-i4XKxNAZ-1563154546030)(E:\1902\03-React.js\note\images\redux.jpg)]
Store 数据的管理者和数据的存储者
actionCreators 动作的创建者，发送动作给 reducers
react Components 组件（ 用来充当视图层 ）
reducers 数据的修改者，返回一个新的 newstate 给store
React 只是 DOM 的一个抽象层，并不是 Web 应用的完整解决方案。有两个方面，它没涉及。
- 代码结构
- 组件之间的通信
2013年 Facebook 提出了 Flux 架构的思想，引发了很多的实现。2015年，Redux 出现，将 Flux 与函数式编程结合一起，很短时间内就成为了最热门的前端架构。
如果你不知道是否需要 Redux，那就是不需要它
只有遇到 React 实在解决不了的问题，你才需要 Redux
简单说，如果你的UI层非常简单，没有很多互动，Redux 就是不必要的，用了反而增加复杂性。
- 用户的使用方式非常简单
- 用户之间没有协作
- 不需要与服务器大量交互，也没有使用 WebSocket
- 视图层（View）只从单一来源获取数据
需要使用Redux的项目:
- 用户的使用方式复杂
- 不同身份的用户有不同的使用方式（比如普通用户和管理员）
- 多个用户之间可以协作
- 与服务器大量交互，或者使用了WebSocket
- View要从多个来源获取数据
从组件层面考虑，什么样子的需要Redux：
- 某个组件的状态，需要共享
- 某个状态需要在任何地方都可以拿到
- 一个组件需要改变全局状态
- 一个组件需要改变另一个组件的状态
Redux的设计思想：
- Web 应用是一个状态机，视图与状态是一一对应的。
- 所有的状态，保存在一个对象里面（唯一数据源）。
注意：flux、redux都不是必须和react搭配使用的，因为flux和redux是完整的架构，在学习react的时候，只是将react的组件作为redux中的视图层去使用了。
Redux的使用的三大原则：
- Single Source of Truth(唯一的数据源)
- State is read-only(状态是只读的)
- Changes are made with pure function(数据的改变必须通过纯函数完成)
自己实现Redux
这个部分，可以根据班级情况看是否讲解。对于学生使用redux有很大的帮助。不使用react，直接使用原生的html/js来写一个简易的的redux
基本的状态管理及数据渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Redux principle 01</title>
</head>
<body>
<h1>redux principle</h1>
<div class="counter">
<span class="btn" onclick="dispatch({type: 'COUNT_DECREMENT', number: 10})">-</span>
<span class="count" id="count"></span>
<span class="btn" id="add" onclick="dispatch({type: 'COUNT_INCREMENT', number: 10})">+</span>
</div>
<script>
// 定义一个计数器的状态
const countState = {
count: 10
}
// 定一个方法叫changeState，用于处理state的数据，每次都返回一个新的状态
const changeState = (action) => {
switch(action.type) {
// 处理减
case 'COUNT_DECREMENT':
countState.count -= action.number
break;
// 处理加
case 'COUNT_INCREMENT':
countState.count += action.number
break;
default:
break;
}
}
// 定义一个方法用于渲染计数器的dom
const renderCount = (state) => {
const countDom
最低0.47元/天 解锁文章
285
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
