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

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

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

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

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

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

App.jsxconst [isGreen, setIsGreen] = useState(false);

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

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

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

App.jsxconst [num, setNum] = useState(0);

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

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

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

App.jsxconst result = square(num);

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

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

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

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

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

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

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

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

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

App.jsxconst result = useMemo(() => square(num), [num]);

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