Model keadaan atom (Jotai, Recoil) membina keadaan global daripada banyak unit kecil yang bebas dipanggil atoms, yang terdiri dari bawah ke atas — daripada satu gedung besar atas-ke-bawah (Redux) atau konteks monolitik. Komponen melanggan atom individu dan hanya menerima sambutan semula ketika mereka berubah.
Atoms — unit keadaan terkecil
import { atom, useAtom } from "jotai";
const countAtom = atom(0); // a primitive atom — one piece of state
const nameAtom = atom("Ann"); // another, independent
Setiap atom adalah sebahagian keadaan yang berdiri sendiri. Anda membuat seberapa banyak yang anda perlukan, setiap satu boleh dialamatkan sendiri.
Atom terbitan — komposisi
// a derived atom computes from other atoms; recomputes when its dependencies change
const doubleAtom = atom((get) => get(countAtom) * 2);
const greetingAtom = atom((get) => `Hello, ${get(nameAtom)}`);
// writable derived atom
const upperNameAtom = atom(
(get) => get(nameAtom).toUpperCase(),
(get, set, newVal) => set(nameAtom, newVal.toLowerCase()),
);
Atoms terdiri dalam graf kebergantungan — atom terbitan secara automatik mengemas kini apabila atom yang mereka baca berubah, seperti spreadsheet.
Menggunakan atoms — terasa seperti useState, tetapi global
function Counter() {
const [count, setCount] = useAtom(countAtom); // global, but useState-like API
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
function Display() {
const [double] = useAtom(doubleAtom); // re-renders ONLY when doubleAtom changes
}
Atom (bawah ke atas) vs penyimpanan (atas ke bawah)
Redux (top-down): one big state tree; you carve slices/selectors OUT of it
Atomic (bottom-up): start with tiny atoms; compose them UP into derived state
Granularity: each atom is independently subscribable → naturally fine-grained
re-renders (a component using countAtom ignores nameAtom changes)
Faedah dan pertukaran
✓ Fine-grained re-renders by default (subscribe to exactly the atoms you use)
✓ No selector boilerplate; derived state is just another atom
✓ Solves Context's "re-render everything" problem
✓ Great for state that's naturally decomposed into many independent pieces
✗ Many atoms can be harder to organize/trace than one centralized store
✗ Less rigid structure than Redux (a pro or con depending on the team)
Mengapa penting
Model atom ialah pendekatan yang berbeza dan semakin popular untuk keadaan global yang menyongsangkan struktur atas-ke-bawah Redux: daripada mengiris kedai besar, anda menggabungkan atom kecil ke atas.
Granularitas terbina memberikan re-render yang cekap dan tertumpu tanpa pemilih — secara langsung menangani isu prestasi Konteks.
Memahami atom (dan atom terbitan) melengkapkan pengetahuan anda tentang ruang reka bentuk pengurusan keadaan, bersama model kedai tunggal (Redux/Zustand) dan reaktif (MobX/Signals), membantu anda memilih paradigma yang paling sesuai untuk bentuk keadaan aplikasi anda.