频繁调用的React自定义Hook传入HTML引用会引发性能问题吗？

一、传递RefObject是按引用传递，不会复制对象 #

React的RefObject（即useRef返回的对象）本质是一个普通JavaScript对象，包含current属性。当你把它作为参数传入自定义Hook时：

• 属于按引用传递，Hook内部拿到的elem变量和组件中定义的ref变量指向内存中的同一个对象。
• 你在Hook中修改elem.current，会直接同步到原ref的current属性，反之亦然，不存在对象复制的开销。

二、传递RefObject本身并非不良实践，需关注这些性能细节 #

传递RefObject本身的性能开销可以忽略，但要注意以下可能引发性能问题的场景：

• 依赖数组中的使用：如果你的Hook里用了useEffect、useCallback这类需要依赖数组的Hook，把RefObject放进依赖数组是安全的——因为useRef返回的对象引用在组件整个生命周期内保持稳定，不会触发不必要的重执行。
• 高频场景下的Hook调用：如果你的自定义Hook被高频触发的事件（比如滚动、鼠标移动回调）调用，问题不在传递ref，而在于高频执行Hook内部逻辑。这时需要给事件回调加防抖/节流，或者用useMemo/useCallback缓存Hook中的计算逻辑，避免重复执行。
• ref.current的频繁变更：如果ref.current指向的DOM元素频繁切换，且Hook逻辑依赖ref.current，可以通过监听ref.current的变化（比如在useEffect中对比前后值），只在实际变更时执行对应逻辑，避免无效计算。

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