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，并给定默认值0const 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