Как избежать повторного рендеринга с помощью библиотеки response-swipe и useState - PullRequest
Новая
       6

Как избежать повторного рендеринга с помощью библиотеки response-swipe и useState

1 голос
/ 24 января 2020

Я использую библиотеку реагирования для считывания: 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. Библиотека работает нормально, но каждый раз, когда я провожу пальцем, я использую callback transitionEnd, чтобы обновить состояние позиции. Он обновляется, но поскольку переменная состояния изменяется, обновляется весь компонент Carousel, автоматически устанавливая значение init, равное 0.

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

1 Ответ

1 голос
/ 24 января 2020

swipeOptions воссоздается при каждом рендере, что также приводит к повторной визуализации ReactSwipe. Оберните swipeOptions useMemo() ( песочница ); 

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