关于react.js:轻量且高性能的-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 吧

相干链接

原文

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

Github 下面有更具体的文档以及用例

Jotai Github

对于 Recoil 的文章

Facebook 新一代 React 状态治理库 Recoil