การใช้ Hook useRef สำหรับการทำงานกับ Refs ใน React

ในบทเรียนนี้เราจะทำงานกับ Refs เพื่อความชัดเจน มาทำความเข้าใจการทำงานของ Hook useRef โดยเปรียบเทียบกับ Hook useState กัน

มาเริ่มสร้างคอมโพเนนต์ที่มีปุ่มกัน:

App.jsxreturn (
  <div>
    <button>
      state click
    </button>
  </div>
);

นำเข้า useState ไปยังคอมโพเนนต์:

App.jsximport { useState } from 'react';

และสร้าง state state:

App.jsxconst [state, setState] = useState(0);

ตอนนี้ทำให้เมื่อคลิกที่ ปุ่ม state ของเราเพิ่มขึ้น 1 ค่าของ state จะ ถูกแสดงในข้อความบนปุ่ม:

App.jsx<button onClick={handleStateClick}>
  state click: {state}
</button>

อธิบายฟังก์ชันสำหรับจัดการการคลิก ที่ปุ่ม handleStateClick:

App.jsxfunction handleStateClick() {
  setState(state + 1);
}

ลองกดปุ่มดูและจะเห็นว่า ค่าของ state เพิ่มขึ้น

ตอนนี้มาสร้างคอมโพเนนต์ App แต่ใช้ไม่ใช่ state, แต่ใช้ ref แทน

เริ่มแรก นำเข้า useRef ไปยังคอมโพเนนต์:

App.jsximport { useRef } from 'react';

และสร้าง ref ref Hook useRef ส่งคืนผลลัพธ์เป็น วัตถุ ref ที่มีคุณสมบัติเดียวคือ current ซึ่งจะทำให้เรา สนใจต่อไปในภายหลัง กำหนด ค่าเริ่มต้นเป็น 0:

App.jsxconst ref = useRef(0);

เพิ่มตัวจัดการการคลิก บนปุ่ม จำไว้ว่าเรา ควรอ่าน/เปลี่ยนแปลงไม่ใช่ ref เอง, แต่เป็นคุณสมบัติ current ของมัน:

App.jsx<button onClick={handleRefClick}>
  ref click: {ref.current}
</button>

เพิ่มฟังก์ชันสำหรับจัดการการคลิก บนปุ่มของเรา ที่นี่เรา จะเพิ่ม current ขึ้น 1, เช่นเดียวกับตัวอย่างก่อนหน้านี้ที่มี state ใน ความแตกต่างจาก state ที่ต้องการฟังก์ชัน setState เพื่อเปลี่ยนค่า, กับคุณสมบัติของ ref เราใช้งานโดยตรง:

App.jsxfunction handleRefClick() {
  ref.current = ref.current + 1;
}

ตอนนี้ลองกดปุ่มของเรา และสิ่งที่เรา เห็นล่ะ? เมื่อคลิกมัน, เหมือนที่เรา มีค่าเริ่มต้น 0, มันก็ไม่ เปลี่ยนแปลง

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

App.jsxfunction handleRefClick() {
  ref.current = ref.current + 1;
  console.log('ref click: ' + ref.current);
}

ตอนนี้ เปิดคอนโซลในเบราว์เซอร์ แล้ว คลิกปุ่มอีกครั้งและมั่นใจว่า ค่าเปลี่ยนแปลงจริงในทุกๆ การคลิกและไม่มีอะไรหลอกลวง

ตอนนี้เราเห็นว่าไม่เหมือน state, การเปลี่ยนแปลงค่าของ ref ไม่ทำให้เกิด การเรนเดอร์คอมโพเนนต์ใหม่ ดังนั้นเราทุกครั้ง ในข้อความบนปุ่มจึงเห็นค่าเริ่มต้น 0

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