From 1e14c629c483f4d5611c9e7bd40678659afb61e8 Mon Sep 17 00:00:00 2001 From: ryancw <1831931681@qq.com> Date: Fri, 4 Jul 2025 10:19:29 +0800 Subject: [PATCH 1/2] =?UTF-8?q?fix(range):=20taro=E7=8E=AF=E5=A2=83?= =?UTF-8?q?=E5=BC=82=E6=AD=A5=E6=B8=B2=E6=9F=93useReady=E4=B8=8D=E4=BC=9A?= =?UTF-8?q?=E8=A7=A6=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/range/range.taro.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/packages/range/range.taro.tsx b/src/packages/range/range.taro.tsx index d2f7e0e34c..a0d8e01f0f 100644 --- a/src/packages/range/range.taro.tsx +++ b/src/packages/range/range.taro.tsx @@ -2,13 +2,14 @@ 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 { nextTick } from '@tarojs/taro' import { pxTransform } from '@/utils/taro/px-transform' import { useTouch } from '@/hooks/use-touch' import { ComponentDefaults } from '@/utils/typings' @@ -286,7 +287,7 @@ export const Range: FunctionComponent< [innerValue, disabled, isRange, min, scope, updateValue, vertical] ) - useReady(() => { + useLayoutEffect(() => { const getRootRect = async () => { if (root.current) { const rect = await getRectInMultiPlatform(root.current) @@ -296,7 +297,7 @@ export const Range: FunctionComponent< nextTick(() => { getRootRect() }) - }) + }, []) const onTouchStart = useCallback( (event: any) => { From ab427d996517c35556ee609883cab83ad09aff83 Mon Sep 17 00:00:00 2001 From: ryancw <1831931681@qq.com> Date: Fri, 4 Jul 2025 12:52:49 +0800 Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20=E5=B0=86=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E4=B8=AD=E4=BD=BF=E7=94=A8=E7=9A=84useReady=E6=9B=BF=E6=8D=A2?= =?UTF-8?q?=E4=B8=BAuseLayoutEffect?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../avatarcropper/avatarcropper.taro.tsx | 8 +- src/packages/lottie/lottiemp.taro.tsx | 25 ++++--- src/packages/range/range.taro.tsx | 11 +-- src/packages/rate/rate.taro.tsx | 11 +-- src/packages/swipe/swipe.taro.tsx | 74 ++++++++++--------- 5 files changed, 67 insertions(+), 62 deletions(-) diff --git a/src/packages/avatarcropper/avatarcropper.taro.tsx b/src/packages/avatarcropper/avatarcropper.taro.tsx index ee184339f9..f227f259b2 100644 --- a/src/packages/avatarcropper/avatarcropper.taro.tsx +++ b/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' diff --git a/src/packages/lottie/lottiemp.taro.tsx b/src/packages/lottie/lottiemp.taro.tsx index 5dd321c581..82790d79e8 100644 --- a/src/packages/lottie/lottiemp.taro.tsx +++ b/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,9 +57,14 @@ 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) @@ -72,7 +72,8 @@ export const Lottie = React.forwardRef((props: TaroLottieProps, ref: any) => { } ) .exec() - }) + }, [autoPlay, dpr, id, loop, onComplete, source, speed, style]) + useUnload(() => { onComplete && animation.current && diff --git a/src/packages/range/range.taro.tsx b/src/packages/range/range.taro.tsx index a0d8e01f0f..54a36dcfbf 100644 --- a/src/packages/range/range.taro.tsx +++ b/src/packages/range/range.taro.tsx @@ -9,7 +9,6 @@ import React, { } from 'react' import classNames from 'classnames' import { Text, View } from '@tarojs/components' -import { nextTick } from '@tarojs/taro' import { pxTransform } from '@/utils/taro/px-transform' import { useTouch } from '@/hooks/use-touch' import { ComponentDefaults } from '@/utils/typings' @@ -288,15 +287,11 @@ export const Range: FunctionComponent< ) useLayoutEffect(() => { - const getRootRect = async () => { - if (root.current) { - const rect = await getRectInMultiPlatform(root.current) + if (root.current) { + getRectInMultiPlatform(root.current).then((rect) => { rootRect.current = rect - } + }) } - nextTick(() => { - getRootRect() - }) }, []) const onTouchStart = useCallback( diff --git a/src/packages/rate/rate.taro.tsx b/src/packages/rate/rate.taro.tsx index e2f30008f5..000c68f296 100644 --- a/src/packages/rate/rate.taro.tsx +++ b/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> = (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> = (props) => { }) } } - } + }, [refs]) - useReady(() => { + useLayoutEffect(() => { updateRects() - }) + }, [updateRects]) const handleTouchStart = (e: any) => { if (!touchable || readOnly || disabled) { diff --git a/src/packages/swipe/swipe.taro.tsx b/src/packages/swipe/swipe.taro.tsx index ec6b22f692..8d5dc887e7 100644 --- a/src/packages/swipe/swipe.taro.tsx +++ b/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() + 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() - 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',