React最小状态管理Jotai

Jotai 状态管理

1. 简介

Jotai 是一个基于原子 atom 概念的 React 状态管理库，它提供了简单且灵活的方式来管理应用状态, 而且非常轻量， 大厂用的非常多。

Jotai	Redux
适合单个页面，多次用到的属性	适合全局公共属性
超级轻量（与useState 用法相同）	需要更多的配置和中间件来处理复杂的场景

---

3. 使用 （非常简单）

3.1 示例代码结构

src/
├── components/
│          └── Comp1.tsx        # 组件1
│	       └── Comp2.tsx        # 组件2
├─── config.ts                  # Jotai 配置
├─── index.tsx                  # 页面

3.2 创建原子状态

首先，我们需要创建一个原子状态。在示例中，我们创建了一个 countAtom： => config.ts

// config.ts
import { atom } from 'jotai';

export const countAtom = atom(0); // 创建一个初始值为 0 的原子状态

import { countAtom } from "./config";
import { useAtom } from "jotai";
// ... Comp1，Comp2

function Page() {
  const [count, setCount] = useAtom(countAtom);
  return (
    <>
     <div> {count} </div>
     <Comp1 />
     <Comp2 />
    </>
  );
}

3.3 使用原子状态

在组件中使用 Jotai 的原子状态非常简单，只需要使用 useAtom hook： => Comp1.tsx

import { useAtom } from "jotai";
import { countAtom } from "./config";

function Comp1() {
  const [count, setCount] = useAtom(countAtom);
  return (
    <div onClick={() => setCount(count + 1)}>
      {count}
    </div>
  );
}

• 也可以通过 useAtomValue, useSetAtom 获取和修改共享的属性值: => Comp2.tsx

import { countAtom } from "./config";
import { useAtomValue, useSetAtom } from "jotai";

function Comp2() {
  const count = useAtomValue(countAtom);
  const setCount = useSetAtom(countAtom);
  return (
    <>
      <div>{count}</div>
      <div onClick={() => setCount(999)}>设置999</div>
    </>
  );
}

4. Jotai 的优势

1. 简单直观：使用方式类似于 React 的 useState
2. 原子化状态：可以将状态分割成小的原子单元
3. TypeScript 支持：提供完整的类型推断
4. 性能优化：只重渲染使用到特定原子状态的组件

5. 总结

• Jotai 提供了一种简单且高效的方式来管理 React 应用的状态。通过原子化的状态管理，我们可以更好地组织和维护应用的状态逻辑，同时保持代码的简洁和可维护性。
• 在实际应用中，我们可以根据需要结合使用 Jotai 的全局状态管理和 React 的本地状态管理，以达到最佳的开发体验和应用性能。