在 React 中，useRef 可以存储任意值（包括函数），但其 current 属性需手动赋值才能更新；直接重新声明函数无效，正确做法是结合 useCallback 实现稳定引用与按需更新。
在 react 中，useref 可以存储任意值（包括函数），但其 `current` 属性需手动赋值才能更新；直接重新声明函数无效，正确做法是结合 usecallback 实现稳定引用与按需更新。
React 的 useRef 是一个轻量级的可变容器，其 current 属性在组件整个生命周期内保持可变且不会触发重渲染。虽然常用于 DOM 引用，但它同样适用于存储函数——尤其适合需要在 useEffect、事件处理器或子组件中访问最新逻辑，又希望避免闭包陷阱的场景。
然而，ref 本身不提供“自动更新”机制：你不能像 useState 那样调用 setter 来更新函数；必须显式地为 ref.current 赋新值。例如：
const MyComponent = () => {
const callbackRef = useRef<() => void>(() => {});
useEffect(() => {
// ✅ 正确：手动更新 ref.current
callbackRef.current = () => {
console.log('This is the latest version');
};
}, []);
const handleClick = () => {
callbackRef.current(); // 始终调用最新赋值的函数
};
return <button onClick={handleClick}>Call Ref Function</button>;
};⚠️ 注意：若在每次渲染中直接赋值（如 callbackRef.current = () => {...} 放在函数体顶层），会导致函数引用频繁变更，可能破坏依赖项稳定性（如 useEffect 或 useMemo 的依赖数组）。因此，推荐搭配 useCallback 使用，确保函数引用仅在必要时更新：
const MyComponent = ({ onAction }: { onAction: string }) => {
const callbackRef = useRef<() => void>(() => {});
// 创建一个依赖于 `onAction` 的稳定函数
const stableCallback = useCallback(() => {
console.log('Action:', onAction);
}, [onAction]);
useEffect(() => {
// ✅ 安全更新：仅当 stableCallback 确实变化时才写入 ref
callbackRef.current = stableCallback;
}, [stableCallback]); // 依赖 useCallback 返回的稳定引用
useEffect(() => {
// 示例：在副作用中安全调用最新函数
return () => {
callbackRef.current(); // 清理时执行最新逻辑
};
}, []);
return null;
};? 关键要点总结：
- useRef 存储函数本质是「手动管理函数引用」，不是响应式状态；
- 更新必须通过 ref.current = newFunction 显式赋值；
- useCallback 提供依赖感知的函数记忆化，避免无谓重建，是配合 useRef 更新函数的理想搭档；
- 若函数无需依赖外部变量，可用空依赖数组 [] 创建仅初始化一次的稳定函数；
- 切勿在渲染体中无条件赋值函数到 ref，否则可能引发意外交互或性能问题。
这种模式常见于自定义 Hook 设计（如防抖回调、跨 effect 通信）、第三方库集成（如动画帧调度）等高级场景，是掌握 React 引用与闭包控制的重要实践。
