👻
Reactの状態管理ライブラリJotaiのコアを27行のコードで表現してみました、ちゃんと動くんです
コード
const atom = (initialValue) => ({ init: initialValue });
const atomStateMap = new WeakMap();
const getAtomState = (atom) => {
let atomState = atomStateMap.get(atom);
if (!atomState) {
atomState = { value: atom.init, listeners: new Set() };
atomStateMap.set(atom, atomState);
}
return atomState;
};
const useAtom = (atom) => {
const atomState = getAtomState(atom);
const [value, setValue] = useState(atomState.value);
useEffect(() => {
const callback = () => setValue(atomState.value);
atomState.listeners.add(callback);
callback();
return () => atomState.listeners.delete(callback);
}, [atomState]);
const setAtom = (nextValue) => {
atomState.value = nextValue;
atomState.listeners.forEach((l) => l());
};
return [value, setAtom];
};
デモ
CodeSandbox
未実装の機能
もちろん、jotaiの機能が全部実装されているわけではありません。例えば、以下のようなものが本物では実装されています。
- 派生atom (dependency trees)
- 派生writable atom (writeのカスタマイズ)
- Provider (React Context)
- Suspense
- その他いろいろ
リンク集
Discussion