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 值得一试。