forwardRef: การเปิดเผยรีฟ DOM ให้คอมโพเนนต์แม่

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

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

React.forwardRef ช่วยให้คอมโพเนนต์รับ ref จากคอมโพเนนต์แม่และส่งต่อไปยังองค์ประกอบของตัวเองตัวหนึ่งได้ โดยจะห่อฟังก์ชันคอมโพเนนต์และเปลี่ยนลายเซ็นของฟังก์ชันให้ ref มาเป็นอาร์กิวเมนต์ตัวที่สองควบคู่กับพร็อพ

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

ฟังก์ชันที่ห่อหุ้มรับพารามิเตอร์สองตัว: (props, ref) ตัวแรกคือออบเจ็กต์พร็อพตามปกติ ส่วนตัวที่สองคือ ref ที่ส่งต่อ จากนั้นให้กระจายหรือผูก ref เข้ากับองค์ประกอบที่ต้องการเปิดเผย เช่น ref={ref} บนองค์ประกอบ input ภายใน

โปรดจำไว้ว่ามีเพียงคอมโพเนนต์ที่ห่อด้วย forwardRef เท่านั้นที่ได้รับอาร์กิวเมนต์ตัวที่สองนี้ คอมโพเนนต์ฟังก์ชันทั่วไปที่ระบุ ref เป็นพารามิเตอร์ตัวที่สองจะได้รับค่า undefined เท่านั้น

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

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

ref ที่ส่งต่อยังช่วยให้วัดขนาดได้ คอมโพเนนต์แม่สามารถอ่าน offsetWidth, offsetHeight หรือเรียกใช้ getBoundingClientRect กับองค์ประกอบลูกที่ได้รับผ่าน forwardRef

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

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

การกระทำเหล่านี้เป็นการกระทำแบบสั่งการที่ไม่มีรูปแบบเทียบเท่าแบบประกาศที่สะอาดตา ซึ่งตรงกับประเภทการโต้ตอบที่ ref มีไว้จัดการพอดี

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

ตัวห่อหุ้มทุกตัวในสายการส่งต่อนี้ต้องใช้ forwardRef ด้วยตนเองและส่ง ref ต่อไป เพราะคอมโพเนนต์ทั่วไปที่อยู่ตรงกลางจะตัดการเชื่อมต่อนี้

forwardRef และ React.memo สามารถใช้ร่วมกันเพื่อให้ได้ทั้งการส่งต่อ ref และการจดจำผลการเรนเดอร์ ลำดับที่ใช้โดยทั่วไปคือ memo(forwardRef(Component)) โดยห่อผลลัพธ์ของ forwardRef เพื่อให้การเปรียบเทียบของ memo ยังคงมีผล

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

ใน React DevTools คอมโพเนนต์ forwardRef จะแสดงด้วยป้าย ForwardRef ที่ครอบชื่อคอมโพเนนต์ไว้ ทำให้ตรวจสอบได้ง่ายทันทีว่าคอมโพเนนต์นั้นมีส่วนร่วมในการส่งต่อ ref

คุณสามารถตั้งชื่อให้ฟังก์ชันภายในหรือตั้งค่า displayName เพื่อให้รายการใน DevTools ชัดเจนกว่าป้าย ForwardRef แบบไม่ระบุชื่อทั่วไป

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

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

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

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

ทดสอบความเข้าใจเกี่ยวกับวิธีที่คอมโพเนนต์ forwardRef ได้รับ ref

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

forwardRef สามารถประกอบร่วมกับ memo เชื่อมต่อผ่านหลายชั้นได้ และจะแสดงเป็น ForwardRef ใน DevTools ใช้สำหรับการเข้าถึง DOM แบบสั่งการ ไม่ใช่สำหรับส่งข้อมูล ซึ่งพร็อพเหมาะกับงานนี้มากกว่า