fix: fix appear event handler callback refs in WeexAppear component

packages/appear/src/weex/index.tsx

@@ -1,5 +1,5 @@
 import type { ForwardedRef } from 'react';
-import { useEffect, useRef, forwardRef, cloneElement, Children } from 'react';
+import { useEffect, useRef, forwardRef, cloneElement, Children, useCallback } from 'react';
 import type { AppearProps } from '../typings';
 
 const WeexAppear = forwardRef<any, AppearProps>((props, ref) => {
@@ -8,27 +8,41 @@ const WeexAppear = forwardRef<any, AppearProps>((props, ref) => {
 
   const { children, onAppear, onDisappear } = props;
 
+  const appearHandler = useCallback(
+    (e: CustomEvent) => {
+      onAppear?.(e);
+    },
+    [onAppear],
+  );
+
+  const disappearHandler = useCallback(
+    (e: CustomEvent) => {
+      onDisappear?.(e);
+    },
+    [onDisappear],
+  );
+
   useEffect(() => {
     // Use copy of childrenRef to avoid ref value changed in cleanup phase.
     const nodeRef = typeof childrenRef === 'object' ? childrenRef.current : null;
 
     // Return early if onAppear callback not specified.
-    onAppear && nodeRef?.addEventListener('appear', (e: CustomEvent) => onAppear(e));
+    onAppear && nodeRef?.addEventListener('appear', appearHandler);
 
     return () => {
-      onAppear && nodeRef?.removeEventListener('appear', (e: CustomEvent) => onAppear(e));
+      onAppear && nodeRef?.removeEventListener('appear', appearHandler);
     };
-  }, [childrenRef, onAppear]);
+  }, [childrenRef, appearHandler, onAppear]);
 
   useEffect(() => {
     const nodeRef = typeof childrenRef === 'object' ? childrenRef.current : null;
 
-    onDisappear && nodeRef?.addEventListener('disappear', (e: CustomEvent) => onDisappear(e));
+    onDisappear && nodeRef?.addEventListener('disappear', disappearHandler);
 
     return () => {
-      onDisappear && nodeRef?.removeEventListener('disappear', (e: CustomEvent) => onDisappear(e));
+      onDisappear && nodeRef?.removeEventListener('disappear', disappearHandler);
     };
-  }, [childrenRef, onDisappear]);
+  }, [childrenRef, onDisappear, disappearHandler]);
 
   return cloneElement(Children.only(children), { ref: childrenRef });
 });