Реагирует на низкую производительность стилевых компонентов при изменении состояния при перемещении мыши

Question

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

Это мои стили компонентов, как вы можете видеть, я использую реквизиты и обновления состояния для обновления стилей компонента

const Card = styled.div`
    box-sizing: border-box;
    box-shadow:0 2px 10px rgba( 0,0,0,.3 );
    border-radius: 8px;
    margin-bottom: 20px;
    transition: transform .5s cubic-bezier(.215, .61, .355, 1),
                            box-shadow .5s cubic-bezier(.215, .61, .355, 1);
    &:hover {
        transform: scale(1.1)  ${props => (`perspective(600px) rotateX(${props.degX}) rotateY(${props.degY})`)};
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    }

`

Это весь компонент, где я выполняю вычисления поворота для анимации параллакса и события обработка.

function AppleTvParalaxCard({children, className}) {
    const domRef = useRef();
    const [rotationDegX, setrotationDegX] = useState(0);
    const [rotationDegY, setrotationDegY] = useState(0);

    const handleMouseOver = e => {
        const {y, x, width, height} = e.target.getBoundingClientRect();
        const {pageX, pageY} = e;
        const halfW = width / 2;
        const halfH = height / 2;
        const coorX = halfW - (pageX - x);
        const coorY = halfH- (pageY - (y + window.scrollY));
        var degX  = ( ( coorY / halfH ) * 10 ) + 'deg';
        var degY  = ( ( coorX / halfW ) * -10 ) + 'deg';
        setrotationDegX(degX);
        setrotationDegY(degY);
    }

    const handleMouseOut = e => {
        setrotationDegX(0);
        setrotationDegY(0);
    }

  useEffect(() => {
    domRef.current.addEventListener("mousemove", handleMouseOver);
    domRef.current.addEventListener("mouseout", handleMouseOut);
    return () => {
            domRef.current.removeEventListener("mousemove", handleMouseOver)
            domRef.current.removeEventListener("mouseout", handleMouseOut)
        };
    }, [handleMouseOver, handleMouseOut]);

  return (
    <Card
            ref={domRef}
            className={className}
            degX={rotationDegX}
            degY={rotationDegY}
    >
      {children}
    </Card>
  );
}

Как повысить производительность, чтобы анимация работала плавно?

РЕДАКТИРОВАТЬ: я вижу, что каждый раз, когда я двигаю мышь, слушатели событий также удаляются и добавляются снова это, вероятно, не поможет в производительности.

Answer 1

Оказывается, что большинство проблем с производительностью было вызвано тем, что моя консоль chrome открыта, не совсем понятно, почему.

Кроме того, при изменении состояния изменяется только одно setState:

    const [degs, setDegs] = useState({x: 0, y: 0});

Уменьшено количество повторных попыток.

Ответ Эд Лукаса также помог.

Answer 2

Второй параметр для useEffect указывает, какие значения следует проверять на наличие обновлений, запуская функцию useEffect при изменении одного из этих значений.

Чтобы один раз запустить свой useEffect при первоначальной визуализации компонента, вы следует использовать пустой массив для этого параметра.

useEffect(() => {
...
}, []);

https://reactjs.org/docs/hooks-reference.html#useeffect