Предотвратить повторное рендеринг с использованием перехватчиков React и onScroll или onWheel

Question

У меня есть компонент, в котором я использую событие onWheel для обнаружения прокрутки во всех направлениях (это работает). Моя проблема заключается в том, чтобы предотвратить повторное рендеринг этого компонента, чтобы я мог использовать дроссель из нижнего подчеркивания. js:

Пример

import React, {useState} from 'react';
import { throttle } from 'underscore';

const App = () => {
  const [position, setPosition] = useState({x: 0, y: 0});
  const updatePosition = throttle((e) => {
    e.preventDefault(); // Required for left/right swiping.

    setPosition({
      x: position.x + e.deltaX,
      y: position.y + e.deltaY,
    });
  }, 1000);

  return (
    <div className="viewport" onWheel={updatePosition}>
      <Box x={position.x} y={position.y} />
    </div>
  );
};

export default App;

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

Answer 1

Можете ли вы попробовать ниже. Я просто завернул газ с новой функцией.

import { throttle } from "underscore";

import Box from "./Box";

const App = () => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  function updatePosition(e) {
    e.preventDefault(); // Required for left/right swiping.

    throttle(e => {
      setPosition({
        x: position.x + e.deltaX,
        y: position.y + e.deltaY
      });
    }, 1000)(e);
  }

  return (
    <div className="viewport" onWheel={updatePosition}>
      <Box posX={position.x} posY={position.y} />
    </div>
  );
};

export default App;

Answer 2

Вы можете уменьшить рендеринг компонента, используя функцию throttle из нижнего подчеркивания, создав новый компонент с именем ThrottledBox.

export default function App() {
  const [position, setPosition] = React.useState({ x: 0, y: 0 });

  function handleOnWheen(e) {
    e.preventDefault(); // Required for left/right swiping.
    setPosition({
      x: position.x + e.deltaX,
      y: position.y + e.deltaY
    });
  }

  return (
    <div className="viewport" onWheel={handleOnWheen}>
      <ThrottledBox x={position.x} y={position.y} />
    </div>
  );
}

const ThrottledBox = throttle((props) => <Box {...props}/>, 1000);

https://codesandbox.io/s/zealous-booth-x8lfd

Answer 3

Вы можете заключить метод рычага в useCallback hook. https://codesandbox.io/s/gifted-torvalds-n15eu

import React, { useState, useCallback } from "react";
import { throttle } from "underscore";
import Box from "./Box";

const App = () => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const updatePosition = useCallback(
    throttle(position => {
      setPosition(position);
    }, 1000),
    []
  );

  const handleWheel = e => {
    e.preventDefault(); // Required for left/right swiping.
    updatePosition({
      x: position.x + e.deltaX,
      y: position.y + e.deltaY
    });
  };

  return (
    <div className="viewport" onWheel={handleWheel}>
      <Box posX={position.x} posY={position.y} />
    </div>
  );
};

export default App;