RefObject如何自动传入自定义Hook？多Hook共用元素Ref怎么处理？

1. 为什么Hook里的containerRef.current能获取到元素引用？ #

你写的useHook内部用useRef创建了一个Ref对象，当把这个对象传给React元素的ref属性时，React的内部机制会在组件挂载完成后，自动将对应的DOM元素赋值给该Ref对象的current属性。

而Hook里的useEffect用了空依赖数组[]，它会在组件挂载完成后执行——这时候React已经完成了DOM元素的赋值操作，所以containerRef.current能拿到有效的DOM引用。

2. 为什么不能像事件监听那样写成el => hookRef(el)？ #

React的ref属性支持两种类型的值：

• 一种是Ref对象（由useRef/React.createRef创建，带有current属性的对象）
• 另一种是回调函数（React会把DOM元素作为参数传入这个函数）

你写的hookRef是useHook返回的Ref对象，不是函数。当你尝试el => hookRef(el)时，相当于把Ref对象当成函数调用，自然会报错——因为Ref对象本身不是可调用的函数。

事件监听里的handler本身就是函数，所以可以直接传或者包一层箭头函数；但Ref对象和函数是完全不同的类型，不能混用这种写法。

3. 理解这个逻辑需要掌握哪些知识？ #

• React Ref的两种使用方式：区分Ref对象和回调Ref的差异、React内部对ref属性的处理逻辑
• React组件生命周期：明确组件挂载阶段中，DOM元素创建、ref赋值、useEffect执行的先后顺序
• 自定义Hook的工作机制：自定义Hook是复用组件状态逻辑的方式，每个组件调用自定义Hook时，内部的useRef会创建独立的Ref对象，和当前组件实例绑定
• useEffect的执行时机：空依赖数组的useEffect仅在组件挂载后执行一次，依赖项变化时会重新执行

4. 同一个元素上使用两个依赖Ref的Hook怎么写？ #

需要用回调Ref，在回调函数里手动将DOM元素赋值给每个Hook返回的Ref对象的current属性，示例代码：

export const TestComponent = () => {
    const hookRef1 = useHook1();
    const hookRef2 = useHook2();

    return <div ref={el => {
        // 手动将元素赋值给两个Ref对象的current属性
        hookRef1.current = el;
        hookRef2.current = el;
    }}>/*smth else*/</div>
}

注意：如果你的Hook需要在元素更新时重新执行逻辑，要修改Hook内部的useEffect依赖项，加入containerRef.current（或者用useCallback包裹回调Ref避免不必要的重渲染）。如果只是挂载时执行一次逻辑，上面的写法完全可行。

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