React状态管理

状态管理

1. 为什么React要使用状态管理

   • React它是一个轻量级的视图层框架，类似MVC中的V,所有的业务都集中在了V,那么v必然会很繁重
   • 我们希望来一些东西来承担v中业务，所以要用状态管理

2. 那么状态管理做了什么呢？

   • 数据
   • 处理数据的逻辑

React状态管理

三者都是架构思维，react只是它的一个组成部分

• (1)Flux、(2)redux、(3)mobx

1. Flux

   • 开源时间： 2013年
   • Flux它是一种架构思维，和MVC是同一个级别的
   • 要求：
     • 了解并会使用Flux实现计数案例
     • 了解Flux组成部分，以及每一部分的租用
     • 了解Flux的工作流程
   • 说明：
     • 大家现在不使用了

2. redux (重点)

   • 开源时间： 2015年
   • redux可以说是flux + 函数式编程的一个结合体
   • 说明
     • 市场上用的就是redux
   • 要求
     • 熟练掌握redux的组成部分
     • 熟练掌握redux的工作流程
     • 可以使用redux进行项目开发
     • 熟练掌握redux中间件
     • 熟练掌握redux数据分片
     • 了解redux中部分api的原理

3. mobx

   • 它是解决redux缺点问题
   • 它使用es高版本语法的一个功能： 装饰器
   • 要求：
     • 了解它的组成部分
     • 了解它的工作流程
     • 可以使用mobx实现计数或是todolist案例

flux

Flux这个架构思维要想在React中使用，我们得使用一个工具，这个工具叫做：flux

1. flux组成部分

   • store
     • 存储管理数据
     • 更新视图
   • view 视图 - 使用React组件来代替
   • actionCreators 动作的创兼职，用于数据交互和用户交互
     • 数据交互 - 和后端进行交互
     • 用户交互 - 用户发起的交互动作
   • dispatcher 动作的执行者，用于修改数据

2. 工作流程

   • 单向
   • store -> react Component -> actionCreators -> dispatcher -> store

redux

redux也是一个架构思维，它要想在项目中使用，也得用一个工具，这个工具叫redux

1. 使用方式

   • 数据不分块
   • 数据分块 【推荐】
     • 方便将来维护更新

2. redux核心组成部分

• Store
  • 数据的管理者和数据的存储者
• actionCreators
  • 动作的创建者，用来触发事件，发送动作给 reducers
• reducers
  • 数据的修改者，相当于管理者，用来处理action的方法，修改状态返回一个新的 newstate 给store
• react Components
  • 组件（ 用来充当视图层 ）

3. 需要使用Redux的项目:

• 用户的使用方式复杂 【 电商类型 后台管理系统 】
• 不同身份的用户有不同的使用方式（比如普通用户和管理员） 【 权限验证 】
• 多个用户之间可以协作
• 与服务器大量交互，或者使用了WebSocket
• View要从多个来源获取数据

4. Redux的使用的三大原则：

• 唯一的数据源
• 状态是只读的
• 数据的改变必须通过纯函数完成

5. redux流程
   

6. redux的使用

7. 安装redux 命令：npm i redux -D 或 yarn add redux

8. src中新建 View.js Action.js Store.js Reducer.js

9. 逻辑构建