分子

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