React中能否通过自定义hook向useContext传递回调函数？

完全可行，只需要调整代码逻辑，让Context Provider能够接收并存储自定义Hook传入的回调即可。以下是修改后的完整实现：

import { createContext, useContext, useEffect, useRef } from 'react';

const SimpleContext = createContext(null);

function SimpleContextProvider({ children }) {
    // 用useRef存储回调，避免因回调变化触发组件重渲染
    const callbackRef = useRef(null);

    useEffect(() => {
        const timer = setTimeout(() => {
            // 执行存储的回调
            callbackRef.current?.();
        }, 10000);

        // 清理定时器
        return () => clearTimeout(timer);
    }, []);

    // 提供注册回调的方法
    const registerCallback = (callback) => {
        callbackRef.current = callback;
    };

    return (
        <SimpleContext.Provider value={{ registerCallback }}>
            {children}
        </SimpleContext.Provider>
    );
}

function useSimpleContext(callback) {
    const { registerCallback } = useContext(SimpleContext);

    useEffect(() => {
        // 当回调变化时更新到Provider的ref中
        if (callback) {
            registerCallback(callback);
        }

        // 组件卸载时清空回调（可选，根据需求调整）
        return () => {
            if (callbackRef.current === callback) {
                callbackRef.current = null;
            }
        };
    }, [callback, registerCallback]);

    return useContext(SimpleContext);
}

核心改动说明： #

• Provider侧：

  • 使用useRef存储回调，避免因回调引用变化导致Provider重渲染
  • 在Context的value中暴露registerCallback方法，让子组件的自定义Hook能传递回调
  • 定时器触发时执行callbackRef.current中的回调

• 自定义Hook侧：

  • 通过useContext获取Provider提供的registerCallback方法
  • 用useEffect监听传入的callback变化，实时更新到Provider的ref中
  • 可选添加卸载时的清理逻辑，防止内存泄漏

你可以像之前计划的那样使用这个Hook：

useSimpleContext(() => {
    console.log("Ok let's go!");
})

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