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

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

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

return (
	<div>
		<button>
			state click
		</button>
	</div>
);

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

import { useState } from 'react';

และสร้าง state state:

const [state, setState] = useState(0);

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

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

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

function handleStateClick() {
	setState(state + 1);
}

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

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

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

import { useRef } from 'react';

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

const ref = useRef(0);

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

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

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

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

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

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

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

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

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

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

ให้ในคอมโพเนนต์ของคุณมีย่อหน้าพร้อม ข้อความ 'text' และปุ่ม ทำให้ ทุกครั้งที่คลิกปุ่ม ท้ายข้อความของย่อหน้าเพิ่ม เครื่องหมายอัศเจรีย์ ทำสิ่งนี้ โดยใช้ state

สร้างคอมโพเนนต์ App แต่แทนที่ state ตอนนี้ให้ใช้ ref แทน ตรวจสอบให้แน่ใจว่าหาก กดปุ่ม ข้อความของย่อหน้าจะไม่ เปลี่ยนแปลง เพิ่มการแสดงข้อความ ของย่อหน้าลงในคอนโซล เปิดคอนโซลและตรวจสอบ, ว่าข้อความเปลี่ยนแปลงจริง