Доступ к данным через рефы в React
год назад·6 мин. на чтение
Если вы хотите, чтобы React компонент «запоминал» некоторую информацию, но вы не хотите, чтобы эта информация запускала новые рендеры, вы можете использовать ref (рефы)
Содержание туториала по React
Если вы хотите, чтобы компонент «запоминал» некоторую информацию, но вы не хотите, чтобы эта информация запускала новые рендеры, вы можете использовать ref (рефы).
При нажатии кнопки «Стоп» нужно отменить существующий интервал, чтобы он перестал обновлять переменную состояния now. Вы можете сделать это, вызвав
Вот кнопка-счетчик, реализованная с состоянием:
Добавление рефа в компонент
Вы можете добавить реф в свой компонент, импортировав хукuseRef
из React:
Внутри вашего компонента вызовите хукimport { useRef } from 'react';
useRef
и передайте начальное значение, на которое вы хотите сослаться, в качестве единственного аргумента. Например, вот ссылка на значение 0
:
const ref = useRef(0);
useRef
возвращает такой объект:
Вы можете получить доступ к текущему значению этого рефа через свойство{ current: 0; // Значение, отправленное в useRef }
ref.current
. Это значение является изменяемым, то есть вы можете как читать, так и писать в него. Это как секретный карман вашего компонента, который React не отслеживает. (Вот что делает его лозейкой из одностороннего потока данных React — подробнее об этом ниже)
В примере ниже кнопка будет увеличивать ref.current
при каждом нажатии:
Реф указывает на число, но, как и состояние, вы можете указать что угодно: строку, объект или даже функцию. В отличие от состояния,import { useRef } from 'react'; export default function Counter() { let ref = useRef(0); function handleClick() { ref.current = ref.current + 1; alert('You clicked ' + ref.current + ' times!'); } return <button onClick={handleClick}>Click me!</button>; }
ref
— это простой объект JavaScript со свойством current
, которое вы можете читать и изменять.
Обратите внимание, что компонент не перерисовывается при очередном инкременте. Как и состояние, React сохраняет рефы между повторными рендерингами. Однако установка состояния повторно рендерит компонент. А изменение рефа - нет.
Пример: создание секундомера
Вы можете комбинировать рефы и состояние в одном компоненте. Например, давайте создадим секундомер, который пользователь может запускать или останавливать нажатием кнопки. Чтобы отобразить, сколько времени прошло с тех пор, как пользователь нажал «Старт», вам нужно будет отслеживать, когда была нажата кнопка «Старт» и какое сейчас время. Эта информация используется для рендеринга, поэтому вы сохраните ее в состоянии:Когда пользователь нажимает «Старт», вы будете использоватьconst [startTime, setStartTime] = useState(null); const [now, setNow] = useState(null);
setInterval
для обновления времени каждые 10 миллисекунд:
import { useState } from 'react'; export default function Stopwatch() { const [startTime, setStartTime] = useState(null); const [now, setNow] = useState(null); function handleStart() { // Начало отсчета setStartTime(Date.now()); setNow(Date.now()); setInterval(() => { // Обновление текущего времени каждые 10 мс setNow(Date.now()); }, 10); } let secondsPassed = 0; if (startTime != null && now != null) { secondsPassed = (now - startTime) / 1000; } return ( <> <h1>Time passed: {secondsPassed.toFixed(3)}</h1> <button onClick={handleStart}>Start</button> </> ); }
clearInterval
, но вам нужно указать идентификатор интервала, который ранее возвращался вызовом setInterval
, когда пользователь нажимал «Старт». Вам нужно где-то хранить идентификатор интервала. Поскольку идентификатор интервала не используется для рендеринга, вы можете сохранить его в рефе:
Когда информация используется для рендеринга - держите ее в состоянии. Когда информации нужна только обработчикам событий и ее изменение не требует повторного рендеринга - использование ссылки может быть более эффективным.import { useState, useRef } from 'react'; export default function Stopwatch() { const [startTime, setStartTime] = useState(null); const [now, setNow] = useState(null); const intervalRef = useRef(null); function handleStart() { setStartTime(Date.now()); setNow(Date.now()); clearInterval(intervalRef.current); intervalRef.current = setInterval(() => { setNow(Date.now()); }, 10); } function handleStop() { clearInterval(intervalRef.current); } let secondsPassed = 0; if (startTime != null && now != null) { secondsPassed = (now - startTime) / 1000; } return ( <> <h1>Time passed: {secondsPassed.toFixed(3)}</h1> <button onClick={handleStart}>Start</button> <button onClick={handleStop}>Stop</button> </> ); }
Различия между рефами и состоянием
Возможно, вы думаете, что рефы кажутся менее «строгими», чем состояние. Например, вы можете изменить их вместо того, чтобы постоянно использовать функцию установки состояния. Но в большинстве случаев вы захотите использовать состояние. Рефы — это лозейка, которая вам часто не потреюуется. Сравним состояние и рефы:Рефы | Состояние |
---|---|
useRef(initialValue) возвращает { current: initialValue } | useState(initialValue) возвращает текущее значение переменной состояния и функцию установки состояния ([value, setValue] ) |
Не запускает повторный рендеринг при его изменении. | Запускает повторный рендеринг при его изменении. |
Изменяемый — вы можете изменять и обновлять значение current вне процесса рендеринга. | Неизменный (иммутабельный) — вы должны использовать функцию установки состояния, чтобы изменить переменные состояния, чтобы поставить в очередь повторный рендеринг. |
Вы не должны читать (или записывать) значение current во время рендеринга. | Вы можете прочитать состояние в любое время. Однако каждый рендер имеет свой собственный снимок состояния, который не меняется. |
Поскольку отображается значениеimport { useState } from 'react'; export default function Counter() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return <button onClick={handleClick}>You clicked {count} times</button>; }
count
, имеет смысл использовать для него значение состояния. Когда значение счетчика устанавливается с помощью setCount()
, React повторно отображает компонент, и экран обновляется, чтобы отразить новое значение счетчика.
Если вы попытаетесь реализовать это с помощью ref
, React никогда не будет повторно отображать компонент, поэтому вы никогда не увидите изменения счетчика. Посмотрите, как нажатие на эту кнопку не обновляет ее текст:
Вот почему чтениеimport { useRef } from 'react'; export default function Counter() { let countRef = useRef(0); function handleClick() { // В таком случае ререндеринг компонента Не происходит countRef.current = countRef.current + 1; } return ( <button onClick={handleClick}>You clicked {countRef.current} times</button> ); }
ref.current
во время рендеринга приводит к ненадежному коду. Если вам это нужно, используйте вместо этого состояние.
Как работает useRef внутри?
Хотя иuseState
, и useRef
предоставляются React, в принципе useRef
может быть реализован поверх useState
. Вы можете представить, что внутри React useRef
реализован так:
Во время первого рендеринга// Внутри React function useRef(initialValue) { const [ref, unused] = useState({ current: initialValue }); return ref; }
useRef
возвращает { current: initialValue }
. Этот объект хранится в React, поэтому при следующем рендеринге будет возвращен тот же объект. Обратите внимание, что в этом примере не используется установщик состояния. В этом нет необходимости, потому что useRef
всегда должен возвращать один и тот же объект.
React предоставляет встроенную версию useRef
, потому что она достаточно распространена на практике. Но вы можете думать об этом как об обычной переменной состояния без сеттера. Если вы знакомы с объектно-ориентированным программированием, рефы могут напомнить вам поля экземпляра, но вместо this.something
вы пишете somethingRef.current
.
Когда использовать рефы?
Как правило, вы будете использовать рефы, когда вашему компоненту нужно «выйти за пределы» React и взаимодействовать с внешними API — часто API браузера, который не повлияет на внешний вид компонента. Вот несколько таких редких ситуаций:- Хранение идентификаторов таймаута
- Хранение элементов DOM и управление ими, которые мы рассмотрим в следующей части.
- Хранение других объектов, которые не нужны для вычисления JSX.
Рекомендации по использованию рефов
Следование этим принципам сделает ваши компоненты более предсказуемыми:- Относитесь к рефам как к лозейке. Рефы полезны при работе с внешними системами или API-интерфейсами браузера. Если большая часть логики вашего приложения и потока данных зависит от рефов, возможно, следует пересмотреть свой подход.
- Не читайте и не записывайте
ref.current
во время рендеринга. Если во время рендеринга требуется некоторая информация, используйте вместо этого состояние. Поскольку React не знает, когда изменяетсяref.current
, даже его чтение во время рендеринга затрудняет прогнозирование поведения вашего компонента. (Единственным исключением является такой код, как if(!ref.current) ref.current = new Thing()
, который устанавливает ссылку только один раз во время первого рендеринга.)
ref
, оно немедленно меняется:
Это связано с тем, что сам реф является обычным JavaScript объектом и ведет себя как объект. Вам также не нужно беспокоиться о том, чтобы избежать мутации, когда вы работаете с рефами. Пока объект, который вы мутируете, не используется для рендеринга, React не волнует, что вы делаете с рефом или его содержимым.ref.current = 5; console.log(ref.current); // 5
Рефы и DOM
Вы можете указать ссылку на любое значение. Однако наиболее распространенным вариантом использования ссылки является доступ к элементу DOM. Например, это удобно, если вы хотите сфокусировать инпут программно. Когда вы передаете реф в атрибутref
в JSX, например <div ref={myRef}>
, React поместит соответствующий элемент DOM в myRef.current
.
Резюме
- Рефы — это лозейка для хранения значений, которые не используются для рендеринга. Вы не будете нуждаться в них часто.
- Ссылка — это простой объект JavaScript с одним свойством, называемым
current
, которое вы можете прочитать или установить. - Вы можете попросить React дать вам реф, вызвав хук
useRef
. - Как и состояние, рефы позволяют сохранять информацию между повторными рендерингами компонента.
- В отличие от состояния, установка значения
current
рефа не вызывает повторный рендеринг. - Не читайте и не записывайте
ref.current
во время рендеринга. Это затрудняет прогнозирование вашего компонента.
Как подписаться на изменения LocalStorage
2 года назад·3 мин. на чтение
Нередко возникает необходимость подписаться на изменения значений в LocalStorage. В этой статье напишем универсальную реализацию, которая не будет привязана к определенному фреймворку.
Иногда есть необходимость подписываться на изменения значений в LocalStorage и быстро на них реагировать. В этой статье напишем универсальную реализацию на JavaScript, которая не будет привязана к определенному фреймворку. Нужно будет просто добавить необходимую прослойку. В React этой прослойкой будет являться кастомный хук, отвечающий за подписку/отписку на событие внутри
Прослушивание нативного события
Это событие будет полезно если есть необходимость следить за изменением localStorage из другого документа, т.е. между вкладками.
Это событие не отправляется при изменениях localStorage на той же странице. Оно будет полезно для общения разных страниц одного и того же домена. Страницы разных доменов не имеют доступа к localStorage друг друга.
useEffect
.
Реализация будет состоять из нескольких частей:
- Реализация шины событий
- Класс-обертка для работы с LocalStorage
- Прослушивание нативного события
storage
- Добавление в React-компонент
Шина событий
Есть множество паттернов для реализации отправки и прослушивания изменений объектов. Возьмем за основу паттерн Pub/Sub (Издатель/Подписчик) и реализуем класс для шины событий.// EventBus.js class EventBus { constructor() { this.topics = {}; } notify(key, value) { this.topics[key]?.forEach((cb) => { cb(value); }); } subscribe(key, cb) { if (!this.topics[key]) { this.topics[key] = []; } this.topics[key].push(cb); } unsubscribe(key, cb) { this.topics = this.topics[key]?.filter((_cb) => _cb !== cb); } }
Класс-обертка для работы с LocalStorage
Сервис для работы localStorage будет содержать экземпляр шины событий. При установке нового значения по ключу мы будем оповещать подписчиков этого ключа и сохранять значение в localStorage . При помощи методаsubscribe
можно будет подписаться на изменения значений по переданному ключу. Этот метод также возвращает функцию для отписки. Метод getItem
просто отдает значение из localStorage по ключу. В нем при необходимости можно реализовать логику парсинга для чтения объектов из localStorage.
// LocalStorageService.js class LocalStorageService { constructor() { this.eventBus = new EventBus(); } getItem(key) { return window.localStorage.getItem(key); } setItem(key, value) { const oldValue = this.getItem(key, value); if (oldValue === value) return; // если значение не изменилось - ничего не делаем window.localStorage.setItem(key, value); this.eventBus.notify(key, value); } subscribe(key, cb) { this.eventBus.subscribe(key, cb); return () => this.eventBus.unsubscribe(key, cb); } } // экспортируем экземпляр класса export const localStorageService = new LocalStorageService();
Прослушивание нативного события storage
Это событие будет полезно если есть необходимость следить за изменением localStorage из другого документа, т.е. между вкладками.
Это событие не отправляется при изменениях localStorage на той же странице. Оно будет полезно для общения разных страниц одного и того же домена. Страницы разных доменов не имеют доступа к localStorage друг друга.
StorageEvent
наследуется от класса Event
и имеет следующие поля:
Добавим подписку на событиеconst storageEvent = { key: "token", // ключ, значение которого изменилось newValue: "token_value_b", // новое значение oldValue: "token_value_a", // старое значение storageArea { // объект хранилища со всеми ключами и их значениями token: "token_value_a", user_settings: "", length: 2 }, url: "http://localhost:3001/" // url документа, ключ которого изменился }
storage
.
Теперь если продублировать приложение в соседней вкладке и изменить токен, обновленный токен появится и на первой вкладке. Если изменить значение ключа в localStorage вручную через devtools, то обновленное значение также появится и в интерфейсе приложения.class LocalStorageService { constructor() { this.eventBus = new EventBus(); this.handleStorage = this.handleStorage.bind(this); // свяжем функцию с контекстом window.addEventListener('storage', this.handleStorage); // подпишемся на событие storage } // добавим функцию для обработки события storage handleStorage(event) { this.eventBus.notify(event.key, event.newValue); } //… }
Добавление в React-компонент
Добавим кастомный хукuseLocalStorageKey
, который будет принимать ключ, значение которого будет прослушивать.
И добавим вызов хука в компонент. Две кнопки просто устанавливают разные значения токена.// useLocalStorageKey.js import { useEffect, useState } from 'react'; import { localStorageService } from './LocalStorageService'; export const useLocalStorageKey = (key) => { const [value, setValue] = useState(localStorageService.getItem(key)); useEffect(() => { const onUpdate = (newValue) => { setValue(newValue); }; // возвращаем функцию очистки return localStorageService.subscribe(key, onUpdate); }, [key]); // функция для изменений значения по переданному ключу const setLocalStorageValue = (value) => { localStorageService.setItem(key, value); }; return [value, setLocalStorageValue]; };
Исходный кодimport { useLocalStorageKey } from './useLocalStorageKey'; const KEY_TOKEN = 'token'; function App() { const [token, setToken] = useLocalStorageKey(KEY_TOKEN); const handleAddTokenAClick = () => { setToken('token_value_a'); }; const handleAddTokenBClick = () => { setToken('token_value_b'); }; return ( <> <button type="button" onClick={handleAddTokenAClick}> Add token 'a' </button> <button type="button" onClick={handleAddTokenBClick}> Add token 'b' </button> <p>Token: {token}</p> </> ); } export default App;