javascript - 如何监听 "ref"对象变化？

Question

考虑以下示例。我有一个 div 的引用，我想将此引用传递给 Child。 但是 如果我现在按原样使用它，那么当 ref 对象更新并存储正确的 HTML 元素时，不会重新渲染 Child。
我可以对其进行修复并使用带有 useCallback 的回调方法.只需取消注释注释行，然后查看它是否正常工作(两种解决方案)，因为父级由于状态更新而重新渲染，因此正确的 ref 也从第一种方法传递。
问题 :有没有办法避免使用状态并以某种方式让 Child 知道父对象中更新了 ref 对象？
备注 : 我知道我可以使用 useEffect在 child 和听someRef更改，但我想访问函数体内的 someRef 对象，而不仅仅是在钩子(Hook)体内。

const { useState, useRef, useCallback } = React;

const Child = ({ someRef, node }) => {
  console.log(someRef, node); // someRef is always null and doesnt update...

  return null;
}

const App = () => {
  /* 1st approach */
  const someRef = useRef(null);
  
  /* 2nd approach */
  const [node, setNode] = useState(null);
  
  const someRef2 = useCallback(n => {
    if (n !== null) {
        // setNode(n)   <----- uncomment to see it works
    }
  }, []);
  
  return (
     <div>
      <div ref={someRef}>text1</div>
      <div ref={someRef2}>text2</div>
      <Child someRef={someRef} node={node} />
     </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

Answer 1

不，据我所知，无法在 ref 上订阅/收到通知变化。
来自 React docs在 useRef :

Keep in mind that useRef doesn’t notify you when its content changes. Mutating the .current property doesn’t cause a re-render. If you want to run some code when React attaches or detaches a ref to a DOM node, you may want to use a callback ref instead.

归根结底，您的应用必须响应状态变化。 parent 的或自己的 child 状态。
您甚至可以更新 ref在父级的渲染阶段，因此它将与任何 state 保持“同步”父项上的变化。但毕竟会触发更新的是state改变，而不是裁判。