Memahami useCallback dalam Reactjs

Cangkuk useCallback menghafal fungsi itu sendiri, bukan nilai pulangannya. useCallback cache rujukan fungsi

Fungsi yang diisytiharkan dalam komponen akan dicipta semula pada setiap pemaparan, serupa dengan pembolehubah. Perbezaannya ialah, ia diberikan dengan rujukan yang berbeza setiap kali. Jadi,

• Kesan penggunaan bergantung pada fungsi ini akan dilaksanakan semula pada setiap pemaparan.
• Perkara yang sama berlaku dengan komponen kanak-kanak.

Kesan penggunaan bergantung pada fungsi ini akan dilaksanakan semula pada setiap paparan:

import React, { useState, useEffect, useCallback } from 'react';

// Parent Component
const ParentComponent = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  // Function declared inside the component
  const handleClick = () => {
    setCount(count + 1);
  };

  // useEffect depending on handleClick
  useEffect(() => {
    console.log("handleClick changed, running useEffect");
  }, [handleClick]);

  return (
    <div>
      <button onClick={handleClick}>Increment Count</button>
      <p>Count: {count}</p>
      <ChildComponent handleClick={handleClick} />
    </div>
  );
};

// Child Component
const ChildComponent = React.memo(({ handleClick }) => {
  console.log("ChildComponent re-rendered");
  return <button onClick={handleClick}>Child Increment</button>;
});

export default ParentComponent;

Perkara yang sama berlaku dengan komponen kanak-kanak:

Apabila kita mempunyai komponen dengan logik pemaparan yang mahal atau "lambat" sebagai anak kepada komponen lain, setiap kali komponen induk itu membuat pemaparan, semua anak-anaknya turut memaparkan semula.

Untuk mengelakkan paparan semula yang tidak perlu ini, kami boleh menggunakan React.memo. Komponen tertib lebih tinggi ini menyimpan cache komponen kanak-kanak, memastikan ia hanya memaparkan semula jika propnya benar-benar berubah. Walau bagaimanapun, terdapat tangkapan halus apabila menghantar berfungsi sebagai prop, yang menyebabkan kanak-kanak itu membuat persembahan semula walaupun tidak sepatutnya.

Masalah dengan Rujukan Fungsi

Bayangkan kita mempunyai SlowComponent sebagai anak kepada App. Dalam Apl, kami mempunyai keadaan yang berubah pada klik butang, mencetuskan pemaparan semula Apl. Walaupun kami tidak menukar prop SlowComponent, ia masih dipaparkan semula pada setiap klik.

Kenapa? Pada setiap pemaparan, fungsi handleClick dicipta semula dengan rujukan baharu, yang ditafsirkan React sebagai prop yang diubah, menyebabkan SlowComponent untuk dipaparkan semula. Untuk membetulkannya, kami menggunakan cangkuk useCallback untuk cache rujukan fungsi merentas pemaparan.

Penyelesaian dengan useCallback

Dengan membungkus handleClick dalam useCallback, kami memberitahu React untuk hanya mencipta semula apabila kebergantungan tertentu berubah. Inilah sintaksnya:

const cachedFn = useCallback(fn, [dependencies]);

• fn: Ini ialah definisi fungsi yang anda mahu cache. Ia boleh menerima hujah dan mengembalikan sebarang nilai.
• kebergantungan: Ini ialah susunan kebergantungan. React akan mencipta semula fn jika sebarang pergantungan berubah. Pada paparan pertama, React mencipta dan menyimpan fungsi tersebut. Pada pemaparan berikutnya, selagi kebergantungan tidak berubah, fungsi cache dikembalikan, memastikan ia mempunyai rujukan yang stabil.

Memohon useCallback dalam Contoh Kami
Mari lihat cara kami menggunakan useCallback untuk mengoptimumkan komponen Apl kami:

import React, { useState, useCallback } from "react";

const App = () => {
  const [count, setCount] = useState(0);
  const [value, setValue] = useState("");

  // Wrapping handleClick with useCallback to cache its reference
  const handleClick = useCallback(() => {
    setValue("Kunal");
  }, [setValue]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <p>Count: {count}</p>
      <SlowComponent handleClick={handleClick} />
    </div>
  );
};

const SlowComponent = React.memo(({ handleClick }) => {

// Intentially making the component slow
  for (let i = 0; i < 1000000000; i++) {}
  console.log("SlowComponent re-rendered");
  return <button onClick={handleClick}>Click me in SlowComponent</button>;
});

export default App;

Bila hendak menggunakan useCallback

• Apabila anda mempunyai pengendali acara yang ditentukan untuk elemen dalam komponen anda, bungkusnya di dalam useCallback untuk mengelakkan penciptaan semula pengendali acara yang tidak perlu.
• Apabila anda memanggil fungsi di dalam useEffect, anda biasanya menghantar fungsi itu sebagai kebergantungan. Untuk mengelakkan penggunaan useEffect secara tidak perlu pada setiap pemaparan, bungkus definisi fungsi di dalam useCallback.
• Jika anda menulis cangkuk tersuai, dan ia mengembalikan fungsi, adalah disyorkan untuk membungkusnya di dalam useCallback. Jadi, pengguna tidak perlu risau tentang mengoptimumkan cangkuk – sebaliknya, mereka boleh menumpukan pada kod mereka sendiri.

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