การสมัครรับข้อมูลจาก API ของเบราว์เซอร์
สร้างฮุกที่สมัครรับข้อมูลจาก matchMedia, navigator.onLine, ประวัติของหน้าต่าง และ localStorage โดยใช้ useSyncExternalStore
การสมัครรับข้อมูลจาก API ของเบราว์เซอร์ เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน
การสมัครรับ matchMedia
คิวรีสื่อของเบราว์เซอร์เป็นสโตร์ภายนอกที่เหมาะอย่างยิ่ง คุณสามารถสมัครรับคิวรี matchMedia สำหรับโหมดมืดหรือจุดเปลี่ยนขนาดหน้าจอ และเรนเดอร์ใหม่ทุกครั้งที่สถานะการจับคู่เปลี่ยน
ฟังก์ชันสมัครรับการแจ้งเตือนจะเพิ่มตัวรับฟังการเปลี่ยนแปลงให้กับ MediaQueryList ส่วน getSnapshot จะคืนค่าจริงเท็จของการจับคู่ปัจจุบัน ทำให้เข้าถึงเงื่อนไขตามขนาดหน้าจอได้แบบตอบสนองต่อการเปลี่ยนแปลง
ฮุก useMediaQuery
การห่อหุ้มตรรกะดังกล่าวไว้ในฮุก useMediaQuery ทำให้คอมโพเนนต์ตรวจได้ว่าคิวรีตรงกันหรือไม่ด้วยการเรียกใช้เพียงครั้งเดียว ฮุกจะสร้างฟังก์ชันสมัครรับการแจ้งเตือนและ getSnapshot ที่คงที่รอบสตริงคิวรีที่กำหนด
สิ่งนี้สร้างพื้นฐานที่สะอาดและนำกลับมาใช้ใหม่ได้สำหรับพฤติกรรมตามขนาดหน้าจอ ซึ่งยังคงสอดคล้องกันภายใต้การเรนเดอร์พร้อมกันด้วย useSyncExternalStore
สถานะ navigator.onLine
เบราว์เซอร์มีเหตุการณ์ออนไลน์และออฟไลน์ รวมถึง navigator.onLine การสมัครรับเหตุการณ์เหล่านั้นและอ่านพร็อพเพอร์ตีนี้จะทำให้คุณมีสถานะการเชื่อมต่อแบบปัจจุบันภายในรีแอ็กต์
getSnapshot จะคืนค่า navigator.onLine และฟังก์ชันสมัครรับการแจ้งเตือนจะเชื่อมต่อตัวรับฟังสำหรับเหตุการณ์ออนไลน์และออฟไลน์ เพื่อให้คอมโพเนนต์อัปเดตเมื่อการเชื่อมต่อเปลี่ยนแปลง
ฮุก useOnlineStatus
การรวมสิ่งนี้ไว้ในฮุก useOnlineStatus ทำให้คอมโพเนนต์ใด ๆ แสดงแบนเนอร์เมื่อออฟไลน์หรือปิดใช้งานการทำงานเมื่อเครือข่ายขาดหายได้ เอกสารรีแอ็กต์อย่างเป็นทางการใช้ตัวอย่างนี้โดยตรงเพื่อสาธิตฮุก
นี่เป็นกรณีขนาดเล็กแต่แสดงให้เห็นชัดเจนว่า สัญญาณจากเบราว์เซอร์ภายนอกสามารถจับคู่กับสถานะที่ตอบสนองต่อการเปลี่ยนแปลงได้อย่างเหมาะสม
การสมัครรับ window.location
คุณสามารถสมัครรับการเปลี่ยนแปลงการนำทางได้โดยรับฟังเหตุการณ์ popstate และอ่าน window.location ใน getSnapshot วิธีนี้เป็นพื้นฐานของตัวจัดการเส้นทางแบบกำหนดเองอย่างง่ายที่สร้างบนส่วนติดต่อประวัติ
เนื่องจาก pushState ไม่ส่งเหตุการณ์ popstate ตัวจัดการเส้นทางแบบกำหนดเองจึงมักส่งเหตุการณ์ของตนเอง เพื่อให้สแนปชอตอัปเดตเมื่อมีการนำทางโดยโปรแกรมด้วย
localStorage ข้ามแท็บผ่านเหตุการณ์ storage
เหตุการณ์ storage จะทำงานในแท็บอื่นเมื่อ localStorage เปลี่ยนแปลง ทำให้ localStorage เป็นสโตร์ภายนอกที่คุณสามารถสมัครรับได้ getSnapshot จะอ่านค่าปัจจุบัน ส่วนฟังก์ชันสมัครรับการแจ้งเตือนจะรับฟังเหตุการณ์ storage
สิ่งนี้ทำให้ซิงโครไนซ์ข้อมูลระหว่างแท็บได้ โดยเมื่ออัปเดตค่าในแท็บหนึ่ง คอมโพเนนต์ในอีกแท็บจะอัปเดตตามแบบตอบสนองต่อการเปลี่ยนแปลง
deviceOrientation
เหตุการณ์ deviceorientation รายงานการเอียงทางกายภาพของอุปกรณ์ การสมัครรับเหตุการณ์นี้และอ่านมุมล่าสุดใน getSnapshot จะเปลี่ยนข้อมูลการเคลื่อนไหวให้เป็นสถานะที่ตอบสนองต่อการเปลี่ยนแปลง
สิ่งนี้มีประโยชน์สำหรับเอฟเฟกต์พารัลแลกซ์หรือการแสดงผลข้อมูลแบบโต้ตอบที่ตอบสนองต่อวิธีถือโทรศัพท์
ตัวห่อหุ้ม IntersectionObserver
IntersectionObserver แจ้งให้ทราบเมื่อองค์ประกอบเข้าสู่หรือออกจากพื้นที่แสดงผล คุณสามารถห่อหุ้มการทำงานนี้โดยให้ฟังก์ชันสมัครรับการแจ้งเตือนสร้างตัวสังเกต และให้ getSnapshot คืนค่า isIntersecting ล่าสุด
สิ่งนี้มอบตัวบ่งชี้ isVisible ที่ตอบสนองต่อการเปลี่ยนแปลง สำหรับการโหลดรูปภาพแบบเลื่อนเวลา การเรียกใช้ภาพเคลื่อนไหว หรือการสร้างจุดตรวจจับการเลื่อนแบบไม่สิ้นสุด
ResizeObserver สำหรับขนาดองค์ประกอบ
ResizeObserver รายงานการเปลี่ยนแปลงขนาดขององค์ประกอบ การห่อหุ้มการทำงานนี้ช่วยให้ฟังก์ชันสมัครรับการแจ้งเตือนสังเกตองค์ประกอบ และให้ getSnapshot คืนขนาดปัจจุบัน เพื่อให้คอมโพเนนต์ตอบสนองต่อการเปลี่ยนแปลงเค้าโครงได้อย่างแม่นยำ
วิธีนี้มีประสิทธิภาพและแม่นยำกว่าการรับฟังการปรับขนาดหน้าต่าง เมื่อคุณสนใจองค์ประกอบใดองค์ประกอบหนึ่งแทนที่จะสนใจพื้นที่แสดงผลทั้งหมด
ประกอบเป็น useWindowSize
คุณสามารถรวมเหตุการณ์การปรับขนาดเข้ากับฮุกเพื่อสร้าง useWindowSize ที่คืนความกว้างและความสูงปัจจุบันได้ ฟังก์ชันสมัครรับการแจ้งเตือนจะเชื่อมต่อตัวรับฟังการปรับขนาด และ getSnapshot จะอ่านขนาดหน้าต่าง
อย่าลืมคืนสแนปชอตที่คงที่ โดยแคชออบเจ็กต์ขนาดไว้ เพื่อไม่ให้ขนาดที่ไม่เปลี่ยนแปลงทำให้เกิดการเรนเดอร์ใหม่ และทำให้การประกอบมีประสิทธิภาพ
ตรวจสอบสั้น ๆ: การใช้งาน useMediaQuery
พิจารณาว่าฮุก useMediaQuery ใช้ฮุกสโตร์อย่างไร
สรุป: การสมัครรับเอพีไอของเบราว์เซอร์
เอพีไอของเบราว์เซอร์จำนวนมากเป็นสโตร์ภายนอกที่คุณเชื่อมต่อได้ด้วย useSyncExternalStore ได้แก่ matchMedia สำหรับจุดเปลี่ยนขนาดหน้าจอ navigator.onLine สำหรับการเชื่อมต่อ location และ storage สำหรับการนำทางและการซิงโครไนซ์ระหว่างแท็บ รวมถึงตัวสังเกตการวางแนว การตัดกับพื้นที่แสดงผล และการปรับขนาด
ทั้งหมดมีโครงสร้างเหมือนกัน คือฟังก์ชันสมัครรับการแจ้งเตือนที่เชื่อมต่อและนำตัวรับฟังเหตุการณ์ออก และ getSnapshot ที่คงที่ จากนั้นนำไปประกอบเป็นฮุกอย่าง useMediaQuery, useOnlineStatus และ useWindowSize
คำถามที่พบบ่อย
บทเรียน “การสมัครรับข้อมูลจาก API ของเบราว์เซอร์” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การสมัครรับข้อมูลจาก API ของเบราว์เซอร์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การสมัครรับข้อมูลจาก API ของเบราว์เซอร์”
สร้างฮุกที่สมัครรับข้อมูลจาก matchMedia, navigator.onLine, ประวัติของหน้าต่าง และ localStorage โดยใช้ useSyncExternalStore คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “การสมัครรับข้อมูลจาก API ของเบราว์เซอร์” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม
ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ปัญหาของการสมัครรับข้อมูลจากสโตร์ภายนอก
- API และพารามิเตอร์ของ useSyncExternalStore
- การสมัครรับข้อมูลจาก API ของเบราว์เซอร์
- การสร้างสโตร์แบบกำหนดเองด้วย useSyncExternalStore