JotaiJotai

状態
Primitive and flexible state management for React

分子

Jotai atoms 提供了优化重新渲染的基本解决方案。 全局定义的原子可以依赖于其他原子,但它们不能依赖于组件树中的属性和状态。 可以在组件树中定义原子,但是您需要以某些方式传递这些原子(例如,atoms-in-atom。)

jotai-molecules 是帮助此类用例的第三方库。

有关详细信息,请参阅动机

安装

yarn add jotai-molecules

Counter 示例

import { atom, useAtom } from "jotai";
import {
molecule,
useMolecule,
createScope,
ScopeProvider,
} from "jotai-molecules";
const InitialCountScope = createScope(0);
const countMolecule = molecule((getMol, getScope) => {
const initialCont = getScope(InitialCountScope);
return atom(initialCont);
});
const Counter = () => {
const countAtom = useMolecule(countMolecule);
const [count, setCount] = useAtom(countAtom);
return (
<div>
{count} <button onClick={() => setCount((c) => c + 1)}>+1</button>
</div>
);
};
const App = () => (
<div>
<h1>With initial value 1</h1>
<ScopeProvider scope={InitialCountScope} value={1}>
<Counter />
<Counter />
</ScopeProvider>
<h1>With initial value 2</h1>
<ScopeProvider scope={InitialCountScope} value={2}>
<Counter />
<Counter />
</ScopeProvider>
<h1>Default</h1>
<Counter />
<Counter />
</div>
);