React状态管理| 青训营笔记

76 阅读2分钟

什么是状态管理

今天的课程首先介绍了什么是状态管理: 状态管理是在 React 中构建可扩展和可维护应用程序的最关键方面之一。它指的是存储、管理和更新驱动 React 应用程序行为和呈现的数据的过程。在本文中,我们将讨论 React 中可用的各种状态管理选项及其权衡。

image.png 状态管理工具的本质:管理共享内存中的状态

  • 共享内存
  • 管路状态
  • 页面通信
  • 组件通信
  • 刷新失败?

详细定义:单页应用的各个组件本身是共享内存的,如果将状态保存在内存中,就可以读写统一内存中的变量,从而达到状态共享的目的。

image.png

image.png

React状态管理主要分为以下:

  • Context
  • Flux
  • Redux
  • Redux-toolkit
  • Mobx
  • Recoil
  • Jotai
  • Zustand
  • Rxjs 等。。。。。。。。。。。。。。。。

React状态管理简介

image.png

image.png

image.png 当然这种向上延伸的方法不是无限的,如果一直往上延伸,会出现一个父组件嵌套十几层子组件的情况,必须要有一个“度”,超过这个"度"后,我们就认为local State的方式就不太实用了。

这个“度”,在前端开发中,大部分情况下我们认为就是子页面。我们一般认为,单页应用中,子应用及子页面之下的组件都是可以用local State来解决状态管理问题的,而子页面和子页面之间,是不需要往上延伸,那么子页面之间是如何通信呢?

子页面和子页面之间的通信,React本身提供了Context。

image.png

Context

image.png

image.png

Redux

image.png Flux状态管理的架构图如下所示:

image.png Redux的架构图:

image.png

image.png

Mobx

image.png Mobx的优势如下:

image.png

实现一个简易的状态管理工具

具体的流程如下图:

image.png 基于发布/订阅模式,我们来实现一个简单的Store:

image.png

image.png

Redux在项目中的实践

1、如何使用Redux

image.png 2、Redux复杂的模板代码

image.png

如果存在副作用函数,那么我们需要首先处理副作用函数,然后生成原始的js对象。如果处理副作用操作,在redux中选择在发出action,到reducer处理函数之间使用中间件处理副作用。

image.png

总结

今天学习了React状态管理方面的知识,知道了状态管理是在 React 中构建可扩展和可维护应用程序的最关键方面之一。它指的是存储、管理和更新驱动 React 应用程序行为和呈现的数据的过程。让我更对React有了更深刻的学习。。。。。