Memahami React.memo: Mengoptimumkan Komponen Berfungsi

React.memo ialah komponen tertib tinggi yang digunakan dalam React untuk mengoptimumkan prestasi dengan menghalang pemaparan semula komponen berfungsi yang tidak perlu. Ia berfungsi dengan menghafal hasil komponen dan hanya memaparkannya semula jika propnya berubah. Ini berguna untuk pengoptimuman prestasi dalam komponen berfungsi yang menghasilkan output yang sama diberikan prop yang sama.

Contoh penggunaan:

import React from 'react';

const MyComponent = ({ count }) => {
  console.log('Component re-rendered');
  return <div>Count: {count}</div>;
};

export default React.memo(MyComponent);

Dalam contoh ini, MyComponent hanya akan memaparkan semula jika prop kiraan berubah. Jika komponen induk memaparkan semula tetapi prop kiraan kekal sama, MyComponent tidak akan memaparkan semula, mengurangkan pengiraan yang tidak perlu.

Secara lalai, React.memo melakukan perbandingan props yang cetek, tetapi anda juga boleh menyediakan fungsi perbandingan tersuai untuk semakan yang lebih mendalam jika perlu:

const MyComponent = React.memo((props) => {
  /* component code */
}, (prevProps, nextProps) => {
  // return true if props are equal, false otherwise
  return prevProps.someValue === nextProps.someValue;
});

Ini boleh mengoptimumkan lagi prestasi apabila anda mempunyai struktur prop yang lebih kompleks.

Atas ialah kandungan terperinci Memahami React.memo: Mengoptimumkan Komponen Berfungsi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!