fix(range): taro环境异步渲染useReady不会触发 (#3297)

* fix(range): taro环境异步渲染useReady不会触发

* refactor: 将组件中使用的useReady替换为useLayoutEffect

Author: Ryan-CW-Code

src/packages/avatarcropper/avatarcropper.taro.tsx

@@ -4,8 +4,9 @@ import React, {
   useMemo,
   useCallback,
   FunctionComponent,
+  useLayoutEffect,
 } from 'react'
-import Taro, { useReady, createSelectorQuery } from '@tarojs/taro'
+import Taro, { createSelectorQuery } from '@tarojs/taro'
 import classNames from 'classnames'
 import { Canvas, CommonEventFunction, View } from '@tarojs/components'
 import { getWindowInfo } from '@/utils/taro/get-system-info'
@@ -137,7 +138,7 @@ export const AvatarCropper: FunctionComponent<
     cropperCanvasContext: null,
   })
 
-  useReady(() => {
+  useLayoutEffect(() => {
     if (showAlipayCanvas2D) {
       const { canvasId } = canvasAll
       createSelectorQuery()
@@ -149,7 +150,7 @@ export const AvatarCropper: FunctionComponent<
         })
         .exec()
     }
-  })
+  }, [showAlipayCanvas2D, state.displayHeight, state.displayWidth])
 
   useEffect(() => {
     setCanvasAll({
@@ -693,4 +694,5 @@ export const AvatarCropper: FunctionComponent<
     </>
   )
 }
+
 AvatarCropper.displayName = 'NutAvatarCropper'

src/packages/lottie/lottiemp.taro.tsx

@@ -1,5 +1,5 @@
-import React, { useImperativeHandle, useRef } from 'react'
-import { createSelectorQuery, getEnv, useReady, useUnload } from '@tarojs/taro'
+import React, { useImperativeHandle, useLayoutEffect, useRef } from 'react'
+import { createSelectorQuery, getEnv, useUnload } from '@tarojs/taro'
 import lottie from '@nutui/lottie-miniprogram'
 import { getWindowInfo } from '@/utils/taro/get-system-info'
 import { useUuid } from '@/hooks/use-uuid'
@@ -20,15 +20,10 @@ export const Lottie = React.forwardRef((props: TaroLottieProps, ref: any) => {
     speed = 1,
     dpr = true,
   } = props
-  const setSpeed = () => {
-    if (animation.current) {
-      animation.current.setSpeed(Math.abs(speed))
-      animation.current.setDirection(speed > 0 ? 1 : -1)
-    }
-  }
+
   useImperativeHandle(ref, () => animation.current || {})
   const pixelRatio = useRef(getWindowInfo().pixelRatio)
-  useReady(() => {
+  useLayoutEffect(() => {
     createSelectorQuery()
       .select(`#${id}`)
       .fields(
@@ -62,17 +57,23 @@ export const Lottie = React.forwardRef((props: TaroLottieProps, ref: any) => {
                 context,
               },
             })
-            onComplete &&
+            if (onComplete) {
               animation.current.addEventListener('complete', onComplete)
-            setSpeed()
+            }
+
+            if (animation.current) {
+              animation.current.setSpeed(Math.abs(speed))
+              animation.current.setDirection(speed > 0 ? 1 : -1)
+            }
             inited.current = true
           } catch (error) {
             console.error(error)
           }
         }
       )
       .exec()
-  })
+  }, [autoPlay, dpr, id, loop, onComplete, source, speed, style])
+
   useUnload(() => {
     onComplete &&
       animation.current &&

src/packages/range/range.taro.tsx

@@ -2,13 +2,13 @@ import React, {
   FunctionComponent,
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
 } from 'react'
 import classNames from 'classnames'
 import { Text, View } from '@tarojs/components'
-import { useReady, nextTick } from '@tarojs/taro'
 import { pxTransform } from '@/utils/taro/px-transform'
 import { useTouch } from '@/hooks/use-touch'
 import { ComponentDefaults } from '@/utils/typings'
@@ -286,17 +286,13 @@ export const Range: FunctionComponent<
     [innerValue, disabled, isRange, min, scope, updateValue, vertical]
   )
 
-  useReady(() => {
-    const getRootRect = async () => {
-      if (root.current) {
-        const rect = await getRectInMultiPlatform(root.current)
+  useLayoutEffect(() => {
+    if (root.current) {
+      getRectInMultiPlatform(root.current).then((rect) => {
         rootRect.current = rect
-      }
+      })
     }
-    nextTick(() => {
-      getRootRect()
-    })
-  })
+  }, [])
 
   const onTouchStart = useCallback(
     (event: any) => {

src/packages/rate/rate.taro.tsx

@@ -1,13 +1,14 @@
 import React, {
   FunctionComponent,
   ReactElement,
+  useCallback,
   useEffect,
+  useLayoutEffect,
   useRef,
   useState,
 } from 'react'
 import classNames from 'classnames'
 import { StarFill } from '@nutui/icons-react-taro'
-import { useReady } from '@tarojs/taro'
 import { ITouchEvent, Text, View } from '@tarojs/components'
 import { ComponentDefaults } from '@/utils/typings'
 import { usePropsValue } from '@/hooks/use-props-value'
@@ -131,7 +132,7 @@ export const Rate: FunctionComponent<Partial<TaroRateProps>> = (props) => {
     }
   }
 
-  const updateRects = () => {
+  const updateRects = useCallback(() => {
     for (let index = 0; index < refs.length; index++) {
       const item = refs[index]
       if (item) {
@@ -140,11 +141,11 @@ export const Rate: FunctionComponent<Partial<TaroRateProps>> = (props) => {
         })
       }
     }
-  }
+  }, [refs])
 
-  useReady(() => {
+  useLayoutEffect(() => {
     updateRects()
-  })
+  }, [updateRects])
 
   const handleTouchStart = (e: any) => {
     if (!touchable || readOnly || disabled) {

src/packages/swipe/swipe.taro.tsx

@@ -1,15 +1,16 @@
 import React, {
   forwardRef,
   MouseEvent,
+  useCallback,
   useEffect,
   useImperativeHandle,
+  useLayoutEffect,
   useRef,
   useState,
 } from 'react'
 import classNames from 'classnames'
 import { ITouchEvent, View } from '@tarojs/components'
 import { BaseEventOrig } from '@tarojs/components/types/common'
-import { nextTick, useReady } from '@tarojs/taro'
 import { useTouch } from '@/hooks/use-touch'
 import { getRectInMultiPlatform } from '@/utils/taro/get-rect'
 import { ComponentDefaults } from '@/utils/typings'
@@ -45,8 +46,43 @@ export const Swipe = forwardRef<
   const leftId = `swipe-left-${uid}`
   const rightId = `swipe-right-${uid}`
 
+  const { children, className, style } = { ...defaultProps, ...props }
+
+  const root: any = useRef<HTMLDivElement>()
+  const opened = useRef(false)
+  const lockClick = useRef(false)
+  const startOffset = useRef(0)
+
+  const [state, setState] = useState({
+    offset: 0,
+    dragging: false,
+  })
+
+  const [actionWidth, updateState] = useRefState({
+    left: 0,
+    right: 0,
+  })
+  const setActionWidth = useCallback(
+    (fn: any) => {
+      const res = fn()
+      if (res.left !== undefined) {
+        updateState({
+          ...actionWidth.current,
+          left: res.left,
+        })
+      }
+      if (res.right !== undefined) {
+        updateState({
+          ...actionWidth.current,
+          right: res.right,
+        })
+      }
+    },
+    [actionWidth, updateState]
+  )
+
   // 获取元素的时候要在页面 onReady 后，需要参考小程序的事件周期
-  useReady(() => {
+  useLayoutEffect(() => {
     const getWidth = async () => {
       if (leftWrapper.current) {
         const leftRect = await getRectInMultiPlatform(
@@ -64,40 +100,10 @@ export const Swipe = forwardRef<
           setActionWidth((v: any) => ({ ...v, right: rightRect.width }))
       }
     }
-    nextTick(() => getWidth())
-  })
 
-  const { children, className, style } = { ...defaultProps, ...props }
+    getWidth()
+  }, [leftId, rightId, setActionWidth])
 
-  const root: any = useRef<HTMLDivElement>()
-  const opened = useRef(false)
-  const lockClick = useRef(false)
-  const startOffset = useRef(0)
-
-  const [state, setState] = useState({
-    offset: 0,
-    dragging: false,
-  })
-
-  const [actionWidth, updateState] = useRefState({
-    left: 0,
-    right: 0,
-  })
-  const setActionWidth = (fn: any) => {
-    const res = fn()
-    if (res.left !== undefined) {
-      updateState({
-        ...actionWidth.current,
-        left: res.left,
-      })
-    }
-    if (res.right !== undefined) {
-      updateState({
-        ...actionWidth.current,
-        right: res.right,
-      })
-    }
-  }
   const wrapperStyle = {
     transform: `translate(${state.offset}${!harmony() ? 'px' : ''}, 0)`,
     transitionDuration: state.dragging ? '0s' : '.6s',