Reactjs 如何避免使用react swipe library和useState重新渲染

我正在使用react库进行刷卡： 让它工作起来很简单：

import React, {useEffect, useState} from 'react';
import ReactDOM from 'react-dom';
import ReactSwipe from 'react-swipe'
import styled from 'styled-components'

const StyledBox = styled.div`
  height: 50px;
  width: 100%;
  background-color: orange;
`

const Carousel = () => {
  let reactSwipeEl;

  const [position, setPosition] = useState(0)
  console.log('position', position)

  const swipeOptions = {
    continuous: false,
    transitionEnd() {
      setPosition(reactSwipeEl.getPos())
    }
  }

  return (
    <div>
      <ReactSwipe
        className="carousel"
        swipeOptions={swipeOptions}
        ref={el => (reactSwipeEl = el)}
      >
        <StyledBox>PANE 1</StyledBox>
        <StyledBox>PANE 2</StyledBox>
        <StyledBox>PANE 3</StyledBox>
      </ReactSwipe>
      <Circles>
        <Circle isActive={0 === position} />
        <Circle isActive={1 === position}/>
      </Circles>
    </div>
  );
};

export default Carousel

import React，{useffect，useState}来自“React”；
从“react dom”导入react dom；
从“react swipe”导入react swipe
从“样式化组件”导入样式化
const StyledBox=styled.div`
高度：50px；
宽度：100%；
背景颜色：橙色；
`
康斯特旋转木马=（）=>{
让我们去剥皮；
const[position，setPosition]=useState（0）
控制台日志（'位置'，位置）
常数开关选项={
连续：假，
transitionEnd（）{
设置位置（reactSwipeEl.getPos（））
}
}
返回(
（reactSwipeEl=el）}
>
窗格1
窗格2
窗格3
);
};
导出默认旋转木马

我添加的代码与useState相关。该库工作正常，但每次滑动时，我都使用回调transitionEnd来更新位置状态。它会更新，但由于状态变量发生更改，整个旋转木马组件都会更新，并自动设置init值，即0

我不明白如何避免这个问题，即在不重新呈现整个组件的情况下更新状态。我应该将它分成两个组件并使用提供者吗？

---

我尝试过，但当提供程序的状态更改时，这两个组件也会重新渲染

在每个渲染上重新创建

swipepoptions

，这会导致

ReactSwipe

也重新渲染。使用

usemo（）

（）包装

swipeOptions

---

除了记录位置，你还打算用

位置做什么？我有4个圆圈，显示的圆圈比幻灯片对应的圆圈大一点，这就是我需要跟踪幻灯片位置的原因。我尝试拆分组件并使用提供者&上下文，但每次我接触状态时，整个页面都会重新呈现。不确定库是否有这种行为，我不能做任何事情非常优雅的解决方案，非常感谢。我解决了这个问题，尽管只是这样做：开始滑动：在swipeOptions中的位置。成功了。但是您的解决方案更好，因为它也可以使用回调而不是transitionEnd。我使用回调的解决方案非常不稳定。
const swipeOptions = useMemo(() => ({
  continuous: false,
  transitionEnd() {
    setPosition(reactSwipeEl.current.getPos())
  }
}), []);