Реагируйте useState на визуализацию слишком много раз

Question

Я создаю простую карусель с реакцией, и я заметил, что мой индекс получает вызов несколько раз, и я не понимаю почему, вот мой фрагмент кода, здесь также приведена полная версия https://codesandbox.io/s/small-bash-4l7ix?file= / src /index.js

...

const pages = [
  React.forwardRef((props, ref) => (
    <animated.div ref={ref} style={{ ...props.style, background: 'lightpink' }}>
      A
    </animated.div>
  )),
  React.forwardRef((props, ref) => (
    <animated.div ref={ref} style={{ ...props.style, background: 'lightblue' }}>
      B
    </animated.div>
  )),
  React.forwardRef((props, ref) => (
    <animated.div ref={ref} style={{ ...props.style, background: 'lightgreen' }}>
      C
    </animated.div>
  )),
]

export default function App() {
  const [index, set] = useState(0)
  const [containerRef, containerSize] = useDimensions()

  const transitions = useTransition(index, p => p, {
    from: { opacity: 0, transform: 'translate3d(100%,0,0)' },
    enter: { opacity: 1, transform: 'translate3d(0%,0,0)' },
    leave: { opacity: 0, transform: 'translate3d(-50%,0,0)' },
  })
  const divStyle = {
    height: `${containerSize.height}px`,
  }

  console.log(index)
  return (
    <>
      <button className={`btn ${index === 0 ? 'btn--active' : ''}`} onClick={() => set(0)}>
        Slide 1
      </button>
      <button className={`btn ${index === 1 ? 'btn--active' : ''}`} onClick={() => set(1)}>
        Slide 2
      </button>
      <button className={`btn ${index === 2 ? 'btn--active' : ''}`} onClick={() => set(2)}>
        Slide 3
      </button>

      <div style={divStyle} className="simple-trans-main">
        {transitions.map(({ item, props, key }) => {
          const Page = pages[item]
          return <Page ref={containerRef} key={key} style={props} />
        })}
      </div>
      <p> Lorem ipusum</p>
    </>
  )
}

...

Answer 1

Для того, чтобы переходить компоненты внутрь и наружу, ловушка useTransition из реагирующей пружины отслеживает экземпляры компонентов для вас. Эти дополнительные рендеры вызваны перекрывающимся монтажом и размонтированием узлов.

Например:

1. Начать с «Слайда 1»
2. Нажмите «Слайд 2»
3. Библиотека монтирует «Слайд 2» // Триггеры rerender
4. Библиотека начинает переводить «Слайд 1» из
5. Библиотека отключает «Слайд 1» // Срабатывает rerender

Каждый переход помещается в массив и библиотека оживляет их по порядку. Таким образом, вы можете запускать несколько перекрывающихся анимаций одновременно.

Извлеките React DevTools из кода и окна, и вы увидите, как узлы монтируются и отключаются.

Answer 2

Это из-за useTransition.

, который создает дополнительный рендер, поэтому вы видите индекс, напечатанный несколько раз.

Я удалил useTransition и вы можете проверить, печатает ли он только при index изменении.

Проверьте ниже.