如何避免使用 react-swipe 库和 useState 重新渲染

Question

我正在使用反应库进行滑动：https://github.com/voronianski/react-swipe 让它工作很简单：

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

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

我不明白如何避免这个问题，即在不重新渲染整个组件的情况下更新状态。我应该将它分成两个部分并使用提供商吗？我试过了，但是当提供者的状态改变时，两个组件也都重新渲染

Answer 1

swipeOptions 会在每次渲染时重新创建，这也会导致 ReactSwipe 重新渲染。用 useMemo() (sandbox);

包裹 swipeOptions

const swipeOptions = useMemo(() => ({
  continuous: false,
  transitionEnd() {
    setPosition(reactSwipeEl.current.getPos())
  }
}), []);

如何避免使用 react-swipe 库和 useState 重新渲染

How to avoid re-rendering with react-swipe library and useState

swipe

reactjs

react-hooks