Ref ใน React

หากเราต้องการจดจำข้อมูลบางอย่าง แต่ไม่ต้องการให้การเปลี่ยนแปลงของข้อมูลนั้นกระตุ้นให้ คอมโพเนนต์เรนเดอร์ใหม่ เราก็จะต้องใช้ Ref และตรงกันนั้นก็คือ ฮุค useRef ที่ทำงานกับ Ref

Ref (หรือ reference) คืออ็อบเจ็กต์ JavaScript ทั่วไปที่มีคุณสมบัติเพียงอย่างเดียวคือ current ซึ่งคุณสามารถอ่านหรือเปลี่ยนแปลงได้

เช่นเดียวกับ State, Ref สามารถเก็บข้อมูลชนิดใดก็ได้ ซึ่งอาจเป็นตัวเลข, สตริง, อ็อบเจ็กต์ หรือแม้แต่ฟังก์ชัน

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

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

ในบทเรียนถัดไป เราจะวิเคราะห์การทำงานกับ Ref และฮุค useRef ในทางปฏิบัติ