ฮุคเพิ่มประสิทธิภาพ useMemo ใน React

ฮุคแรกสำหรับการเพิ่มประสิทธิภาพ ที่เราจะพิจารณา คือ useMemo

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

มาดูกันว่ามันทำงานอย่างไร มา สร้างคอมโพเนนต์ที่มีปุ่มและ หัวเรื่อง h3:

return (
	<div>
		<h3>ข้อความ</h3>
		<button>คลิก</button>
	</div>
);

ตอนนี้ทำให้เมื่อคลิก ที่หัวเรื่อง สีของมันจะเปลี่ยนจากสีส้ม เป็นสีเขียวและกลับกัน เริ่มต้น ด้วยการสร้าง state isGreen:

const [isGreen, setIsGreen] = useState(false);

เพิ่มเงื่อนไขการเปลี่ยนสีให้กับหัวเรื่องในแอตทริบิวต์ style และเพิ่มตัวจัดการเหตุการณ์คลิก:

<h3 onClick={() => setIsGreen(!isGreen)}
	style={{ color: isGreen ? 'green' : 'orangered' }}
>ข้อความ</h3>

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

const [num, setNum] = useState(0);

เพิ่มการจัดการคลิกที่ปุ่ม:

<button onClick={() => setNum(num + 1)}>
	การคลิก
</button>

ให้เรามีฟังก์ชัน square บางอย่าง ซึ่งจะส่งกลับค่า กำลังสองของค่า num ผลลัพธ์ การเรียกใช้ฟังก์ชันเราจะบันทึกลงใน ตัวแปร result:

const result = square(num);

function square(num) {
	return num * num;
}

แสดง result ในข้อความของปุ่ม:

<button onClick={() => setNum(num + 1)}>
	การคลิก: {result}
</button>

ผลลัพธ์ที่เราได้คือดังนี้: เมื่อคลิกที่ปุ่ม ค่า num จะเปลี่ยน ซึ่งจากนั้นจะถูกยก กำลังสอง และเมื่อคลิกที่หัวเรื่อง สีของหัวเรื่องจะเปลี่ยน

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

มาเพิ่มภาระให้กับฟังก์ชันของเราสักหน่อย ตอนนี้มันจะ "คิด" นานขึ้นเล็กน้อย ด้วยวิธีนี้ เราจำลองการคำนวณที่ยาวนาน:

function square(num) {
	let startTime = performance.now();
	
	while (performance.now() - startTime < 500) {
		// ไม่ทำอะไรเลย ...
	}
	
	return num * num;
}

ลองคลิกที่หัวเรื่องดู ตอนนี้ปรากฏว่า เนื่องจากการทำงานที่ยาวนานของฟังก์ชัน square (และเราไม่ได้แตะปุ่มนะ) เราต้องรอเป็นเวลานานมากเพื่อให้ สีของหัวเรื่องเปลี่ยน!

ที่นี่ฮุค useMemo จะมาช่วยเรา สำหรับสิ่งนี้ เราต้องส่ง พารามิเตอร์แรกเป็นฟังก์ชันที่คำนวณ ค่าที่เราต้องการแคช ฟังก์ชันนี้ควรบริสุทธิ์และ ไม่รับพารามิเตอร์ใดๆ และพารามิเตอร์ที่สอง คือ dependencies ในวงเล็บเหลี่ยม พูดง่ายๆ ก็คือค่าที่เป็น reactive ทั้งหมดที่เกี่ยวข้องในโค้ด ของฟังก์ชัน ดังนั้นใน result ตอนนี้เราจะเขียนโครงสร้างดังนี้:

const result = useMemo(() => square(num), [num]);

ลองคลิกที่หัวเรื่องอีกครั้ง ตอนนี้ ถ้าเราไม่แตะปุ่มที่มีการคำนวณ และไม่เปลี่ยนค่าสเตต num เช่นนั้น จะไม่มีอะไรถูกคำนวณใหม่ และ React จะแสดงค่าที่แคชไว้ ในปุ่ม ดังนั้นหัวเรื่องของเรา จึงเปลี่ยนสีได้อย่างรวดเร็ว

สร้างคอมโพเนนต์ App วาง ย่อหน้าไว้ในนั้น สร้างสเตต text ด้วยค่าเริ่มต้น 'react' ให้ค่าสเตตแสดง เป็นข้อความของย่อหน้า ให้เมื่อคลิก ที่ย่อหน้า มีเครื่องหมายอัศเจรีย์เพิ่มเข้ามา ที่ท้ายข้อความ

สร้างสเตตอีกหนึ่ง num ด้วย ค่าเริ่มต้น 0 วางใน App อีกหนึ่งย่อหน้า ทำให้ เมื่อคลิกที่มัน num เพิ่มขึ้น 1

และตอนนี้เพิ่มฟังก์ชัน triple ใน App ซึ่งในฐานะ พารามิเตอร์รับ num และ ส่งกลับค่าสามเท่าของมัน ใส่ผลลัพธ์การเรียกฟังก์ชัน ลงในตัวแปร result แสดง result เป็นข้อความของย่อหน้าที่สอง ลองคลิกทีละย่อหน้า สังเกตว่ามีเครื่องหมายอัศเจรีย์เพิ่มเข้ามาช้าเพียงใด

แก้ไขสถานการณ์ โดยห่อหุ้มฟังก์ชันที่ทำงานช้า triple ด้วย useMemo