Недавно я работал над крупномасштабным приложением React, которое включает в себя МНОЖЕСТВО функций, позволяющих редактировать значения на панели настроек, одновременно отображая предварительный просмотр результатов в другой панели. Упрощенное дерево React выглядело примерно так:
<ContextProvider value={{ valueFromContext, setValueFromContext }}>
<SettingsEditor />
<SettingsResultLivePreview />
</ContextProvider>
Где SettingsEditor и SettingsResultLivePreview — компоненты с глубоко вложенными дочерними элементами.
Теперь предположим, что у нас есть параметр valueFromContext, который можно переключать на панели SettingsEditor, и мы (очевидно) хотели бы иметь возможность предварительного просмотра результата в пределах SettingsResultLivePreview. Единственная проблема: переключение настройки стоит дорого! Не только фактическое вычисление параметра является дорогостоящим, но и значение контекста будет повторно отображать все наше (глубоко вложенное) дерево компонентов React при каждом обновлении!
Подводя итог: нам нужно живое, реактивное значение данных в пределах 1 стороны нашего дерева компонентов (SettingsEditor), в то время как обновленное значение отправляется в наш предварительный просмотр на другой стороне дерева с регулируемой скоростью.
Вот где useThrottledState вступает в игру. Крюк представляет собой:
Вставная замена для `useState` с возможностями регулирования. Немедленный доступ к локальному состоянию при отправке данных рабочим функциям с регулируемой скоростью.
Установите крючок с помощью вашего классика:
npm install use-throttled-state
Поскольку хук работает как «вставная» замена useState , API прост:
import useThrottledState from 'use-throttled-state' ... const [value, setValue] = useThrottledState(initialValue, throttleRate, workerFunc)
пример использования 500 мс throttleRate
vs. 2500 ms
Итак, например, если вы находитесь в ситуации, в которой я был, когда мне нужно было обновить значение в дереве широкого контекста, ваше использование может выглядеть следующим образом:
const { setValueFromContext, valueFromContext } = useContext(SomeContext)
const [localValue, setLocalValue] = useThrottledState(valueFromContext, 500, (newValue) => { setValueFromContext(newValue)
})
Где localValue и setLocalValue будут обновляться немедленно (посредством прямого useState), но ваша функция setValueFromContext будет вызываться только один раз в 500 миллисекунд с самым последним значением!
Я надеюсь, что useThrottledState поможет вам со всеми вашими потребностями в дросселировании!
