什么是状态管理
今天的课程首先介绍了什么是状态管理: 状态管理是在 React 中构建可扩展和可维护应用程序的最关键方面之一。它指的是存储、管理和更新驱动 React 应用程序行为和呈现的数据的过程。在本文中,我们将讨论 React 中可用的各种状态管理选项及其权衡。
状态管理工具的本质:管理共享内存中的状态
- 共享内存
- 管路状态
- 页面通信
- 组件通信
- 刷新失败?
详细定义:单页应用的各个组件本身是共享内存的,如果将状态保存在内存中,就可以读写统一内存中的变量,从而达到状态共享的目的。
React状态管理主要分为以下:
- Context
- Flux
- Redux
- Redux-toolkit
- Mobx
- Recoil
- Jotai
- Zustand
- Rxjs 等。。。。。。。。。。。。。。。。
React状态管理简介
当然这种向上延伸的方法不是无限的,如果一直往上延伸,会出现一个父组件嵌套十几层子组件的情况,必须要有一个“度”,超过这个"度"后,我们就认为local State的方式就不太实用了。
这个“度”,在前端开发中,大部分情况下我们认为就是子页面。我们一般认为,单页应用中,子应用及子页面之下的组件都是可以用local State来解决状态管理问题的,而子页面和子页面之间,是不需要往上延伸,那么子页面之间是如何通信呢?
子页面和子页面之间的通信,React本身提供了Context。
Context
Redux
Flux状态管理的架构图如下所示:
Redux的架构图:
Mobx
Mobx的优势如下:
实现一个简易的状态管理工具
具体的流程如下图:
基于发布/订阅模式,我们来实现一个简单的Store:
Redux在项目中的实践
1、如何使用Redux
2、Redux复杂的模板代码
如果存在副作用函数,那么我们需要首先处理副作用函数,然后生成原始的js对象。如果处理副作用操作,在redux中选择在发出action,到reducer处理函数之间使用中间件处理副作用。
总结
今天学习了React状态管理方面的知识,知道了状态管理是在 React 中构建可扩展和可维护应用程序的最关键方面之一。它指的是存储、管理和更新驱动 React 应用程序行为和呈现的数据的过程。让我更对React有了更深刻的学习。。。。。