เพิ่มประสิทธิภาพ React App ด้วย react memo และ useCallback h.

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

ต่อไปนี้เป็นตัวอย่างของวิธีการใช้memoเพื่อป้องกันการประเมินองค์ประกอบอย่างง่ายซ้ำโดยไม่จำเป็น:

import React, { memo } from 'react';

const TenchoComponent= (props) => {
  // component implementation
});

export default React.memo(TenchoComponent)

หากเป็นเช่นนั้น ทำไมเราไม่นำสิ่งนี้ไปใช้กับส่วนประกอบทั้งหมด การใช้บันทึกยังมีค่าใช้จ่าย เมื่อเราใช้บันทึกก่อนเรนเดอร์ React ไปที่ TenchoComponent และเปรียบเทียบค่าเก่ากับค่าใหม่ ในกระบวนการนี้ react ต้องทำ 2 งาน ขั้นแรกให้เก็บค่าเก่าแล้วเปรียบเทียบค่าเก่ากับค่าใหม่ซึ่งมีต้นทุนประสิทธิภาพของตัวเองด้วย ดังนั้นจึงขึ้นอยู่กับส่วนประกอบ จำนวนอุปกรณ์ประกอบฉากที่ส่งไปยังส่วนประกอบ และจำนวนส่วนประกอบย่อย React memo เป็นเครื่องมือที่ยอดเยี่ยมหากเรามีแผนผังองค์ประกอบขนาดใหญ่ที่มีส่วนประกอบย่อยจำนวนมาก

การเปรียบเทียบค่าเก่าและค่าใหม่ทำได้โดยใช้ตัวดำเนินการเปรียบเทียบทั่วไป ' === ' การเปรียบเทียบนี้จะใช้ได้กับประเภทข้อมูลดั้งเดิมเท่านั้น เช่น บูลีน สตริง ฯลฯ แต่จะใช้ไม่ได้กับค่าที่ไม่ใช่ค่าดั้งเดิม เช่น อาร์เรย์ อ็อบเจกต์ ฯลฯ

false===false
// will return true

'tencho' === 'tencho'
// will return true

[1,2,3]===[1,2,3]
//will return false

{} ==={}
// will return false

นี่คือตัวอย่างการใช้useCallbackhook ใน React functional component:

import { useCallback } from 'react';

function MyComponent({ someProp }) {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <button onClick={handleClick}>Click Me</button>
      <p>You have clicked the button {count} times</p>
    </div>
  );
}

export default MyComponent;

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

เป็นที่น่าสังเกตว่าuseCallbackมีความคล้ายคลึงกันuseMemoและทั้งสองมีประโยชน์ในการป้องกันการแสดงผลซ้ำโดยไม่จำเป็น แต่useMemoใช้สำหรับบันทึกค่าของฟังก์ชันและuseCallbackใช้สำหรับบันทึกฟังก์ชันเอง