解决findDOMNode 过期警告问题

src/SingleObserver/HTMLComment.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+
+export interface CommentProps {
+  data?: string;
+}
+
+type ElementLike = {
+  setAttribute: () => boolean;
+  style: object;
+};
+
+const TagSymbol = `comment__`;
+
+const canUseDom = () => {
+  return !!(
+    typeof window !== "undefined" &&
+    window.document &&
+    window.document.createElement
+  );
+};
+
+function intercept() {
+  const createElement = document.createElement;
+
+  const reset = () => {
+    document.createElement = createElement;
+  };
+
+  //react 内部是用这个创建文本节点的 由于react本身不支持创建注释节点 这里hack一下
+  document.createElement = function (
+    tagName: string,
+    options?: ElementCreationOptions
+  ) {
+    if (
+      tagName === "noscript" &&
+      options?.is &&
+      options.is.startsWith(TagSymbol)
+    ) {
+      const regex = new RegExp(`^${TagSymbol}(.*)$`);
+      const match = options?.is.match(regex);
+      if (match) {
+        const data = match[1].trim?.();
+        const comment = document.createComment(data) as unknown as ElementLike;
+        comment.setAttribute = () => true;
+        comment.style = {};
+        reset();
+        return comment as unknown as HTMLElement;
+      }
+    }
+    return createElement.call(this, tagName, options);
+  };
+}
+
+function CommentRender(
+  { data = "" }: CommentProps,
+  ref: React.ForwardedRef<null | Comment>
+) {
+  const mounted = React.useRef(false);
+  if (!mounted.current) {
+    if (canUseDom()) {
+      intercept();
+    }
+    mounted.current = true;
+  }
+  return (
+    <noscript
+      ref={ref as React.ForwardedRef<null | HTMLMetaElement>}
+      is={`${TagSymbol}${data}`}
+    />
+  );
+}
+
+/**支持在react中生成注释节点*/
+const HTMLComment = React.memo(
+  React.forwardRef(CommentRender),
+  (prevProps, next) => prevProps.data === next.data
+);
+
+HTMLComment.displayName = "Comment"; // 设置组件的 displayName，方便调试
+
+export default HTMLComment;

src/SingleObserver/Ref.tsx

@@ -0,0 +1,94 @@
+import * as React from "react";
+import HTMLComment from "./HTMLComment";
+
+export interface RefProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+function updateRef(
+  node: Element | Text | null,
+  ref: React.ForwardedRef<Element | Text | null>
+) {
+  if (typeof ref === "function") {
+    ref(node);
+  } else if (ref) {
+    ref.current = node;
+  }
+}
+
+const RefRender: React.ForwardRefRenderFunction<
+  Element | null | Text,
+  RefProps
+> = (props, ref) => {
+  const commentRef = React.useRef<Comment | null>(null);
+  const commentEndRef = React.useRef<Comment | null>();
+  const contentsRef = React.useRef<Text | Element | null>();
+
+  // 根据注释节点获取目标内容节点
+  const resolveContent = (ele: Comment | null) => {
+    if (ele === null) {
+      return null;
+    }
+    const current = ele.nextSibling!;
+    if (current !== commentEndRef.current) {
+      return current as Text | Element | null;
+    }
+    return null;
+  };
+
+  // 重新分配内容节点的 ref
+  const assignRef = () => {
+    contentsRef.current = resolveContent(commentRef.current!);
+    updateRef(contentsRef.current, ref); // 当 DOM 变化时更新 ref
+  };
+
+  React.useLayoutEffect(() => {
+    const parent = commentRef.current!.parentNode;
+    if (!parent) return () => 0;
+
+    // 创建 `MutationObserver`，监听 DOM 子节点变化
+    const ob = new MutationObserver((mutations) => {
+      if (parent) {
+        mutations.forEach((m) => {
+          m.removedNodes.forEach((node) => {
+            if (node === contentsRef.current) {
+              updateRef(null, ref); // 当 DOM 变化时更新 ref
+              contentsRef.current = null;
+            }
+          });
+          m.addedNodes.forEach(() => {
+            assignRef();
+          });
+        });
+      }
+    });
+    // 监听子节点的变动（但不监听属性变化）
+    ob.observe(parent!, {
+      childList: true,
+      subtree: false,
+      attributes: false,
+    });
+
+    return () => {
+      ob.disconnect(); // 组件卸载时断开观察器
+    };
+  }, [ref]);
+  return (
+    <>
+      <HTMLComment ref={commentRef} data="Ref" />
+      {props.children}
+      <HTMLComment
+        ref={(ref) => {
+          commentEndRef.current = ref;
+          // 初次分配 ref 这时候commentRef 肯定已经有值了
+          assignRef();
+        }}
+        data="Ref"
+      />
+    </>
+  );
+};
+
+// 使用 `forwardRef` 将 RefRender 包装成带 ref 的组件
+const Ref = React.forwardRef(RefRender);
+
+Ref.displayName = "Ref"; // 设置组件的 displayName，方便调试
+export default Ref; // 导出组件

src/SingleObserver/index.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import type { ResizeObserverProps } from '..';
 import { CollectionContext } from '../Collection';
 import { observe, unobserve } from '../utils/observerUtil';
-import DomWrapper from './DomWrapper';
+import DomRef from './Ref';
 
 export interface SingleObserverProps extends ResizeObserverProps {
   children: React.ReactElement | ((ref: React.RefObject<Element>) => React.ReactElement);
@@ -13,7 +13,7 @@ export interface SingleObserverProps extends ResizeObserverProps {
 function SingleObserver(props: SingleObserverProps, ref: React.Ref<HTMLElement>) {
   const { children, disabled } = props;
   const elementRef = React.useRef<Element>(null);
-  const wrapperRef = React.useRef<DomWrapper>(null);
+  const wrapperRef = React.useRef<Element|Text|null>(null);
 
   const onCollectionResize = React.useContext(CollectionContext);
 
@@ -42,7 +42,7 @@ function SingleObserver(props: SingleObserverProps, ref: React.Ref<HTMLElement>)
     (elementRef.current && typeof elementRef.current === 'object'
       ? findDOMNode<HTMLElement>((elementRef.current as any)?.nativeElement)
       : null) ||
-    findDOMNode<HTMLElement>(wrapperRef.current);
+    wrapperRef.current;
 
   React.useImperativeHandle(ref, () => getDom());
 
@@ -108,14 +108,15 @@ function SingleObserver(props: SingleObserverProps, ref: React.Ref<HTMLElement>)
   }, [elementRef.current, disabled]);
 
   // ============================ Render ============================
-  return (
-    <DomWrapper ref={wrapperRef}>
-      {canRef
-        ? React.cloneElement(mergedChildren as any, {
+if(canRef){
+   return  React.cloneElement(mergedChildren as any, {
             ref: mergedRef,
           })
-        : mergedChildren}
-    </DomWrapper>
+}
+  return (
+    <DomRef ref={wrapperRef}>
+      { mergedChildren}
+    </DomRef>
   );
 }