อะตอม: หน่วยของสถานะใน Jotai

ใน Jotai สถานะจะถูกแบ่งออกเป็นอะตอม ซึ่งเป็นส่วนเล็ก ๆ ของสถานะที่ตอบสนองต่อการเปลี่ยนแปลงและเป็นอิสระต่อกัน แต่ละอะตอมเก็บค่าเดียวและสร้างขึ้นนอกคอมโพเนนต์ด้วย atom(initialValue)

แนวคิดนี้สอดคล้องกับการแบ่งสถานะออกเป็นหน่วยที่เล็กที่สุดและมีความหมาย แทนที่จะใช้อ็อบเจ็กต์แหล่งเก็บสถานะขนาดใหญ่เพียงอันเดียว

เมื่อค่าของอะตอมเปลี่ยนแปลง เฉพาะคอมโพเนนต์ที่สมัครรับอะตอมนั้นโดยเฉพาะเท่านั้นที่จะถูกแสดงผลใหม่ คอมโพเนนต์ที่อ่านอะตอมอื่นจะไม่ได้รับผลกระทบ

การตอบสนองแบบละเอียดนี้เป็นข้อได้เปรียบหลักของ Jotai เมื่อเทียบกับ React Context ซึ่งจะแสดงผลคอมโพเนนต์ที่ใช้งานทั้งหมดใหม่เมื่อมีการเปลี่ยนแปลงใด ๆ

กำหนดอะตอมในระดับโมดูล: const countAtom = atom(0) วิธีนี้ทำให้เอกลักษณ์ของอะตอมคงที่ตลอดการแสดงผลใหม่ และป้องกันไม่ให้อะตอมถูกสร้างขึ้นใหม่ทุกครั้งที่ติดตั้งคอมโพเนนต์

อะตอมเป็นการอ้างอิงน้ำหนักเบา ไม่ได้เก็บค่าของตนเอง ค่าอยู่ในแหล่งเก็บสถานะของ Jotai

โดยค่าเริ่มต้น Jotai ใช้แหล่งเก็บสถานะส่วนกลางโดยปริยาย คุณไม่จำเป็นต้องครอบแอปด้วย Provider เพื่อเริ่มใช้อะตอม ทำให้เริ่มนำไปใช้ในโปรเจ็กต์เดิมได้ง่าย

อะตอมเข้าถึงได้จากทุกคอมโพเนนต์ในทรีโดยไม่ต้องส่งพร็อพต่อกันหลายทอดหรือส่งบริบทต่อผ่านคอมโพเนนต์

เมื่อคุณต้องการอินสแตนซ์อิสระหลายชุดของทรีคอมโพเนนต์เดียวกัน (เช่น แบบฟอร์มแยกกันสองชุดที่แต่ละชุดมีอะตอมสถานะของแบบฟอร์มเอง) ให้ครอบแต่ละชุดด้วย Jotai Provider แต่ละ Provider จะสร้างแหล่งเก็บสถานะที่แยกจากกัน

วิธีนี้มีประโยชน์สำหรับสถาปัตยกรรมไมโครฟรอนต์เอนด์หรือโครงร่างหน้าที่ซับซ้อนซึ่งมีส่วนสถานะอิสระหลายส่วน

แหล่งเก็บสถานะส่วนกลางจะคงอะตอมไว้ตลอดอายุการทำงานของแอป ส่วนแหล่งเก็บสถานะของ Provider แบบจำกัดขอบเขตจะรีเซ็ตเมื่อ Provider ถูกถอดออกจากทรี จึงเหมาะสำหรับกล่องโต้ตอบแบบโมดอลหรือสถานะระดับหน้าที่ไม่ควรคงอยู่ทั่วทั้งแอป

คุณยังสามารถส่งอินสแตนซ์แหล่งเก็บสถานะแบบกำหนดเองไปยัง Provider เพื่อแยกการแสดงผลฝั่งเซิร์ฟเวอร์ได้

Zustand ใช้อ็อบเจ็กต์แหล่งเก็บสถานะเดียวร่วมกับตัวเลือกข้อมูลเพื่อป้องกันการแสดงผลใหม่โดยไม่จำเป็น ส่วน Jotai แบ่งสถานะออกเป็นอะตอม และแต่ละคอมโพเนนต์จะสมัครรับเฉพาะอะตอมที่ตนอ่าน

