Memahami useMemo

React memaparkan semula komponen setiap kali keadaan atau prop bertukar, yang bagus untuk memastikan perkara sentiasa dikemas kini. Tetapi, ia juga boleh menyebabkan masalah prestasi jika anda melakukan pengiraan berat pada setiap paparan. Di situlah useMemo masuk!

useMemo ialah cangkuk yang menyimpan cache hasil fungsi supaya ia tidak perlu dijalankan semula melainkan kebergantungannya berubah

Cara Ia Berfungsi:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useMemo mengambil dua hujah: fungsi dan susunan kebergantungan;
Ia hanya akan menjalankan semula fungsi jika salah satu kebergantungan berubah

Bilakah Anda Harus Menggunakannya?

• Pengiraan Mahal: Jika anda mempunyai pengiraan yang perlahan, bungkusnya dalam useMemo supaya ia tidak berjalan pada setiap paparan
• Cegah pemaparan Semula yang Tidak Diperlukan: Apabila menghantar objek atau tatasusunan sebagai prop, gunakan useMemo untuk mengelakkan ia dicipta semula pada setiap pemaparan, yang boleh mencetuskan pemaparan semula komponen anak yang tidak perlu

Contoh:
Tanpa useMemo:

const result = computeExpensiveValue(a, b); // Runs on every render

Dengan useMemo:

const result = useMemo(() => computeExpensiveValue(a, b), [a, b]); // Runs only when `a` or `b` change

Bila TIDAK Menggunakannya:

Jangan gunakannya secara berlebihan! Jika pengiraan anda ringan, menambah useMemo tidak akan membantu malah mungkin memperlahankan keadaan. Gunakannya apabila anda mempunyai masalah prestasi yang jelas

Ringkasnya:
Pastikan perkara mudah dan jangan mengoptimumkan sehingga anda benar-benar melihat isu prestasi :)

Atas ialah kandungan terperinci Memahami useMemo. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!