React中useRef引用canvas元素不生效、useEffect内日志不执行问题

顶层打印{ current: undefined }是正常运行结果 #

组件渲染函数执行到顶层console.log(ref)时，React还处于渲染阶段，尚未完成DOM节点的创建与挂载，自然不会把canvas元素赋值给ref.current。调用useRef()时没有传入初始参数，ref.current的默认值就是undefined，这个输出完全符合React的运行逻辑。

useEffect内日志未按预期执行的核心原因 #

• useRef()返回的ref对象在组件全生命周期内引用地址固定不变，React不会追踪ref.current的属性变化，也不会因为ref.current赋值触发组件重渲染。
• 你将[ref]作为useEffect的依赖数组，由于ref对象引用永远不会改变，这个effect理论上只会在组件首次挂载完成后执行1次，执行时ref.current已经被赋值为canvas节点，正常打印结果应该是{ current: <canvas /> }。
• 如果完全看不到这条日志，先排查两个常见问题：一是控制台是否开启了日志过滤、是否有前置代码报错阻断了effect执行；二是如果用Next.js App Router开发，检查组件顶部是否加了'use client'指令，默认服务端组件不支持运行useEffect这类客户端hook，effect代码根本不会在浏览器端执行。
• 不要试图把ref放在依赖数组里监听DOM绑定完成，ref本身引用不变，React也不会感知ref.current的变化，这种写法永远不会触发effect的二次执行。

回调ref方案的合理性 #

你写的回调ref实现是官方推荐的、可以精确响应DOM挂载/卸载时机的方案：

• 回调ref的执行时机是React提交DOM变更的阶段，不需要等effect触发，也不依赖组件重渲染，节点挂载时React会直接把DOM节点作为参数传入回调，节点卸载时会传入null触发回调。
• 用useCallback包裹ref回调可以保证函数引用稳定，避免组件重渲染时回调重复触发。你可以在回调里直接做事件绑定、元素尺寸测量、旧引用清理等操作，不需要等effect运行。

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