React状态管理

  • Z时代
  • 2024-01-10
  • 分类：综合

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

    • 组件（ 用来充当视图层 ）

  1. 需要使用Redux的项目:

  • 用户的使用方式复杂 【 电商类型 后台管理系统 】

  • 不同身份的用户有不同的使用方式（比如普通用户和管理员） 【 权限验证 】

  • 多个用户之间可以协作

  • 与服务器大量交互，或者使用了WebSocket

  • View要从多个来源获取数据

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

  • 唯一的数据源

  • 状态是只读的

  • 数据的改变必须通过纯函数完成

  1. redux流程

  2. redux的使用

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

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

  5. 逻辑构建

以上是 React状态管理 的全部内容， 来源链接： utcz.com/z/383136.html

回到顶部