@xhsreds/reds-rn-next 0.8.4-fix-image-callbacks202510011434 → 0.8.4-image-optimization202510222117

package/src/components/Image/Image.tsx

@@ -1,4 +1,4 @@
-import React, { useState, memo, useMemo, useRef, useCallback, useEffect } from "react";
+import React, { useState, memo, useMemo, useEffect } from "react";
 import {
   View,
   Image as RNImage,
@@ -10,25 +10,17 @@ import {
   ImageErrorEventData,
   ImageProgressEventDataIOS,
   ImageSourcePropType,
-  ImageURISource,
 } from "react-native";
-import {
-  RedsImage,
-  ImageDefaultProps,
-  IMAGE_STATUS,
-  TErrorStyle,
-  TLoadStyle,
-  ImageTrackerProps,
-} from "./interface/index";
+import { RedsImage, ImageDefaultProps, IMAGE_STATUS, TErrorStyle, TLoadStyle } from "./interface/index";
 import styles from "./styles";
-import { useAveColor, useBlur } from "./hook";
+import { useAveColor, useBlur, useImageId } from "./hook";
 import CircularProgress from "./CircularProgress";
 import { useColorMode } from "../ConfigProvider";
 import useMounted from "../../pvCount/useUnmountedProcess";
 import { lightColor } from "@xhs/reds-token-next";
-import { formatUri, isDataUri, isLocalFile, convertKeysToSnakeCase } from "./utils";
+import { formatUri } from "./utils";
 import VisibilitySensor from "./VisibilitySensor";
-import { apmPush } from "./apm";
+import { ImageAPMManager } from "./manager";
 
 const imageReLoad = {
   light: "https://picasso-static.xiaohongshu.com/fe-platform/06ae169b310c2926e541903b828486a80fcac404.png",
@@ -54,15 +46,22 @@ const Image = ({
   abortApmCollection,
   fadeDuration,
   onFirstDrawFinished,
+  apmBiz,
   ...props
 }: RedsImage & Omit<ImageProps, keyof RedsImage>) => {
   useMounted("Image");
+
+  // Generate stable ID for this image instance
+  const imageId = useImageId();
+
   const [imageStatus, setImageStatus] = useState(IMAGE_STATUS.LOADING);
   const [progress, setProgress] = useState(0);
+  const [viewable, setViewable] = useState(false);
+  const [apmDone, setApmDone] = useState(false);
 
   const formatSource = useMemo(() => {
     // @ts-ignore
-    if (_source) return { uri: formatUri({ uri: _source.uri, width }) } as ImageSourcePropTyp;
+    if (_source) return { uri: formatUri({ uri: _source.uri, width }) };
     // @ts-ignore
     return { uri: formatUri({ uri: src, width }) } as ImageSourcePropType;
   }, [src, _source, width]);
@@ -75,114 +74,33 @@ const Image = ({
 
   const blurSource = useBlur({ source: formatSource });
 
-  const [viewable, setViewable] = useState(false);
-  const hasInit = useRef(false);
-  const checkIsVisible = (isVisible: boolean) => {
-    if (abortApmCollection) return;
-    // 判断首屏
-    if (!hasInit.current) {
-      hasInit.current = true;
-      apmDataRef.current.isFirstScreen = isVisible ? "true" : "false";
-    }
-    setViewable(isVisible);
-  };
-  const apmDataRef = useRef<ImageTrackerProps>({
-    imageUrl: "",
-    imageHost: "",
-    intersectTime: viewable ? Date.now() : 0,
-    imageSize: 0,
-    isFirstScreen: "false",
-    isPrefetch: "",
-    isSuccess: "false",
-    errorReason: "",
-    loadedStartTime: 0,
-    loadedTime: 0,
-    loadDuration: 0,
-    viewDuration: 0,
-  });
-  const [apmDoneRef, setApmDoneRef] = useState(false);
-
+  // APM Manager Integration - Single effect for registration
   useEffect(() => {
     if (abortApmCollection) return;
-    try {
-      const apmData = apmDataRef.current;
-      if (
-        typeof formatSource !== "number" &&
-        !isLocalFile((formatSource as ImageURISource).uri as string) &&
-        !isDataUri((formatSource as ImageURISource).uri as string)
-      ) {
-        const imageUrl = new URL((formatSource as ImageURISource).uri as string);
-        apmData.imageHost = `${imageUrl.protocol}//${imageUrl.host}`;
-        apmData.imageUrl = (formatSource as ImageURISource).uri as string;
-      }
-    } catch (error) {
-      //
-    }
-  }, [formatSource, abortApmCollection]);
 
-  useEffect(() => {
-    if (abortApmCollection) return;
-    const imageUrl = (formatSource as ImageURISource)?.uri || "";
-    if (typeof RNImage.queryCache === "function" && !!imageUrl) {
-      const uriEncodeImageUrl = encodeURI(imageUrl);
-      RNImage.queryCache([imageUrl]).then((res) => {
-        if (res?.[uriEncodeImageUrl]) {
-          apmDataRef.current.isPrefetch = "true";
-        } else {
-          apmDataRef.current.isPrefetch = "false";
-        }
-      });
-    }
-    return () => {
-      apmDataRef.current.isPrefetch = "";
-    };
-  }, [formatSource, abortApmCollection]);
+    const manager = ImageAPMManager.getInstance();
+    manager.register(imageId, formatSource, apmBiz);
 
-  const pushApmData = useCallback(() => {
-    if (abortApmCollection) return;
-    const apmData = apmDataRef.current;
-    const viewDuration = apmData.loadedTime - apmData.intersectTime;
-    apmData.viewDuration = viewDuration < 0 ? 0 : viewDuration;
-    /**
-     * 如果Image.queryCache未完成时,通过imageSize来判断
-     * 如果image_size是-1,那么认为图片已有缓存
-     */
-    const imageSize = apmDataRef.current.imageSize || 0;
-    if (!apmDataRef.current.isPrefetch) {
-      apmDataRef.current.isPrefetch = String((imageSize || 0) <= 0);
-    }
-    if (!apmDoneRef && apmData.imageUrl && !abortApmCollection) {
-      setApmDoneRef(true);
-      apmPush(convertKeysToSnakeCase(apmData));
-    }
-  }, [abortApmCollection]);
+    return () => manager.unregister(imageId);
+  }, [imageId, abortApmCollection, apmBiz]);
 
-  // 判断首屏
-  if (
-    (!apmDataRef.current.isFirstScreen || apmDataRef.current.isFirstScreen === "false") &&
-    viewable &&
-    !abortApmCollection
-  ) {
-    apmDataRef.current.isFirstScreen = "true";
-  }
+  // Update source if it changes
   useEffect(() => {
     if (abortApmCollection) return;
-    const apmData = apmDataRef.current;
-    if (!apmData.intersectTime && viewable) {
-      apmData.intersectTime = Date.now();
-      // 进入视窗前加载完成/失败
-      if (apmData.loadedTime || apmData.errorReason) {
-        pushApmData();
-      }
-    }
-  }, [viewable, pushApmData, abortApmCollection]);
-  const onLoadEnd = () => {
-    props?.onLoadEnd?.();
+    ImageAPMManager.getInstance().updateSource(imageId, formatSource);
+  }, [formatSource, abortApmCollection, imageId]);
+
+  // Visibility tracking - simplified
+  const checkIsVisible = (isVisible: boolean) => {
     if (abortApmCollection) return;
-    const apmData = apmDataRef.current;
-    // 进入视窗后加载成功/失败
-    if (apmData.intersectTime) {
-      pushApmData();
+    ImageAPMManager.getInstance().setViewable(imageId, isVisible);
+    setViewable(isVisible);
+  };
+
+  // Event handlers - simplified to use manager
+  const onLoadStart = () => {
+    if (!abortApmCollection) {
+      ImageAPMManager.getInstance().recordLoadStart(imageId);
     }
   };
 
@@ -193,33 +111,36 @@ const Image = ({
     if (total) {
       setProgress(((loaded / total) * 100) | 0);
     }
-    !abortApmCollection && (apmDataRef.current.imageSize = total);
+    if (!abortApmCollection) {
+      ImageAPMManager.getInstance().recordProgress(imageId, loaded, total);
+    }
     props.onProgress?.(e);
   };
+
   const onLoad = (e: NativeSyntheticEvent<ImageLoadEventData>) => {
     if (!abortApmCollection) {
-      const now = Date.now();
-      const loadDuration = now - apmDataRef.current.loadedStartTime;
-      apmDataRef.current.loadedTime = now;
-      apmDataRef.current.loadDuration = loadDuration < 0 ? 0 : loadDuration;
-      apmDataRef.current.isSuccess = "true";
+      ImageAPMManager.getInstance().recordLoad(imageId);
     }
     props.onLoad?.(e);
     setImageStatus(IMAGE_STATUS.LOADED);
   };
 
-  const onLoadStart = () => {
-    !abortApmCollection && (apmDataRef.current.loadedStartTime = Date.now());
-  };
-
   const onError = (e: NativeSyntheticEvent<ImageErrorEventData>) => {
     if (!abortApmCollection) {
-      apmDataRef.current.isSuccess = "false";
-      apmDataRef.current.errorReason = `${e.nativeEvent.error}`;
+      ImageAPMManager.getInstance().recordError(imageId, `${e.nativeEvent.error}`);
     }
     props.onError?.(e);
     setImageStatus(errorStyle === TErrorStyle.ERROR ? IMAGE_STATUS.LOADERROR : IMAGE_STATUS.RELOAD);
   };
+
+  const onLoadEnd = () => {
+    if (!abortApmCollection) {
+      ImageAPMManager.getInstance().checkAndPush(imageId);
+      setApmDone(true);
+    }
+    props?.onLoadEnd?.();
+  };
+
   const onReload = (e: GestureResponderEvent) => {
     setImageStatus(IMAGE_STATUS.HIDE);
     props.onReload?.(e);
@@ -234,7 +155,7 @@ const Image = ({
     <View style={{ borderRadius, height, width, ...(style as {}) }}>
       {imageStatus !== IMAGE_STATUS.HIDE &&
         (!abortApmCollection ? (
-          <VisibilitySensor onChange={checkIsVisible} disabled={apmDoneRef}>
+          <VisibilitySensor onChange={checkIsVisible} disabled={apmDone}>
             <RNImage
               {...props}
               // @ts-ignore

package/src/components/Image/VisibilitySensor.tsx

@@ -1,98 +1,51 @@
-import React, { useCallback, useEffect, useRef, useState, forwardRef, useImperativeHandle } from "react";
-import { Dimensions, type ScaledSize, View } from "react-native";
-import type { VisibilitySensorRef, VisibilitySensorProps, RectDimensionsState } from "./interface/visibilitySensor";
-// function useInterval(callback: () => void, delay: number | null) {
-//   const savedCallback = useRef(callback);
-//   useEffect(() => {
-//     savedCallback.current = callback;
-//   }, [callback]);
-//   useEffect(() => {
-//     if (delay === null || delay === undefined) {
-//       return;
-//     }
-//     const id = setInterval(() => savedCallback.current(), delay);
-//     return () => clearInterval(id);
-//   }, [delay]);
-// }
+import React, { useCallback, useEffect, useRef, forwardRef, useImperativeHandle } from "react";
+import { Dimensions, View } from "react-native";
+import type { VisibilitySensorRef, VisibilitySensorProps } from "./interface/visibilitySensor";
+
 const VisibilitySensor = forwardRef<VisibilitySensorRef, VisibilitySensorProps>((props, ref) => {
   const { onChange, disabled = false, triggerOnce = false, delay, threshold = {}, children, ...rest } = props;
   const localRef = useRef<View>(null);
-  const hasMountedRef = useRef(false);
+  const lastVisibleRef = useRef<boolean | undefined>(undefined);
+  const measuredOnceRef = useRef<boolean>(false);
+
   useImperativeHandle(ref, () => ({
     getInnerRef: () => localRef.current,
   }));
-  const [rectDimensions, setRectDimensions] = useState<RectDimensionsState>({
-    rectTop: 0,
-    rectBottom: 0,
-    rectLeft: 0,
-    rectRight: 0,
-    rectWidth: 0,
-    rectHeight: 0,
-  });
-  const [lastValue, setLastValue] = useState<boolean | undefined>(undefined);
-  const [active, setActive] = useState<boolean>(false);
-  const measureInnerView = () => {
-    if (!active) return;
-    localRef.current?.measure((_x: number, _y: number, width: number, height: number, pageX: number, pageY: number) => {
-      const dimensions = {
-        rectTop: pageY,
-        rectBottom: pageY + height,
-        rectLeft: pageX,
-        rectRight: pageX + width,
-        rectWidth: width,
-        rectHeight: height,
-      };
-      if (
-        rectDimensions.rectTop !== dimensions.rectTop ||
-        rectDimensions.rectBottom !== dimensions.rectBottom ||
-        rectDimensions.rectLeft !== dimensions.rectLeft ||
-        rectDimensions.rectRight !== dimensions.rectRight ||
-        rectDimensions.rectWidth !== dimensions.rectWidth ||
-        rectDimensions.rectHeight !== dimensions.rectHeight
-      ) {
-        setRectDimensions(dimensions);
+
+  // Compute visibility once using native measure; avoid react state to prevent layout loops
+  const measureAndNotify = useCallback(() => {
+    if (disabled || measuredOnceRef.current) return;
+    const win = Dimensions.get("window");
+    localRef.current?.measure((_, __, width: number, height: number, pageX: number, pageY: number) => {
+      const isVisible =
+        pageY + (threshold.top || 0) <= win.height &&
+        pageY + height - (threshold.bottom || 0) >= 0 &&
+        pageX + (threshold.left || 0) <= win.width &&
+        pageX + width - (threshold.right || 0) >= 0;
+
+      if (lastVisibleRef.current !== isVisible) {
+        lastVisibleRef.current = isVisible;
+        onChange(isVisible);
+        // Only measure once to match original behavior
+        measuredOnceRef.current = true;
       }
     });
-  };
-  // useInterval(measureInnerView, delay || 100);
-  const startWatching = useCallback(() => {
-    if (!active) setActive(true);
-  }, [active]);
-  const stopWatching = useCallback(() => {
-    if (active) setActive(false);
-  }, [active]);
+  }, [disabled, onChange, threshold]);
+
+  // Keep active in sync with disabled prop
   useEffect(() => {
-    if (!disabled) {
-      startWatching();
+    // If it becomes enabled and we haven't measured yet, measure once now
+    if (!disabled && !measuredOnceRef.current) {
+      // Defer to allow layout to settle
+      requestAnimationFrame(() => measureAndNotify());
     }
-    return () => {
-      stopWatching();
-    };
-  }, [disabled, startWatching, stopWatching]);
-  useEffect(() => {
-    if (!hasMountedRef.current) {
-      hasMountedRef.current = true;
-      return;
-    }
-    const window: ScaledSize = Dimensions.get("window");
-    const isVisible: boolean =
-      rectDimensions.rectTop + (threshold.top || 0) <= window.height && // Top edge is within the bottom of the window
-      rectDimensions.rectBottom - (threshold.bottom || 0) >= 0 && // Bottom edge is within the top of the window
-      rectDimensions.rectLeft + (threshold.left || 0) <= window.width && // Left edge is within the right of the window
-      rectDimensions.rectRight - (threshold.right || 0) >= 0; // Right edge is within the left of the window
-    if (lastValue !== isVisible) {
-      setLastValue(isVisible);
-      onChange(isVisible);
-      if (isVisible && triggerOnce) {
-        stopWatching();
-      }
-    }
-    // change
-  }, [rectDimensions, lastValue, threshold, onChange, triggerOnce, stopWatching]);
+  }, [disabled, measureAndNotify]);
+
   return (
-    <View ref={localRef} {...rest} onLayout={() => measureInnerView()}>
+    <View ref={localRef} {...rest} onLayout={measureAndNotify}>
       {children}
     </View>
   );
 });
+
 export default VisibilitySensor;

package/src/components/Image/hook/index.ts

@@ -30,3 +30,5 @@ export const useBlur = ({ source }: { source: ImageSourcePropType }) => {
   if (!url) return { uri: "" };
   return { uri: url.includes("?") ? url.replace(/\?.*/, "?imageMogr2/blur/25x25") : url + "?imageMogr2/blur/25x25" };
 };
+
+export { useImageId } from "./useImageId";

package/src/components/Image/hook/useImageId.ts

@@ -0,0 +1,33 @@
+import { useRef } from "react";
+import React from "react";
+
+/**
+ * useId polyfill for React < 18
+ *
+ * React 18+ has native useId() hook for generating unique IDs.
+ * For older versions, we implement a simple counter-based solution.
+ */
+
+let globalCounter = 0;
+
+/**
+ * Generate a unique ID for each image instance
+ *
+ * If React 18+ useId is available, use it.
+ * Otherwise, use a counter-based fallback.
+ */
+export function useImageId(): string {
+  // Try to use React 18+ native useId if available
+  if (typeof (React as any).useId === "function") {
+    return (React as any).useId();
+  }
+
+  // Fallback for React < 18
+  const idRef = useRef<string | null>(null);
+
+  if (idRef.current === null) {
+    idRef.current = `image-${++globalCounter}`;
+  }
+
+  return idRef.current;
+}