React状态管理（三）｜ 青训营笔记

React状态管理（三）

7.Jotai Jotai 是一个轻量级的 React 状态管理库，由 Atul R 发布于 2020 年，是一个由 React Hooks 驱动的无限嵌套和可组合的状态管理库。和 Recoil 一样，Jotai 也是基于原子（Atom）模型的状态管理库，利用状态提供了一个单一的存储管理解决方案，提供了一个可组合的、可重用的更轻量的状态管理框架。

Jotai 的设计原则是：

1. Hooks 驱动：Jotai 使用 React Hooks 来创建状态，使 Jotai 很容易集成到现有的 React 组件中。

2. 不可变状态：Jotai 采用不可变状态，这确保了状态的可追溯性和更好的性能。

3. 懒初始化：Jotai 支持懒初始化和异步更新状态，这使得 Jotai 应用能够更好地适应对具有繁重计算的状态树的更新。

4. 支持优化：Jotai 将始终遵循 React 的性能最佳实践，支持 Suspense 和 lazy loading。

使用 Jotai 进行状态管理，需要以下几个概念：

1. atom：提供状态容器的原子，可以是有状态的对象，数组、字符串甚至是数字，用于在用户使用应用程序时跟踪状态。

2. selector：从 atom 中派生的值，在 atom 上建立的计算值，可用于在组件内部派生数据。当 atom 的值发生更改时，selector 也会自动更新。

3. useAtom Hook：通过 useAtom Hook 访问原子的值，并将其用于组件内部的状态管理。

总的来说，Jotai 是一个轻便的 React 状态管理库，适合简单的状态管理，提供了一个灵活的解决方案。与常见的 Redux 和 MobX 框架相比，Jotai 的学习曲线非常低，更加容易上手。因为其利用了 React Hooks 而非特殊语法，因此可以更容易地与任何 React Component 整合。

8.Zustand Zustand 是一个由 pmndrs 开发的 React 状态管理工具，它采用最新的 React Hooks API，支持使用很少的代码来管理状态。它使用了一种非常直观的方式来管理状态，避免了传统 Redux 所需要的样板代码和中间件，提供了一个轻量化、即刻更新数据的解决方案。

以下是 Zustand 的特点:

1. 回归基础：采用 pure、immutability 来提高性能。
2. 内部 script：轻量级的状态管理，开发者只需要使用少量的代码即可实现全局状态管理。
3. 直接投入使用：不需要处理大量的插件、自定义中间件、样本代码等额外的东西。
4. 更加直观：对于开发者来说，使用 Zustand 比起 Redux 更加直观，代码更加简单而且易于理解。

在 Zustand 中，状态数据被存储在一个全局的数据状态树中，可以通过使用 createStore 创建并初始化状态树，然后通过 useStore Hook 在项目中访问这个状态树。Actions 通过原生对象而非callbacks或reducers进行调度，状态更新是即刻完成的，通过使用 useEffect 等 Hook 可以自动重新计算。

总体来说，Zustand 是一个相对轻量级的、易于使用的状态管理工具，提供了一组常用状态管理功能有限但功能完善的解决方案。它特别适合中小型应用程序开发，如应用程序的表单处理、路由控制和完成其他简单但灵活的状态管理功能。

9.Rxjs RxJS（Reactive Extensions for JavaScript）是一个基于观察者模式的响应式编程库。它提供了一系列强大的运算符和 API，可以使开发者更加友好地进行异步数据流处理，如打包、处理和传播数据和事件。

RxJS 的核心概念如下：

1. Observable（可观察对象）：代表异步的数据流，可以理解为一个数据发出器，使用 Observable.of() 或者 from() 来创建一个可观察对象。

2. Observer（观察者）：用于观察 Observable 对象，当 Observable 发射值时，observer 将对这些值进行异步处理。

3. Subscription（订阅）：Observable 关闭后，订阅将自动取消（unsubscribe）。

4. Operator（运算符）：对 Observable 中的数据进行处理的函数，以及组合操作符 combineLatest、concat、merge 等等。

RxJS 借鉴了不少函数式编程的思路，利用强大的转换器，以及自定义操作符等工具，可以轻易地进行高级的流式编程和丰富的重用。RxJS 还通过一些常见的操作符，如 map、filter、flatMap 等来支持强大的数据操作和处理机制。

近年来，在 React 和 Angular 社区的推广下，RxJS 的应用和影响越来越广泛，例如 Angular 的 HttpClient 完全基于 RxJS 进行实现，React 也提供了一些能够很好地与 RxJS 结合使用的组件，方便开发人员对数据流进行处理。

总体来说，RxJS 适用于需要处理异步数据流的业务场景，为开发人员提供了一个高效、简洁并且高可组合的处理异步操作的方式，尤其对于需要增强应用性能和性能优化的应用程序非常有用。