分子
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>);