Swiper重构 #1711

xiao19880917lu · 2024-11-21T06:08:31Z

No description provided.

hiyuki · 2024-11-21T08:22:42Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+    let renderChild = children.slice()
+    if (props.circular && totalElements.value > 1) {
+      if (totalElements.value === 2) {
+        renderChild = renderChild.concat(children).concat(children)


添加节点需要cloneElement

hiyuki · 2024-11-21T08:22:56Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+        renderChild = renderChild.concat(children).concat(children)
+      } else {
+        // 最前加两个
+        renderChild.unshift(children[totalElements.value - 1])


前面不需要加元素

hiyuki · 2024-11-21T08:24:27Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+  ], { layoutRef: layoutRef })
+
+  function onWrapperLayout (e: LayoutChangeEvent) {
+    nodeRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {


layout里面可以直接获取高宽，不需要measure

hiyuki · 2024-11-21T08:24:35Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+
+  function onWrapperLayout (e: LayoutChangeEvent) {
+    nodeRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
+      layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }


hiyuki · 2024-11-21T08:29:49Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+        }
+        const attr = dir.value === 'x' ? 'width' : 'height'
+        changeState[attr] = changeState[attr] - previousMargin - nextMargin
+        if (dir.value === 'x') {


这里不应该都去设置么

hiyuki · 2024-11-21T08:31:38Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+    if (totalElements.value <= 1) return null
+    const dots: Array<ReactNode> = []
+    for (let i = 0; i < totalElements.value; i++) {
+      const dotStyle = useAnimatedStyle(() => {


不应该在for中使用hooks，假如elements数量更新了就炸了

hiyuki · 2024-11-21T08:40:05Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+  }
+
+  function handlerInterval (loopv: boolean, oldLoop: boolean | null) {
+    clearInterval(intervalId.current)


为啥有一个timeout有一个interval?

hiyuki · 2024-11-21T08:41:07Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+          intervalId.current = setInterval(() => {
+            // canLoop变化比较快的情况下
+            if (canLoop.value) {
+              createAutoPlay()


这个东西为啥要声明为worklet？看上去是个纯js函数

hiyuki · 2024-11-21T08:42:22Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+    if (!isInit && props.bindchange) {
+      runOnJS(handleSwiperChange)(newIndex)
+    }
+  }, [targetIndex.value])


这里不需要写deps把

hiyuki · 2024-11-21T08:43:18Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+    }
+  }, [targetIndex.value])
+
+  useAnimatedReaction(() => canLoop.value, (loopv, oldLoop) => {


canLoop是干啥的

hiyuki · 2025-01-13T10:37:07Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+    }
+  }, [])
+
+  const reachBoundary = useCallback((eventData: EventDataType) => {


可以把这一堆函数全都放在下面的useMemo里就行了，就不需要这么多useCallback了

hiyuki · 2025-01-13T11:05:49Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+  const nextMarginShared = useSharedValue(nextMargin)
+  // 默认前后补位的元素个数
+  const patchEleNum = props.circular ? (preMargin ? 2 : 1) : 0
+  const patchElementNum = useSharedValue(patchEleNum)


没有更新逻辑

patchElmNum/patchElmNumShared

hiyuki · 2025-01-13T11:06:31Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+  // 默认前后补位的元素个数
+  const patchEleNum = props.circular ? (preMargin ? 2 : 1) : 0
+  const patchElementNum = useSharedValue(patchEleNum)
+  const circular = useSharedValue(props.circular || false)


没有更新

hiyuki · 2025-01-13T11:08:14Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+    }
+  })
+
+  const renderPagination = useCallback(() => {


这个不需要useCallback

hiyuki · 2025-01-13T11:12:07Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+  useEffect(() => {
+    let patchStep = 0
+    if (preMargin !== previousMargin.value) {
+      patchStep = preMargin - previousMargin.value


hiyuki · 2025-01-13T11:13:38Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+  const { textProps } = splitProps(props)
+  const preMargin = props['previous-margin'] ? parseInt(props['previous-margin']) : 0
+  const nextMargin = props['next-margin'] ? parseInt(props['next-margin']) : 0
+  const previousMargin = useSharedValue(preMargin)


preMarginShared

hiyuki · 2025-01-13T11:18:49Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+  }
+  // resumeLoop在worklet中调用
+  function resumeLoop () {
+    if (props.autoplay && childrenLength.value > 1) {


autoplay也得是个sharedValue

hiyuki · 2025-01-13T11:51:15Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+    return targetOffset
+  }
+  // loop在JS线程中调用，createAutoPlay + useEffect中
+  function loop () {


加个clearTimeout

hiyuki · 2025-01-13T12:03:05Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+      return
+    }
+    const targetOffset = getOffset(props.current || 0, step.value)
+    if (props.current !== undefined && props.current !== currentIndex.value) {


封装updateCurrent函数在useEffect和onLayout中复用

判断条件可以改为targetOffset!==offset.value

内部基于props.current!==currentIndex.value决定是否使用动画及更新currentIndex.value

hiyuki · 2025-01-13T12:05:17Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+    if (!step.value) {
+      return
+    }
+    if (props.autoplay && children.length > 1) {


封装updateAutoplay函数在useEffect和onLayout中复用

hiyuki · 2025-01-13T12:20:07Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+        duration: easeDuration,
+        easing: easeMap[easeingFunc]
+      }, () => {
+        if (touchfinish.value !== false) {


验证一下回调在cancelAnimation时的执行时机，是立刻执行还是得等duration结束再执行

hiyuki · 2025-01-13T12:20:45Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+          return
+        }
+        const { isBoundary, resetOffset } = reachBoundary(eventData)
+        if (isBoundary && circular.value && !touchfinish.value) {


touchmove时理论上不需要判断touchfinish吧

hiyuki · 2025-01-13T12:31:20Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+        moveTime.value = new Date().getTime()
+      })
+      .onTouchesMove((e) => {
+        'worklet'


if(touchfinish.value) return

hiyuki · 2025-01-13T12:31:30Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+  const gestureHandler = useMemo(() => {
+    const gesturePan = Gesture.Pan()
+      .onBegin((e) => {
+        'worklet'


if(!step.value) return

hiyuki · 2025-01-13T12:32:00Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+        preAbsolutePos.value = touchEventData[strAbso]
+      })
+      .onTouchesUp((e) => {
+        'worklet'


if(touchfinish.value) return

hiyuki · 2025-01-13T12:32:32Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+    const realHeight = dir === 'y' ? height - preMargin - nextMargin : height
+    const iStep = dir === 'x' ? realWidth : realHeight
+    step.value = iStep
+    if (touchfinish.value) {


这个判断干掉

判断step.value!==iStep再执行更新逻辑

hiyuki · 2025-01-13T12:35:13Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+    return (<SwiperContext.Provider value={contextValue}>{arrChildren}</SwiperContext.Provider>)
+  }
+
+  const createAutoPlay = useCallback(() => {


useMemo(()=>{
function createAutoplay(){}
function loop(){}
function resumeLoop(){}
function pauseLoop(){}
return {
loop,
resumeLoop,
pauseLoop
}
})

hiyuki · 2025-01-15T06:25:24Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+import { GestureDetector, Gesture } from 'react-native-gesture-handler'
+import Animated, { useAnimatedStyle, useSharedValue, withTiming, Easing, runOnJS, useAnimatedReaction, cancelAnimation } from 'react-native-reanimated'
+
+import React, { JSX, forwardRef, useRef, useEffect, ReactNode, ReactElement, useCallback, useMemo } from 'react'


useCallback可以删掉了

hiyuki · 2025-01-15T06:30:05Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+  const nextMargin = props['next-margin'] ? parseInt(props['next-margin']) : 0
+  const previousMarginShared = useSharedValue(preMargin)
+  const nextMarginShared = useSharedValue(nextMargin)
+  const autoplayShared = useSharedValue(autoplay || false)


props的默认值统一在上面给吧

hiyuki · 2025-01-15T06:30:26Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+  const { textProps } = splitProps(props)
+  const preMargin = props['previous-margin'] ? parseInt(props['previous-margin']) : 0
+  const nextMargin = props['next-margin'] ? parseInt(props['next-margin']) : 0
+  const previousMarginShared = useSharedValue(preMargin)


改为preMarginShared吧，和上面的preMargin对齐

hiyuki · 2025-01-15T06:31:31Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+  }, [props.current])
+
+  useEffect(() => {
+    autoplayShared.value = autoplay || false


不需要默认值，统一在解构props时赋予默认值

hiyuki · 2025-01-15T06:40:33Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+  const { textStyle } = splitStyle(normalStyle)
+  const { textProps } = splitProps(props)
+  const preMargin = props['previous-margin'] ? parseInt(props['previous-margin']) : 0
+  const nextMargin = props['next-margin'] ? parseInt(props['next-margin']) : 0


使用global.__formatValue来获取数值，可以处理rpx

luyongfang added 20 commits November 6, 2024 19:09

swiper refactor init

13bbdab

修复循环自动轮播初始化

e3f09a4

add interpolate animateion

0ce5bb5

animation fix & ts

763d32a

修复worklet & JS 通信问题 & 边界场景

ab9c8bf

修复边界问题

e1cb370

修复runOnJs 问题

f3c9706

merge master

3b40f5d

修复 margin问题

d5f2083

修复快速滚动+轮播问题 & 排查y滚

8102f16

swiper 重构拖拽

94c43d1

swiper loop

3fc91c1

fix bug

be7b1a9

swiper 修复连续滑动&滑动中触摸

ec9cdd1

修复eslint

ae983cd

merge master

e79c797

修改组件命名

8063477

调整下位置

63ca5e3

调整下变量命名

5d640ee

修复lint

10566df

hiyuki reviewed Nov 21, 2024

View reviewed changes

修复自动轮播手动滑动不轮播

4ce3ccf

hiyuki reviewed Jan 13, 2025

View reviewed changes

luyongfang added 2 commits January 14, 2025 22:49

优化swiper

dc1f522

修复lint

11d06c6

hiyuki reviewed Jan 15, 2025

View reviewed changes

优化comment

5d4f677

hiyuki approved these changes Jan 15, 2025

View reviewed changes

Merge branch 'master' into feat-swiper-refactor

ba66a74

hiyuki merged commit b440816 into master Jan 15, 2025
6 checks passed

hiyuki deleted the feat-swiper-refactor branch January 15, 2025 07:47

Swiper重构 #1711

Swiper重构 #1711

Conversation

xiao19880917lu commented Nov 21, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hiyuki Jan 13, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hiyuki Jan 13, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hiyuki Jan 13, 2025 •

edited

Loading

hiyuki Jan 13, 2025 •

edited

Loading