关于 react 中 useCallback 的使用问题?

Question

一般情况下当函数作为依赖项时,应该使用 useCallback 来保证引用的稳定。例如组件的 props 或者是 useEffect 的依赖项。那假如函数被封装到一个 hook 中,那是都包一个 useCallback 好还是都不包,让使用者自已决定是否包?

Answer 1

建议采用两个版本的函数。

function useCustomHook() {
  // ...其他逻辑
  
  // 未记忆化版本
  const handleSomething = () => {
    // 函数逻辑
  };
  
  // 记忆化版本
  const handleSomethingCallback = useCallback(handleSomething, [/* 相关依赖 */]);
  
  return { 
    handleSomething,          // 普通版本
    handleSomethingCallback   // 记忆化版本
  };
}

或者通过选项参数提供灵活性：

function useCustomHook({ memoized = false } = {}) {
  // ...其他逻辑
  
  const handleSomething = () => {
    // 函数逻辑
  };
  
  return { 
    handleSomething: memoized 
      ? useCallback(handleSomething, [/* 相关依赖 */]) 
      : handleSomething
  };
}

这样可以在提供便利的同时保持灵活性，让使用者能根据自己的需求选择是否使用记忆化版本的函数。

如果你的 hook 返回的函数很可能被用作依赖项，那么默认使用 useCallback 是更友好的选择。

Answer 2

在hook 内用 useCallback

import { useState, useCallback } from 'react';

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);
  
  const increment = useCallback(() => {
    setCount(prev => prev + 1);
  }, []);
  
  const decrement = useCallback(() => {
    setCount(prev => prev - 1);
  }, []);
  
  const reset = useCallback(() => {
    setCount(initialValue);
  }, [initialValue]);
  
  return {
    count,
    increment,
    decrement,
    reset
  };
}

页面里：

function CounterComponent() {
  const { count, increment, decrement, reset } = useCounter(0);
   
  useEffect(() => 
    console.log('Counter setup');
    
    return () => {
      // 清理逻辑
    };
  }, [increment]); // 依赖项
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={reset}>Reset</button>
      <ChildComponent onIncrement={increment} />
    </div>
  );
}

不在 hook 内部用 useCallback

import { useState } from 'react';

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);
  
  // 不使用 useCallback
  const increment = () => {
    setCount(prev => prev + 1);
  };
  
  const decrement = () => {
    setCount(prev => prev - 1);
  };
  
  const reset = () => {
    setCount(initialValue);
  };
  
  return {
    count,
    increment,
    decrement,
    reset
  };
}

页面里：

function CounterComponent() {
  const { count, increment, decrement, reset } = useCounter(0);
  
  const stableIncrement = useCallback(increment, [increment]);
  const stableDecrement = useCallback(decrement, [decrement]);
  const stableReset = useCallback(reset, [reset]);
  
  useEffect(() => {
    console.log('Counter setup');
    //引用
  }, [stableIncrement]);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={reset}>Reset</button>
      
      <ChildComponent onIncrement={stableIncrement} />
    </div>
  );
}

Answer 3

最简单的做法：

1. 如果函数的声明本身没什么开销，比如你定义一个没有依赖的函数，根据传入的参数计算得到结果。那么你就不需要用 useCallback，每次都声明就好，函数声明的开销其实很低。
2. 如果函数里要用当前 hook 的状态，但都是不变的，或者 useRef，那么也不需要。
3. 只有当你的 hook 会被多次调用（即调用 hook 的组件会被有状态更新），导致内部依赖不稳定时，才需要用到 useCallback。
4. 这个原则，可以用 JS 闭包来推导出来。即每次组件状态变化，都会导致渲染函数被执行，继而导致内部状态被新变量重新引用，于是跟变量相关的函数都需要被重新声明。
5. 我认为理解最后这点最为重要，原理很简单，但理解了原理，才能作出推论。