Как использовать газ или дебат с React Hook? - PullRequest
Новая
       67

Как использовать газ или дебат с React Hook?

0 голосов
/ 13 февраля 2019

Я пытаюсь использовать метод throttle из lodash в компоненте fonctionnal, например: 

const App = () => {
  const [value, setValue] = useState(0)
  useEffect(throttle(() => console.log(value), 1000), [value])
  return (
    <button onClick={() => setValue(value + 1)}>{value}</button>
  )
}

Поскольку метод внутри useEffect повторно объявляется при каждом рендеринге, эффект удушения неработа.

У кого-нибудь есть простое решение?

1 Ответ

0 голосов
/ 13 февраля 2019

Вы можете (и, вероятно, нуждаетесь) useRef, чтобы сохранить значение между рендерами.Так же, как это предлагается для таймеров

Что-то в этом роде 

const App = () => {
  const [value, setValue] = useState(0)
  const throttled = useRef(throttle((newValue) => console.log(newValue), 1000))

  useEffect(() => throttled.current(value), [value])

  return (
    <button onClick={() => setValue(value + 1)}>{value}</button>
  )
}

Что касается useCallback:

Это можетработать также как 

const throttled = useCallback(throttle(newValue => console.log(newValue), 1000), []);

Но если мы попытаемся воссоздать обратный вызов после изменения value: 

const throttled = useCallback(throttle(() => console.log(value), 1000), [value]);

мы можем обнаружить, что это не задерживает выполнение: после изменения valueОбратный вызов немедленно воссоздается и выполняется.

Так что я вижу, useCallback в случае отложенного запуска не дает существенного преимущества.Это зависит от вас.

[UPD] изначально это было 

  const throttled = useRef(throttle(() => console.log(value), 1000))

  useEffect(throttled.current, [value])

, но таким образом throttled.current связалось с начальным value (из 0) закрытием.Так что он никогда не менялся даже при следующих рендерах.

Так что будьте осторожны при вводе функций в useRef из-за функции закрытия.

...