API และพารามิเตอร์ของ useSyncExternalStore
เรียนรู้อาร์กิวเมนต์ subscribe, getSnapshot และ getServerSnapshot รวมถึงสิ่งที่แต่ละอาร์กิวเมนต์ต้องรับประกัน
API และพารามิเตอร์ของ useSyncExternalStore เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน
ภาพรวมอาร์กิวเมนต์ทั้งสาม
useSyncExternalStore รับอาร์กิวเมนต์ได้สูงสุดสามรายการ ได้แก่ ฟังก์ชันสมัครรับการแจ้งเตือน getSnapshot และ getServerSnapshot ที่เป็นตัวเลือก อาร์กิวเมนต์เหล่านี้ร่วมกันบอกรีแอ็กต์ว่าจะรับฟังการเปลี่ยนแปลงและอ่านค่าปัจจุบันอย่างไร
การทำความเข้าใจอาร์กิวเมนต์แต่ละรายการเป็นสิ่งจำเป็น เพราะข้อผิดพลาดเล็กน้อยในอาร์กิวเมนต์เหล่านี้เป็นสาเหตุที่พบบ่อยที่สุดของปัญหาเมื่อใช้ฮุกนี้
ฟังก์ชันสมัครรับการแจ้งเตือน
ฟังก์ชันสมัครรับการแจ้งเตือนจะได้รับฟังก์ชันเรียกกลับจากรีแอ็กต์ และต้องลงทะเบียนฟังก์ชันนั้นกับสโตร์ เพื่อให้ฟังก์ชันเรียกกลับทำงานทุกครั้งที่สโตร์เปลี่ยนแปลง ฟังก์ชันนี้ต้องคืนฟังก์ชันยกเลิกการสมัครรับการแจ้งเตือน ซึ่งรีแอ็กต์จะเรียกใช้เมื่อทำความสะอาด
รีแอ็กต์ใช้สิ่งนี้เพื่อทราบว่าเมื่อใดควรอ่านสแนปชอตอีกครั้ง ดังนั้นฟังก์ชันสมัครรับการแจ้งเตือนจึงมีหน้าที่เพียงเชื่อมต่อและยกเลิกการแจ้งเตือนการเปลี่ยนแปลง
getSnapshot คืนค่าปัจจุบัน
getSnapshot คืนค่าปัจจุบันของสโตร์ รีแอ็กต์เรียกใช้ระหว่างการเรนเดอร์เพื่ออ่านสถานะ และเรียกใช้อีกครั้งหลังได้รับการแจ้งเตือนเพื่อตรวจว่าค่าเปลี่ยนแปลงหรือไม่
สิ่งสำคัญคือ เมื่อข้อมูลต้นทางไม่เปลี่ยนแปลง ฟังก์ชันนี้ต้องคืนผลลัพธ์ที่คงที่ในเชิงการอ้างอิง โดยคืนการอ้างอิงเดิมแทนการสร้างออบเจ็กต์ใหม่ทุกครั้ง
getServerSnapshot สำหรับ SSR
getServerSnapshot ที่เป็นตัวเลือกจะมอบค่าที่ใช้ระหว่างการเรนเดอร์ฝั่งเซิร์ฟเวอร์และรอบไฮเดรชันเริ่มต้น ค่านี้มีอยู่เพราะ getSnapshot ที่ทำงานเฉพาะในเบราว์เซอร์อาจพึ่งพาเอพีไอที่ไม่มีอยู่บนเซิร์ฟเวอร์
การกำหนดค่านี้จะป้องกันค่าที่ไม่ตรงกันระหว่างไฮเดรชัน โดยให้เซิร์ฟเวอร์มีค่าที่เหมาะสมสำหรับเรนเดอร์และตรงกับสิ่งที่ฝั่งไคลเอนต์จะสร้างขึ้นในตอนแรก
ค่าที่คืนกลับ
ฮุกจะคืนค่าสแนปชอตปัจจุบัน ซึ่งคุณสามารถใช้โดยตรงในคอมโพเนนต์ได้เช่นเดียวกับสถานะส่วนอื่น เมื่อสโตร์เปลี่ยนแปลง รีแอ็กต์จะเรนเดอร์ใหม่ และฮุกจะคืนสแนปชอตที่อัปเดตแล้ว
จากมุมมองของคอมโพเนนต์ การทำงานนี้ให้ความรู้สึกเหมือนการอ่านสถานะที่ตอบสนองต่อการเปลี่ยนแปลง แม้แหล่งข้อมูลหลักจะอยู่นอกรีแอ็กต์ทั้งหมด
getSnapshot ต้องทำงานแบบพร้อมกันและสอดคล้องกัน
getSnapshot ต้องทำงานแบบพร้อมกันและคืนค่าที่คำนวณจากสถานะปัจจุบันของสโตร์โดยตรงเท่านั้น ไม่ควรทำงานแบบไม่พร้อมกันหรือให้ผลลัพธ์ต่างกันเมื่อข้อมูลต้นทางเหมือนเดิม
รีแอ็กต์อาศัยการเรียกใช้ฟังก์ชันนี้ซ้ำ ๆ และเปรียบเทียบผลลัพธ์ ดังนั้นความไม่แน่นอนหรือผลข้างเคียงใด ๆ ภายในฟังก์ชันอาจทำให้เกิดพฤติกรรมที่ไม่ถูกต้อง
รูปแบบสแนปชอตแบบไม่เปลี่ยนรูป
สโตร์ที่เก็บสถานะแบบไม่เปลี่ยนรูปทำให้ getSnapshot ใช้งานได้ง่าย เพราะการอ้างอิงออบเจ็กต์สถานะปัจจุบันจะเปลี่ยนเฉพาะเมื่อข้อมูลเปลี่ยนแปลง การคืนการอ้างอิงนั้นจึงทำให้การเปรียบเทียบมีความคงที่โดยอัตโนมัติ
นี่คือเหตุผลที่รูปแบบการอัปเดตแบบไม่เปลี่ยนรูปทำงานร่วมกับฮุกนี้ได้ดีมาก กล่าวคือข้อมูลที่เท่ากันจะมีการอ้างอิงเดียวกัน และรีแอ็กต์จะข้ามการเรนเดอร์ใหม่ที่ไม่จำเป็น
ข้อผิดพลาดที่ทำให้เกิดลูปไม่สิ้นสุด
ข้อผิดพลาดที่พบบ่อยคือการคืนออบเจ็กต์หรืออาร์เรย์ใหม่จาก getSnapshot ทุกครั้งที่เรียกใช้ เช่น การแมปหรือการกรองข้อมูลภายในฟังก์ชัน รีแอ็กต์จะเห็นการอ้างอิงใหม่ทุกครั้งและคิดว่าค่าเปลี่ยนแปลงแล้ว
สิ่งนี้ทำให้เกิดการเรนเดอร์ใหม่ไม่สิ้นสุดหรือคำเตือน วิธีแก้คือแคชค่าที่คำนวณแล้วและคืนการอ้างอิงเดิมจนกว่าข้อมูลต้นทางจะเปลี่ยนแปลงจริง
การรักษาสแนปชอตให้คงที่
เพื่อหลีกเลี่ยงลูป ให้คำนวณข้อมูลที่ได้จากข้อมูลต้นทางไว้นอก getSnapshot หรือทำเมโมไลซ์ข้อมูลนั้น เพื่อให้ฟังก์ชันคืนการอ้างอิงที่แคชไว้ รูปแบบการเลือกข้อมูลที่ไลบรารีจำนวนมากใช้มีไว้จัดการความคงที่นี้โดยเฉพาะ
กฎสำคัญคือ การเรียก getSnapshot สองครั้งโดยที่ข้อมูลในสโตร์ไม่เปลี่ยนแปลง ต้องคืนการอ้างอิงเดียวกันทุกประการ
รวมพารามิเตอร์เข้าด้วยกัน
ในทางปฏิบัติ คุณจะเขียนฟังก์ชันสมัครรับการแจ้งเตือนที่เพิ่มและลบตัวรับฟังเหตุการณ์ เขียน getSnapshot ที่อ่านค่าปัจจุบันซึ่งคงที่ และสำหรับ SSR ให้เขียน getServerSnapshot ที่คืนค่าซึ่งปลอดภัยสำหรับเซิร์ฟเวอร์
เมื่อทั้งสามส่วนถูกต้อง ฮุกจะมอบการอ่านข้อมูลจากสโตร์ภายนอกที่สอดคล้องกันและปลอดภัยต่อการทำงานพร้อมกัน โดยใช้ขั้นตอนประกอบเพียงเล็กน้อย
ตรวจสอบสั้น ๆ: พารามิเตอร์ของ useSyncExternalStore
ระบุหน้าที่ของ getSnapshot
สรุป: เอพีไอของ useSyncExternalStore
ฮุกนี้รับฟังก์ชันสมัครรับการแจ้งเตือน getSnapshot และ getServerSnapshot ซึ่งเป็นตัวเลือก ฟังก์ชันสมัครรับการแจ้งเตือนจะเชื่อมต่อตัวรับฟังเหตุการณ์และคืนฟังก์ชันยกเลิกการสมัครรับ ส่วน getSnapshot จะอ่านค่าปัจจุบันแบบพร้อมกันและต้องคงที่ในเชิงการอ้างอิง ขณะที่ getServerSnapshot จะมอบค่าที่ปลอดภัยสำหรับ SSR
ข้อผิดพลาดสำคัญคือการคืนออบเจ็กต์ใหม่ทุกครั้งที่เรียกใช้ ซึ่งทำให้เกิดลูปไม่สิ้นสุด ให้แคชค่าที่คำนวณแล้ว เพื่อให้ข้อมูลที่ไม่เปลี่ยนแปลงคืนการอ้างอิงเดิม
คำถามที่พบบ่อย
บทเรียน “API และพารามิเตอร์ของ useSyncExternalStore” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “API และพารามิเตอร์ของ useSyncExternalStore” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “API และพารามิเตอร์ของ useSyncExternalStore”
เรียนรู้อาร์กิวเมนต์ subscribe, getSnapshot และ getServerSnapshot รวมถึงสิ่งที่แต่ละอาร์กิวเมนต์ต้องรับประกัน คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “API และพารามิเตอร์ของ useSyncExternalStore” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม
ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ปัญหาของการสมัครรับข้อมูลจากสโตร์ภายนอก
- API และพารามิเตอร์ของ useSyncExternalStore
- การสมัครรับข้อมูลจาก API ของเบราว์เซอร์
- การสร้างสโตร์แบบกำหนดเองด้วย useSyncExternalStore