Skip to main content

บันทึกการใช้งาน useRef createRef และ forwardRef ของ React

· 4 min read
Kongvut Sangkla

Intro

สวัสดีครับ บทความนี้จะเป็นการบบันทึกการใช้งาน useRef createRef และ forwardRef ของ React โดย useRef และ createRef มีความคล้ายคลึงกันมากและแตกต่างกันอย่างไรมาดูกัน 🚀

TL; DR;

  • useRef คือ React Hooks ที่สามารถเข้าถึงโดยการ Reference ไปที่ DOM element ใช้กับ Functional component สามารถทำ initialValue (.current) ได้
  • createRef คือ วิธีการ Access DOM nodes ด้วยการ Reference ใช้กับ Class component (การทำงานคล้ายกับ useRef)
  • forwardRef คือ การส่งต่อ Ref จาก Parent ไปที่ Child เมื่อสร้างเป็น Ref เป็น Component

ตัวอย่างการใช้งาน useRef

Live Editor
Result
Loading...
Live Editor
Result
Loading...

ความเหมือนกันระหว่าง useRef และ createRef

ถ้าดูแค่ผิวเผินอาจจะดูความแตกต่างของผลลัพธ์ไม่ออกเลย เพราะทั้งสอง Component นั้นให้ผลลัพธ์เหมือนกัน

Live Editor
Result
Loading...

ความแตกต่างระหว่าง useRef และ createRef

Live Editor
Result
Loading...
Live Editor
Result
Loading...
Live Editor
Result
Loading...
Live Editor
Result
Loading...

การใช้งาน forwardRef

forwardRef คือ การส่งต่อ Ref จาก Parent ไปที่ Child เมื่อสร้างเป็น Ref เป็น Component (Custom)

Live Editor
Result
Loading...

สรุป

ใช้ useRef

  • ใช้กับ Functional component
  • สามารถกำหนด initialValue (.current) ได้
  • เพื่อรักษาค่า Ref ปัจจุบันใช้อยู่ตลอดการใช้งานของ Functional component และเมื่อมีการ Re-Render จะไม่สร้างค่า Ref ขึ้นมาใหม่
  • ความสามารถในการทำ Memorize
  • อัปเดตค่า .current ได้ (แต่ต้องสั่ง Trigger อะไรบางอย่างให้ Re-Render จากนั้นค่าที่กำหนดถึงจะเปลี่ยนแปลง)

ใช้ createRef

  • ใช้กับ Class component
  • เมื่อต้องการรีเช็ต Ref ใหม่ทุกครั้งที่มีการ Re-Render

ใช้ forwardRef เมื่อต้องการส่งต่อ Ref จาก Parent ไปที่ Child เมื่อสร้างเป็น Ref เป็น Component

อ้างอิงและรายละเอียดอื่น ๆ

Loading...