useCallback 是 React 的一個(gè)核心 Hook，用于?緩存函數(shù)定義?，避免組件重新渲染時(shí)重復(fù)創(chuàng)建函數(shù)實(shí)例。以下是其基本使用方法：

1. 基本語(yǔ)法

const memoizedCallback = useCallback(
  () => {
    // 函數(shù)邏輯 (例如更新?tīng)顟B(tài)、調(diào)用API等)
    doSomething(a, b);
  },
  [a, b] // 依賴項(xiàng)數(shù)組
);

• ?第一個(gè)參數(shù)?：需要緩存的函數(shù)。
• ?第二個(gè)參數(shù)?：依賴項(xiàng)數(shù)組（Dependency Array），當(dāng)數(shù)組中的變量變化時(shí)，函數(shù)會(huì)重新創(chuàng)建。

2. 核心作用

• ?避免不必要的函數(shù)重建?：默認(rèn)情況下，組件每次渲染都會(huì)創(chuàng)建新的函數(shù)實(shí)例，使用 useCallback 后可復(fù)用函數(shù)。
• ?優(yōu)化子組件渲染?：當(dāng)緩存的函數(shù)作為 props 傳遞給子組件（配合 React.memo）時(shí)，可避免子組件不必要的重渲染?。

3. 使用示例

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

function Counter() {
  const [count, setCount] = useState(0);

  // 緩存函數(shù)：依賴項(xiàng)為空數(shù)組，函數(shù)只創(chuàng)建一次
  const increment = useCallback(() => {
    setCount(prev => prev + 1); // 使用函數(shù)式更新避免閉包問(wèn)題
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+1</button>
    </div>
  );
}

• 依賴項(xiàng) [] 表示函數(shù)僅在組件初次渲染時(shí)創(chuàng)建。
• 使用 setCount(prev => prev + 1) 替代 setCount(count + 1) 可避免閉包陷阱（函數(shù)捕獲過(guò)時(shí)狀態(tài)）?。

4. 適用場(chǎng)景

useCallback，本質(zhì)上是用于緩存函數(shù)。

如果函數(shù)，是以props的方式，傳遞給子組件，為了每次避免子組件的渲染，建議使用useCallback進(jìn)行包裹。

但是每一次，使用useCallback，我們考慮的首要問(wèn)題是，這樣真的優(yōu)化了組件的性能嗎？其實(shí)大多數(shù)場(chǎng)景，如果不是類似列表渲染的場(chǎng)景，這樣不一定會(huì)優(yōu)化了性能。

也就是，函數(shù)作為props傳遞給性能敏感的子組件的場(chǎng)景，才是使用useCallback的時(shí)候。

useCallback的原理解析

• useCallback 的主要目的是在依賴項(xiàng)不變的情況下，返回同一個(gè)函數(shù)引用，避免函數(shù)重復(fù)創(chuàng)建，從而優(yōu)化性能。
• useCallback它會(huì)在首次渲染時(shí)（或依賴項(xiàng)變化時(shí)）創(chuàng)建一個(gè)新的函數(shù)，并將其緩存起來(lái)。在后續(xù)渲染中，如果依賴項(xiàng)沒(méi)有變化，則返回緩存的函數(shù)；否則，就重新創(chuàng)建函數(shù)并更新緩存。
• 簡(jiǎn)易的偽代碼，可能如下所示

let lastDeps; // 上一次的依賴項(xiàng)
let lastCallback; // 上一次緩存的函數(shù)

function useCallback(callback, deps) {
  if (lastDeps === undefined) {
    // 第一次調(diào)用
    lastDeps = deps;
    lastCallback = callback;
    return callback;
  }

  // 檢查依賴項(xiàng)是否變化
  const hasChanged = deps.some((dep, index) => dep !== lastDeps[index]);
  if (hasChanged) {
    lastDeps = deps;
    lastCallback = callback;
  }
  return lastCallback;
}

每次掉用useCallback，返回的函數(shù)，取決于依賴項(xiàng)有沒(méi)有發(fā)生變化。

React內(nèi)部是咋樣的呢？

1、Fiber 節(jié)點(diǎn)存儲(chǔ)機(jī)制

React 在 Fiber 節(jié)點(diǎn)（組件實(shí)例對(duì)應(yīng)的數(shù)據(jù)結(jié)構(gòu)）中維護(hù)一個(gè) memorizedState 鏈表，專門存儲(chǔ) Hooks 狀態(tài)。

function updateCallback(callback, deps) {
  const hook = updateWorkInProgressHook(); // 獲取當(dāng)前 Hook 節(jié)點(diǎn)
  const nextDeps = deps === undefined ? null : deps;
  const prevState = hook.memoizedState;     // 讀取緩存的上次狀態(tài)
  
  // 依賴項(xiàng)對(duì)比：使用淺比較（shallow equal）
  if (prevState !== null && areHookInputsEqual(nextDeps, prevState[1])) {
    return prevState[0]; // 返回緩存的函數(shù)
  }
  
  //  依賴變化：緩存新函數(shù)
  hook.memoizedState = [callback, nextDeps];
  return callback;
}

2、依賴項(xiàng)對(duì)比算法

源碼中的 areHookInputsEqual 對(duì)依賴數(shù)組進(jìn)行淺比較（類似 Object.is）：

function areHookInputsEqual(nextDeps, prevDeps) {
  if (prevDeps === null) return false;
  for (let i = 0; i < prevDeps.length; i++) {
    if (!Object.is(nextDeps[i], prevDeps[i])) {
      return false;
    }
  }
  return true;
}

這種優(yōu)化避免了深度比較的性能損耗

到此這篇關(guān)于React中useCallback 的基本使用和原理小結(jié)的文章就介紹到這了,更多相關(guān)React useCallback使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論