使用useEffect时如何避免大量函数嵌套useCallback？

以下是几个实用的解决方案，可根据你的代码场景选择：

1. 将函数移至useEffect内部 #

如果render和executeCurrentState仅在这个useEffect中使用，直接把它们定义在effect内部，这样就无需添加外部函数作为依赖，自然避免递归包裹的问题：

useEffect(() => {
    // 在effect内部定义函数
    const executeCurrentState = (e) => {
        // 这里直接写原函数的逻辑，可访问canvasRef、mouse等当前值
    };

    const render = () => {
        // 原render函数逻辑
    };

    setCanvasRef(canvasRef.current);
    mouse.follow(canvasRef.current);

    document.addEventListener('mousedown', executeCurrentState);
    document.addEventListener('mouseup', executeCurrentState);
    document.addEventListener('mousemove', executeCurrentState);

    render();

    return () => {
        document.removeEventListener('mousedown', executeCurrentState);
        document.removeEventListener('mouseup', executeCurrentState);
        document.removeEventListener('mousemove', executeCurrentState);
        mouse.removeListeners();
    };
}, [setCanvasRef, mouse, canvasRef]); // 仅依赖必要的状态/方法

2. 使用useRef保存函数引用 #

如果函数需要在effect外部复用，用useRef存储最新的函数版本。effect只依赖ref本身（ref的引用不会变化），同时每次组件更新时同步ref的current值，确保effect里能拿到最新逻辑：

import { useRef, useEffect } from 'react';

// 定义ref存储函数
const executeCurrentStateRef = useRef();
const renderRef = useRef();

// 每次组件更新时，同步最新的函数到ref
executeCurrentStateRef.current = (e) => {
    // 原executeCurrentState逻辑
};
renderRef.current = () => {
    // 原render逻辑
};

useEffect(() => {
    const executeCurrentState = executeCurrentStateRef.current;
    const render = renderRef.current;

    setCanvasRef(canvasRef.current);
    mouse.follow(canvasRef.current);

    document.addEventListener('mousedown', executeCurrentState);
    document.addEventListener('mouseup', executeCurrentState);
    document.addEventListener('mousemove', executeCurrentState);

    render();

    return () => {
        document.removeEventListener('mousedown', executeCurrentState);
        document.removeEventListener('mouseup', executeCurrentState);
        document.removeEventListener('mousemove', executeCurrentState);
        mouse.removeListeners();
    };
}, [setCanvasRef, mouse, canvasRef]); // 无需依赖函数本身

3. 抽离无依赖的纯函数 #

如果render或executeCurrentState里的部分逻辑是纯函数（不依赖组件内部状态/ props），把这部分逻辑抽成独立的顶层函数，这样它们不会随组件更新而变化，无需包裹useCallback：

// 顶层纯函数，不依赖组件内部变量
function drawPixel(ctx, x, y, color) {
    // 纯绘图逻辑
}

function calculateCanvasOffset(canvas) {
    // 纯计算逻辑
}

// 组件内部
useEffect(() => {
    const executeCurrentState = (e) => {
        // 调用顶层纯函数，自身只依赖组件状态
    };

    const render = () => {
        // 调用顶层纯函数
    };

    // ... 其余effect逻辑
}, [setCanvasRef, mouse, canvasRef]);

内容的提问来源于stack exchange，提问作者lobstar