Berbagi teknologi

gunakanCallback di React

2024-07-08

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

perkenalan

Dalam pengembangan aplikasi React, mengoptimalkan kinerja komponen adalah proses yang berkelanjutan.useCallbackAdalah React Hook yang digunakan untuk memoize fungsi-fungsi callback untuk memastikan bahwa fungsi-fungsi ini tetap konsisten sepanjang siklus hidup komponen, sehingga menghindari masalah rendering dan kinerja yang tidak perlu.

Latar belakang masalah

Di React, jika props atau status komponen berubah, komponen akan dirender ulang. Jika komponen turunan bergantung pada props komponen induk, dan props tersebut adalah fungsi, instance fungsi baru akan dibuat setiap kali komponen induk dirender, yang mungkin menyebabkan komponen turunan juga dirender ulang, meskipun propsnya belum di-render. pada dasarnya berubah.

useCallbackperan

useCallback Digunakan untuk mengatasi permasalahan di atas. Ini mengingat fungsi panggilan balik untuk memastikan bahwa fungsi tersebut tetap tidak berubah sepanjang masa pakai komponen kecuali ketergantungannya berubah.

useCallbackDeskripsi parameter

useCallbackMenerima dua parameter:

  1. Panggilan balik: Fungsi yang ingin Anda memoisasi.
  2. susunan dependensi : Array yang berisi nilai ketergantungan fungsional. Fungsi panggilan balik hanya dibuat ulang ketika salah satu dari dependensi ini berubah.

Sintaks dasarnya adalah sebagai berikut:

const memoizedCallback = useCallback(
  () =