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

คำอธิบายสั้นๆ เกี่ยวกับuseRefhook ใน React

บทความนี้จะอธิบายหัวข้อที่บางครั้งทำให้นักพัฒนาบางคนสับสน โดยเฉพาะอย่างยิ่งกับ React ใหม่

hook of useRef หากคุณไม่มีความคิดที่ชัดเจนว่า hook นี้ทำงานอย่างไร ต้องใช้เมื่อไหร่? บทความนี้จะเป็นประโยชน์กับคุณ

ใช้ตะขออ้างอิง

useRefเป็นฟังก์ชั่นที่สามารถใช้อาร์กิวเมนต์และกลับวัตถุที่มีคุณสมบัติที่currentมีมูลค่าที่ได้รับมอบหมาย

เกิดอะไรขึ้นถ้าฉันต้องการเปลี่ยนค่านั้น? เพียงเขียนดังนี้val.current = “bar"ค่าก็จะเปลี่ยนไปเพราะuseRefเป็นค่าที่ไม่แน่นอนซึ่งหมายความว่าสามารถกำหนดค่าได้ด้วยค่าใดๆ รวมถึงโหนดและองค์ประกอบ DOM เป็นค่า

ตอนนี้ค่าvar.currentได้เปลี่ยนไปแล้ว แต่ส่วนประกอบจะยังคงเหมือนเดิม เนื่องจากuseRefไม่ได้แสดงส่วนประกอบซ้ำแต่ให้พิมพ์ค่าของvar.current.

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

เข้าถึงองค์ประกอบใน DOM

วิธีที่ใช้บ่อยที่สุดuseRefคือการเข้าถึงองค์ประกอบ DOM วิธีการทำเช่นนี้คือการเพิ่มคุณสมบัติrefในองค์ประกอบ DOM

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

ในโค้ดด้านบนนี้ ฉันเพิ่มปุ่มที่เมื่อคลิกเหตุการณ์ ทริกเกอร์ฟังก์ชันที่เปลี่ยนข้อความเป็น 'Hola Mundo' และพื้นหลังเป็นสีแดง

มันทำงานได้อย่างสมบูรณ์และไม่ต้องแสดงองค์ประกอบซ้ำ

บทสรุป

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

เรียนรู้เพิ่มเติม