useImperativeHandle: ค่าที่กำหนดเองของอินสแตนซ์

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

บางครั้งคุณอาจต้องการมอบออบเจ็กต์ขนาดเล็กที่คัดสรรแล้วให้คอมโพเนนต์แม่ แทนการมอบโหนด DOM ทั้งหมด เพื่อให้ API สาธารณะของคอมโพเนนต์มีขอบเขตแคบอย่างตั้งใจ

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

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

ฮุกนี้รับ ref ที่ส่งต่อเป็นอาร์กิวเมนต์แรก และฟังก์ชันสร้างเป็นอาร์กิวเมนต์ที่สอง ฟังก์ชันสร้างจะส่งคืนออบเจ็กต์แฮนเดิลที่กลายเป็น ref.current ในคอมโพเนนต์แม่

คุณเรียกใช้ได้ดังนี้ useImperativeHandle(ref, () => ({ ... })) โดยสร้างออบเจ็กต์ของเมธอดและค่าที่ต้องการให้ใช้งานได้จากภายในฟังก์ชันสร้าง

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

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

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

วิธีนี้สะดวกสำหรับโค้ดที่ต้องเรียกกล่องโต้ตอบจากหลายจุด เช่น การแสดงกล่องยืนยันหลังการทำงานแบบอะซิงโครนัสเสร็จสิ้น

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

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

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

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

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

ดังนั้นจึงใช้สองสิ่งนี้ร่วมกัน: forwardRef นำ ref เข้ามา และ useImperativeHandle กำหนดว่าท้ายที่สุดแล้ว ref นั้นจะชี้ไปยังสิ่งใด

หากต้องการทดสอบแฮนเดิล ให้เรนเดอร์คอมโพเนนต์พร้อม ref จากนั้นเรียกใช้เมธอดผ่าน ref.current ภายในบล็อก act และตรวจสอบพฤติกรรมหรือการเปลี่ยนแปลง DOM ที่เกิดขึ้น

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

ใน TypeScript คุณกำหนดอินเทอร์เฟซที่อธิบายแฮนเดิล เช่น อินเทอร์เฟซที่มีเมธอด focus และ clear จากนั้นใช้ชนิดนี้กับทั้งพารามิเตอร์ชนิดทั่วไปของ forwardRef และ ref ที่คอมโพเนนต์แม่ถืออยู่

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

ยืนยันว่า useImperativeHandle มีไว้เพื่ออะไรอย่างแท้จริง

useImperativeHandle ปรับแต่งสิ่งที่ ref ที่ส่งต่อเปิดเผย โดยรับ ref และฟังก์ชันสร้างที่ส่งคืนออบเจ็กต์แฮนเดิล คุณใช้สิ่งนี้เพื่อเปิดเผย API ขนาดเล็ก เช่น focus และ clear หรือ open และ close บนกล่องโต้ตอบ

useImperativeHandle ใช้คู่กับ forwardRef เสมอ รองรับอาร์เรย์การพึ่งพาเพื่อปรับปรุงแฮนเดิล และใช้ร่วมกับอินเทอร์เฟซ TypeScript และการทดสอบที่มุ่งเน้นเฉพาะจุดได้เป็นอย่างดี การจำกัดพื้นที่ที่เปิดเผยคือความตั้งใจและเป็นการออกแบบที่ดี