Jotai

状態

Primitive and flexible state management for React

比较

Jotai 的诞生是为了解决 React 中额外的重新渲染问题。额外的重新渲染是指渲染过程产生相同的 UI 结果，用户看不到任何差异。

要使用 React 上下文 (useContext + useState) 解决这个问题，需要很多上下文并面临一些问题。

Provider 地狱：您的根组件可能有许多上下文 Provider，这在技术上是可以的，有时需要在不同的子树中提供上下文。
动态添加/删除：在运行时添加一个新的上下文不是很好，因为你需要添加一个新的 Provider 并且它的孩子将被重新挂载。

传统上，自上而下的解决方案是使用选择器。use-context-selector 库就是一个例子。这种方法的问题是选择器函数需要返回引用相等的值以防止重新渲染，这通常需要 memoization 技术。

Jotai 受 Recoil 的启发，采用自下而上的原子模型方法。可以构建状态组合原子，并根据原子依赖性优化渲染。这避免了记忆的需要。

Jotai 有两个原则。

Primitive：它的基本接口很简单，比如 useState。
灵活：派生原子可以组合其他原子并启用带有副作用的 useReducer 样式。

Jotai 和 React 的 useContext 有什么不同？

Jotai 的核心 API 是极简的，可以很容易地基于它构建实用程序。

比喻

您可以将 Jotai 视为 useContext 的替代品，因为它实际上在核心中使用了它。除了 Jotai 的目标是简单、简约的 API 并且可以做的比 useContext 和 useState 多得多。

用法区别

与 Jotai 相比，我们可以看到我们过去是如何与 children 共享数据的。但是让我们使用一个真实世界的例子，在我们的应用程序中有多个 Context。

// 1. useState 本地 state
const Component = () => {
  const [state, setState] = useState(0);
};

// 2. 提升本地 state 并通过 context 共享
const StateContext = createContext();
const Parent = ({ children }) => {
  return (
    <StateContext.Provider value={useState(0)}>
      {children}
    </StateContext.Provider>
  );
};
const Component = () => {
  const [state, setState] = useContext(StateContext);
};

// 3. 有多个状态和上下文
const State1Context = createContext();
const State2Context = createContext();
const Parent = ({ children }) => (
  <State1Context.Provider value={useState(0)}>
    <State2Context.Provider value={useState(0)}>
      {children}
    </State2Context.Provider>
  </State1Context.Provider>
);
const Component1 = () => {
  const [state, setState] = useContext(State1Context);
};
const Component2 = () => {
  const [state, setState] = useContext(State2Context);
};

现在让我们看看 Jotai 是如何为我们简化的。您可以只使用原子而不是多个 Context。

import { Provider, atom, useAtom } from "jotai";
const atom1 = atom(0);
const atom2 = atom(0);
// 可选：您可以像使用 useContext 一样使用 Provider，
// ...但如果你只需要一个，
// ...你可以省略它，Jotai 将使用默认模式（称为 Provider-less 模式）。
const Parent = ({ children }) => {
  return <Provider>{children}</Provider>;
};
const Component1 = () => {
  const [state, setState] = useAtom(atom1);
};
const Component2 = () => {
  const [state, setState] = useAtom(atom2);
};