React+hooks+Redux
  • Вступление
  • REACT HOOKS
    • Введение в хуки
    • Основные хуки
      • Хук состояния (useState)
      • Хук эффекта (useEffect)
      • Хук колбека (useCallback)
      • Хук рефа (useRef)
    • Создание собственных хуков
    • Правила использования хуков
    • Полезная информация
      • Хук мемоизированного значения (useMemo)
      • Как закешировать вычисления?
      • Как получить предыдущие пропсы или состояние?
      • Как осуществлять запросы за данными с помощью хуков?
    • Задание React Hooks
  • REDUX
    • Что такое Redux
    • Основы
      • Действия (Actions)
      • Генераторы действий (Action Creators)
      • Редюсеры (Reducers)
      • Хранилище (Store)
      • Получение доступа к actions и state с помощью функции connect()
      • Подключение Redux
    • Что дальше?
      • Асинхронные действия (Async Actions)
      • Использование Redux с React Router
    • Задание Redux
  • FAQ
    • Заключение
Powered by GitBook
On this page

Was this helpful?

  1. REACT HOOKS
  2. Полезная информация

Как получить предыдущие пропсы или состояние?

Сейчас, вы можете сделать это вручную, используя реф:

function Counter() {
  const [count, setCount] = useState(0);

  const prevCountRef = useRef();
  useEffect(() => {
    prevCountRef.current = count;
  });
  const prevCount = prevCountRef.current;

  return <h1>Сейчас: {count}, до этого: {prevCount}</h1>;
}

Это может показаться усложнённым, но вы можете вынести эту логику в отдельный хук:

function Counter() {
  const [count, setCount] = useState(0);
  const prevCount = usePrevious(count);
  return <h1>Сейчас: {count}, до этого: {prevCount}</h1>;
}

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

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

function Counter() {
  const [count, setCount] = useState(0);

  const calculation = count + 100;
  const prevCalculation = usePrevious(calculation);
  // ...

Возможно, в будущем API React введёт хук usePrevious, так как он требуется довольно часто.

PreviousКак закешировать вычисления?NextКак осуществлять запросы за данными с помощью хуков?

Last updated 5 years ago

Was this helpful?