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

Posted 2021-09-04 Jaming

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了轻量且高性能的 React 状态管理库 Jotai相关的知识，希望对你有一定的参考价值。

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 吧