Jotai 是一个用于 React 的轻量级状态管理库

Jotai 是一个用于 React 的轻量级状态管理库，旨在通过最小化状态管理的复杂性来简化开发过程。以下是对 Jotai 状态管理的详细介绍，包括其核心概念和用法。

官方文档：https://jotai.org/docs/core/atom

核心概念

1、 Atom（原子）：

•原子是 Jotai 的基本单位，类似于其他状态管理库中的状态片段。它们是独立的状态单元，存储特定的数据。•通过 atom 函数创建原子。例如：

import { atom } from 'jotai';


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

2、 Provider（提供者）：

•Jotai 通过 Provider 组件将状态注入到应用中，通常在应用的根组件中使用。•示例：

import { Provider } from 'jotai';
import App from './App';


const Root = () => (
 <Provider>
   <App />
 </Provider>
);

3、 useAtom（钩子）：

•useAtom 是一个 React Hook，用于在组件中读取和更新原子状态。•示例：

import { useAtom } from 'jotai';
import { countAtom } from './atoms';


const Counter = () => {
 const [count, setCount] = useAtom(countAtom);


 return (
   <div>
     <p>{count}</p>
     <button onClick={() => setCount(count + 1)}>Increment</button>
   </div>
 );
};

高级特性

1、 派生状态：

•Jotai 支持从一个或多个原子派生出新的状态。派生状态是只读的，它们的值由依赖的原子决定。•示例：

import { atom } from 'jotai';


const countAtom = atom(0);
const doubleCountAtom = atom((get) => get(countAtom) * 2); // 派生状态


// 使用派生状态
import { useAtom } from 'jotai';


const DoubleCounter = () => {
 const [doubleCount] = useAtom(doubleCountAtom);


 return <p>Double Count: {doubleCount}</p>;
};

2、 写入派生状态：

•可以创建既可读又可写的派生状态，允许通过某种逻辑更新原子状态。•示例：

const countAtom = atom(0);
const doubleCountAtom = atom(
 (get) => get(countAtom) * 2,
 (get, set, newCount) => set(countAtom, newCount / 2) // 写入逻辑
);


// 使用可写派生状态
const UpdateDoubleCounter = () => {
 const [doubleCount, setDoubleCount] = useAtom(doubleCountAtom);


 return (
   <div>
     <p>{doubleCount}</p>
     <button onClick={() => setDoubleCount(doubleCount + 2)}>Increment by 2</button>
   </div>
 );
};

优点

•简单易用：通过原子和钩子的组合，Jotai 提供了一种直观且简洁的状态管理方式。•性能高效：由于状态是按需更新的，Jotai 在大多数情况下能够提供高性能的状态管理。•强大的组合能力：原子可以自由组合，派生状态支持复杂的逻辑处理，满足各种业务需求。

结论

Jotai 作为一种轻量级的状态管理方案，适合希望简化状态管理复杂性的开发者。通过其简洁的 API 和强大的扩展能力，Jotai 为 React 应用提供了一种灵活且高效的状态管理方式。如果你在寻找一个简单易用、性能优越的状态管理库，Jotai 值得一试。