Jotai เหมาะกับสถานะส่วนติดต่อผู้ใช้ที่ต้องตอบสนองอย่างละเอียด เช่น ค่าของช่องรับข้อมูลแต่ละช่องและแฟล็กสลับสถานะ ส่วน Zustand เหมาะกับสถานะแอปพลิเคชันขนาดใหญ่ที่เชื่อมโยงกัน

React Context จะแสดงผลคอมโพเนนต์ที่ใช้งานทั้งหมดใหม่ทุกครั้งที่ค่าของบริบทเปลี่ยนแปลง แม้ว่าคอมโพเนนต์นั้นจะสนใจเพียงฟิลด์เดียวในอ็อบเจ็กต์บริบทก็ตาม

Jotai แก้ปัญหานี้ได้: คอมโพเนนต์ที่ใช้ useAtom(nameAtom) จะถูกแสดงผลใหม่เฉพาะเมื่อ nameAtom เปลี่ยนแปลง ไม่ใช่เมื่ออะตอมอื่นเปลี่ยนแปลง

Jotai ใช้การเปรียบเทียบ Object.is โดยค่าเริ่มต้นเพื่อตรวจสอบว่าค่าของอะตอมเปลี่ยนแปลงหรือไม่ หากคุณกำหนดค่าเดิมให้อะตอมอีกครั้ง จะไม่ทำให้เกิดการแสดงผลใหม่

สำหรับอ็อบเจ็กต์ที่ซับซ้อน ให้ใช้ยูทิลิตี selectAtom เพื่อสร้างค่าพื้นฐานที่คงที่จากอะตอมขนาดใหญ่ ป้องกันการแสดงผลใหม่เมื่อฟิลด์ที่ไม่เกี่ยวข้องเปลี่ยนแปลง

useState เป็นสถานะเฉพาะของคอมโพเนนต์เดียว ส่วนอะตอมใช้ร่วมกันได้ตลอดทั้งทรีคอมโพเนนต์โดยไม่ต้องส่งต่ออย่างชัดเจน เมื่อคอมโพเนนต์พี่น้องสองคอมโพเนนต์อ่านอะตอมเดียวกัน ทั้งสองจะซิงค์กันโดยอัตโนมัติ

วิธีนี้ทำให้ไม่จำเป็นต้องยกสถานะขึ้นเพื่อใช้ร่วมกันระหว่างคอมโพเนนต์ และยังคงลดการแสดงผลใหม่ให้น้อยที่สุด

อะตอมที่ใช้กันทั่วไป ได้แก่ const themeAtom = atom('light'), const cartItemsAtom = atom([]), const selectedUserIdAtom = atom(null) โดยกำหนดไว้ครั้งเดียวและนำเข้าไปใช้ที่ใดก็ได้ในแอปพลิเคชัน

อะตอมแต่ละรายการเป็นอิสระต่อกัน การอัปเดต cartItemsAtom จะไม่ทำให้คอมโพเนนต์ที่อ่านเฉพาะ themeAtom แสดงผลใหม่

Jotai แตกต่างจาก React Context ในด้านการเรนเดอร์ใหม่อย่างไร

อะตอมเป็นหน่วยพื้นฐานของสถานะใน Jotai โดยสร้างด้วย atom(initialValue) ภายนอกคอมโพเนนต์ และใช้ร่วมกันทั่วทั้งต้นไม้คอมโพเนนต์ได้โดยไม่ต้องใช้ Provider ตามค่าเริ่มต้น เมื่ออะตอมเปลี่ยนแปลง เฉพาะสมาชิกที่สมัครรับการเปลี่ยนแปลงจากอะตอมนั้นเท่านั้นที่จะเรนเดอร์ใหม่

การตอบสนองแบบละเอียดนี้เป็นข้อได้เปรียบสำคัญของ Jotai เหนือ React Context และรูปแบบการสมัครรับข้อมูลแยกตามอะตอมก็แตกต่างจากแนวทางที่ใช้ store เดียวของ Zustand