ควรใช้ API แบบ Imperative หรือ Declarative เมื่อใด

รีแอ็กต์สนับสนุนรูปแบบเชิงประกาศ: คุณอธิบายว่าส่วนติดต่อผู้ใช้ควรมีหน้าตาอย่างไรสำหรับสถานะหนึ่ง ๆ แล้วรีแอ็กต์จะปรับ DOM ให้สอดคล้อง พฤติกรรมส่วนใหญ่ไหลผ่านพร็อพและสถานะ แทนที่จะใช้คำสั่ง DOM โดยตรง

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

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

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

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

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

ควรเลือกเอพีไอเชิงประกาศ และใช้เอพีไอเชิงคำสั่งเฉพาะกับการโต้ตอบและการวัด เช่น การโฟกัส การเลื่อน ภาพเคลื่อนไหว การเล่นสื่อ และการอ่านขนาดหรือตำแหน่ง

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

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

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

คุณสามารถรีเซ็ตแบบฟอร์มแบบเชิงประกาศได้ด้วยการเปลี่ยนพร็อพคีย์ ซึ่งบังคับให้รีแอ็กต์เมานต์แบบฟอร์มใหม่พร้อมสถานะเริ่มต้น โดยไม่ต้องเรียกใช้คำสั่งเชิงคำสั่ง

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

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

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

คำแนะนำอย่างเป็นทางการมองว่าการอ้างอิงและแฮนเดิลเชิงคำสั่งเป็นทางออกจากโมเดล เป็นเครื่องมือสำหรับก้าวออกจากโมเดลเชิงประกาศเมื่อจำเป็นอย่างแท้จริง ไม่ใช่วิธีเริ่มต้นในการสร้างฟีเจอร์

การรักษาแนวคิดนี้ไว้ช่วยป้องกันการใช้งานมากเกินไป: ควรเลือกใช้ทางออกจากโมเดลก็ต่อเมื่อยืนยันแล้วว่าพร็อพและสถานะไม่สามารถแสดงพฤติกรรมนั้นได้อย่างสะอาด

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

ควรตรวจสอบด้วยว่าพื้นผิวมีขนาดเล็กและมีเอกสารกำกับ และคุณไม่ได้ใช้การอ้างอิงเพียงเพื่อส่งข้อมูลที่พร็อพสามารถส่งได้

แอปพลิเคชันจริงผสมผสานทั้งสองแนวทาง ตรรกะส่วนใหญ่อยู่ในรูปแบบเชิงประกาศ โดยมีแฮนเดิลเชิงคำสั่งเป็นชั้นบาง ๆ สำหรับการโต้ตอบเพียงไม่กี่อย่างที่จำเป็นต้องใช้

การรักษาสมดุลนี้ทำให้โค้ดคาดเดาและทดสอบได้ง่าย ขณะเดียวกันยังช่วยให้จัดการการโฟกัส การควบคุมสื่อ และการผสานรวมไลบรารีในจุดที่โค้ดเชิงประกาศเข้าไม่ถึง

เลือกเวลาที่เอพีไอเชิงคำสั่งเป็นเครื่องมือที่เหมาะสม

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

เปรียบเทียบหน้าต่างโมดัลเชิงประกาศและเชิงคำสั่ง เลือกใช้พร็อพคีย์สำหรับการรีเซ็ตแบบฟอร์ม และจำไว้ว่าแม้แต่เราเตอร์ของ Next.js ก็ใช้เมธอดเชิงคำสั่งสำหรับการดำเนินการ ควรรักษาชั้นเชิงคำสั่งให้มีขนาดเล็ก มีเอกสารกำกับ และมีเหตุผลรองรับ