โมเดลสถานะ Atomic (Jotai/Recoil) คืออะไร?

Question

Accepted Answer

**โมเดลสถานะ Atomic** (Jotai, Recoil) สร้างสถานะทั่วโลกจากหน่วยเล็ก ๆ ที่เป็นอิสระจำนวนมากที่เรียกว่า **atoms** ประกอบจากล่างขึ้นบน — แทนที่จะเป็นเก็บข้อมูลขนาดใหญ่จากบนลงล่าง (Redux) หรือ context แบบเดียว ส่วนประกอบสมัครรับข้อมูลสำหรับ atoms แต่ละรายการและแสดงผลอีกครั้งเมื่อ*นั้น*เปลี่ยนแปลง ## Atoms — หน่วยสถานะที่เล็กที่สุด ```jsx import { atom, useAtom } from "jotai"; const countAtom = atom(0); // a primitive atom — one piece of state const nameAtom = atom("Ann"); // another, independent ``` แต่ละ atom คือส่วนสถานะที่จัดระเบียบตัวเอง คุณสร้างได้มากเท่าที่คุณต้องการ แต่ละรายการสามารถระบุที่อยู่ได้ในลักษณะของตัวเอง ## Atoms ที่ได้มา — องค์ประกอบ ```jsx // 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 ประกอบเข้าในกราฟความเชื่อมโยง — atoms ที่ได้มาจะอัปเดตโดยอัตโนมัติเมื่อ atoms ที่พวกเขาอ่านเปลี่ยนแปลง เช่น spreadsheet ## การใช้ atoms — รู้สึกเหมือน useState แต่เป็นโลก ```jsx function Counter() { const [count, setCount] = useAtom(countAtom); // global, but useState-like API return ; } function Display() { const [double] = useAtom(doubleAtom); // re-renders ONLY when doubleAtom changes } ``` ## Atomic (จากล่างขึ้นบน) เทียบกับเก็บข้อมูล (บนลงล่าง) ```text 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) ``` ## ประโยชน์และการแลกเปลี่ยน ```text ✓ 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) ``` ## เหตุใดจึงมีความสำคัญ โมเดล atomic คือแนวทางที่มีลักษณะเฉพาะและได้รับความนิยมมากขึ้นสำหรับสถานะทั่วโลกที่กลับด้านโครงสร้าง top-down ของ Redux: แทนที่จะตัดเก็บข้อมูลขนาดใหญ่ คุณประกอบ atoms เล็ก ๆ ขึ้นบน ความเชี่ยวชาญด้านเม็ดอาหารของมันให้ re-render ที่มีประสิทธิภาพและเจาะจง โดยไม่มีตัวเลือก — สามารถแก้ไขปัญหาด้านประสิทธิภาพของ Context ได้โดยตรง การทำความเข้าใจ atoms (และ atoms ที่ได้มา) ทำให้ความรู้ของคุณเสร็จสมบูรณ์เกี่ยวกับพื้นที่การออกแบบการจัดการสถานะ พร้อมกับ single-store (Redux/Zustand) และโมเดล reactive (MobX/Signals) ช่วยให้คุณเลือกกระบวนทัศน์ที่เหมาะสมที่สุดกับรูปร่างสถานะของแอป