Эта статья демонстрирует одно из применений хука useRef для тех, кто новичок в реакции и хуках.
Я рассмотрю пример из документации React о том, как получить доступ к предыдущему состоянию компонентов 👇
Я думаю, что это хороший пример того, что может сделать хук useRef, и почему это отличный инструмент в наборе инструментов разработчика. Кроме того, если React демонстрирует это, вы знаете, что это законно 😇.
useRef действительно мощный, потому что он создает старый добрый объект javascript. Здесь нет причудливых элементов React, только тот vanillaJS, который мы знаем и любим.
Этот объект существует на протяжении всего жизненного цикла компонентов и… подождите, сохраняется при повторном рендеринге! Вау
Существование и сохранение — это то, чем мы ВСЕ занимаемся.
Давайте углубимся в это.
Чтобы разбить его, у нас есть компонент Counter с некоторым состоянием, count.
Далее идет переменная prevCountRef. Вы часто будете видеть переменные с суффиксом -Ref, когда используется useRef. Без условностей мы просто животные.
prevCountRef принимает результат вызова useRef() в качестве значения, теперь вам может быть интересно, что это за значение. Как мы теперь знаем, useRef вернет нам объект, и этот объект имеет единственное свойство current со значением любого прохода к хуку.
const prevCountRef = useRef();
Ждать!! Мы ничего не передали в хук useRef()!!
Хорошо заметил умные засоры. Когда это происходит, значение current инициализируется как неопределенное, поэтому мы получаем объект, который выглядит следующим образом:
{current: undefined}
Теперь у нас есть вызов useEffect(), который обновляет prevCountRef.current до значения count.
useEffect(() => {
prevCountRef.current = count;
});
НО помните, что это обратный вызов, который произойдет только после того, как функция Counter вернет свой сладкий JSX и смонтируется в DOM.
Итак, следующее, что должно произойти в хронологическом порядке, — это инициализация нашей следующей переменной prevCount со значением prevCountRef.current.
Затем мы возвращаем h1, отображая состояние count и переменную prevCount, которая отображается в браузере. Как только это происходит, запускается вызов useEffect для realz.
Если представить, что самый первый рендеринг этого компонента, возвращаемый JSX, будет содержать эти значения.
<h1>Now: 0, before: undefined<h1>
Только когда это будет возвращено и компонент будет успешно смонтирован в DOM, prevCountRef.current примет значение count. Это волшебство асинхронности от useEffect в сочетании с выносливым, никогда не умирающим, непоколебимым постоянством useRef означает, что мы можем сохранять предыдущее значение состояния этого компонента каждый раз, когда он повторно рендерится!
Довольно замечательная вещь, useRef действительно удобна именно по этой причине.
И если вы не полностью удовлетворены всем, что вы видели до сих пор, почему бы не получить прекрасный пользовательский хук usePrevious от этих милых людей из React бесплатно!
Теперь вы можете повторно использовать этот хук во всем своем коде.
