轻量且高性能的 React 状态管理库 Jotai

轻量且高性能的 React 状态管理库 Jotai

Jaming发布于 2021-07-05

Jotai 是什么？

Primitive and flexible state management for React

引用官方原话，Jotai 是一个原始且灵活的 React 状态管理库

• 原始：API 都是以 Hooks 方式提供，使用方式类似于 useState，useReducer
• 灵活：可以组合多个 Atom 来创建新的 Atom，并且支持异步

同时，我认为 Jotai 称得上是一个小巧、简洁且高性能的状态管理库

Jotai 可以看作是 Recoil 的简化版，使用了 Atom + Hook + Context，用于解决 React 全局数据流管理的问题

Atom 是 Jotai 中状态管理单位，它是可以更新和订阅的，当 Atom 被更新时，订阅了这个 Atom 的组件便会使用新值重新渲染

并且，更新对应的 Atom 只会重新渲染订阅了这个 Atom 的组件，并不会像 Context 那样导致整个父组件重新渲染，所以可以做到精确渲染

Jotai 与 Recoil 有何不同？

Jotai 和 Recoil 概念很相似，都是采用分散管理原子状态的设计模式

所以在用法上也比较相似，但相比之下，还有以下优点

• Jotai 的 API 相对 Recoil 简洁很多，并且容易使用
• Jotai 不需要用 RecoilRoot 或 Provider 等组件包裹，使得结构可以更简洁
• Jotai 定义 Atom 时不用提供key
• Jotai 更小巧，大小仅 2.4 kB
• Jotai 对 TypeScript 的支持更好

如何使用 Jotai ？

安装 Jotai

npm install jotai

定义 Atom

一个 Atom 代表一个状态

使用 atom 函数可以创建一个 Atom ，需要传入一个参数，用来指定初始值，值可以是字符串、数字、对象、数组等

import { atom } from "jotai";

const valueAtom = atom(0);

使用 Atom

useAtom 函数接受一个参数，参数值为 一个 Atom

返回值是一个数组

数组第一个值是 Atom 存储的值，第二个值是更新 Atom 值的函数

import { useAtom } from "jotai";

const Component = () => {
  // 与 React.useState 的用法相似
  // const [value, setValue] = useState(defaultValue);
  const [value, setValue] = useAtom(valueAtom);
}

完整代码

下面的代码已经在 CodeSandbox 写好，可以点开下面的链接，在线运行代码

在线运行代码

import { atom, useAtom } from "jotai";

// 定义一个Atom，并给定默认值0
const valueAtom = atom(0);

// 显示区域
const Text = () => {
  // 使用这个Atom
  // 与 React.useState 的用法相似
  // const [value, setValue] = useState(defaultValue);
  const [value] = useAtom(valueAtom);

  return <div>{value}</div>;
};

// 按钮区域
const Button = () => {
  // 第一个值这里用不到，只要第二个值，更新函数
  const [, setValue] = useAtom(valueAtom);

  // 使用setValue函数即可更新valueAtom的值

  const add = () => {
    setValue((prev) => prev + 1);
  };

  const dec = () => {
    setValue((prev) => prev - 1);
  };

  const reset = () => {
    setValue(0);
  };

  return (
    <div>
      <button onClick={add}>+</button>
      <button onClick={dec}>-</button>
      <button onClick={reset}>reset</button>
    </div>
  );
};

export default () => {
  return (
    <div>
      <Text />
      <Button />
    </div>
  );
};

总结

如果你觉得 Redux 心智负担太重，用起来太繁琐，想要一个轻量，容易使用且性能不错的状态管理库，那就试试看 Jotai 吧