useeffect 监听ref

可以使用 `useEffect` 钩子函数来监听 `ref` 对象的变化。具体实现如下：

import React, { useEffect, useRef } from 'react';

function Component() {
  const ref = useRef(null);

  useEffect(() => {
    const node = ref.current;

    if (node) {
      // 监听 ref 对象变化的回调函数
      const observerCallback = (mutationsList) => {
        console.log('Ref object has changed');
      };

      // 创建一个 MutationObserver 实例
      const observer = new MutationObserver(observerCallback);

      // 开始监听 ref 对象的变化
      observer.observe(node, { attributes: true, childList: true, subtree: true });

      // 返回清除函数
      return () => {
        observer.disconnect();
      };
    }
  }, [ref]);

  return <div ref={ref}>Hello World!</div>;
}

在上面的示例代码中，我们使用 `useEffect` 钩子函数来监听 `ref` 对象的变化。当 `ref` 对象发生变化时，我们会创建一个 `MutationObserver` 实例来监听 `ref` 对象的属性变化、子元素变化等。同时，我们也返回一个清除函数来断开 `MutationObserver` 实例与 `ref` 对象的联系。