[Разработка веб-сайтов, JavaScript, Программирование, ReactJS] Изучаем хук useRef в React.js (перевод)

Автор Сообщение
news_bot ®

Стаж: 6 лет 8 месяцев
Сообщений: 27286

Создавать темы news_bot ® написал(а)
25-Авг-2020 17:36


Доброго времени суток, друзья.
Представляю вашему вниманию перевод небольшой заметки про использование хука useRef в React.
Хук useState позволяет добавлять состояние в функциональные компоненты. Данный хук предоставляет возможность передавать значение, сохраняемое при повторном рендеринге страницы, а также интерфейс для обновления этого значения и принудительного запуска ререндеринга.
const [value, setValueAndRerender] = React.useState(
    'Начальное значение'
)

Возможность сохранять значение при ререндеринге обеспечивает динамичность данных, а возможность обновлять значение и запускать повторный рендеринг обеспечивает динамичность пользовательского интерфейса.
Но что если у нас нет необходимости в повторном рендеринге, но при этом нам нужно сохранять значение? В данном случае, нам нужна лишь половина useState:
function usePersistentValue(initialValue) {
    return React.useState({
        current: initialValue
    })[0]
}

useState возвращает массив, в котором первым элементом является сохраненное значение, а вторым — функция, запускающая повторный рендеринг.
Нам нужен только первый элемент, поэтому мы добавляем [0]. При запуске usePersistentValue мы получим объект, в свойстве которого будет содержаться сохраненное значение.
Рассмотрим пример.
Создадим простое приложение, в котором значение счетчика (count) будет увеличиваться на 1 каждую секунду, с кнопкой для остановки счетчика. Вот как может выглядеть реализация данного приложения:
function Counter() {
    const [count, setCount] = React.useState(0)
    let id
    const clear = () => clearInterval(id)
    React.useEffect(() => {
        id = setInterval(() => setCount(c => c + 1), 1000)
        return clear
    }, [])
    return (
        <div>
            <h1>{count}</h1>
            <button onClick={clear}>Стоп</button>
        </div>
    )
}

id создается внутри useEffect, однако нам нужно иметь доступ к этой переменной в обработчике для остановки счетчика. Поэтому мы объявляем id в основной области видимости и инициализируем ее при запуске эффекта.
Все хорошо, правда? К сожалению, нет. Дело в том, что значение id не сохраняется. При изменении состояния count React запускает ререндеринг и значение id сбрасывается до undefined.
Нам необходим способ сохранять значение id при ререндеринге. К счастью, для этого у нас имеется функция usePersistentValue. Попробуем ее использовать:
function usePersistentValue(initialValue) {
    return React.useState({
        current: initialValue
    })[0]
}
function Counter() {
    const [count, setCount] = React.useState(0)
    const id = usePersistentValue(null)
    const clear = () => clearInterval(id.current)
    React.useEffect(() => {
        id.current = setInterval(() => setCount(c => c + 1), 1000)
        return clear
    }, [])
    return (
        <div>
            <h1>{count}</h1>
            <button onClick={clear}>Стоп</button>
        </div>
    )
}

Выглядит не очень хорошо, но все работает. Значение id не сбрасывается при каждом рендеринге, поскольку оно содержится в useState, т.е. React сохраняет это значение.
Как вы, наверное, догадались, возможность сохранять значение без запуска повторного рендеринга является настолько востребованной, что React предоставляет для этого встроенный хук — useRef. По сути, это тоже самое, что наша функция usePersistentValue. Вот тот же код с использованием useRef:
function Counter() {
    const [count, setCount] = React.useState(0)
    const id = React.useRef(null)
    const clear = () => clearInterval(id.current)
    React.useEffect(() => {
        id.current = setInterval(() => setCount(c => c + 1), 1000)
        return clear
    }, [])
    return (
        <div>
            <h1>{count}</h1>
            <button onClick={clear}>Стоп</button>
        </div>
    )
}

useRef принимает начальное значение в качестве первого аргумента и возвращает объект со свойством current. Значение, которое присваивается этому свойству, сохраняется при ререндеринге.
Самым распространенным случаем использования useRef является получение доступа к узлам DOM. Если присвоить значение, возвращаемое useRef, какому-нибудь элементу, этот элемент станет значением свойства current. Такой прием используется для получения значений полей для ввода и установки фокуса:
function Form() {
    const nameRef = React.useRef()
    const emailRef = React.useRef()
    const passwordRef = React.useRef()
    const handleSubmit = ev => {
        ev.preventDefault()
        const name = nameRef.current.value
        const email = emailRef.current.value
        const password = passwordRef.current.value
        console.log(name, email, password)
    }
    return (
        <React.Fragment>
            <label>
                Имя:
                <input
                    type="text"
                    placeholder="name"
                    ref={nameRef}
                />
            </label>
            <label>
                Адрес электронной почты:
                <input
                    type="text"
                    placeholder="email"
                    ref={emailRef}
                />
            </label>
            <label>
                Пароль:
                <input
                    type="text"
                    placeholder="password"
                    ref={passwordRef}
                />
            </label>
            <hr />
            <button onClick={() => nameRef.current.focus()}>
                Установить фокус на поле для ввода имени
            </button>
            <button onClick={() => emailRef.current.focus()}>
                Установить фокус на поле для ввода адреса электронной почты
            </button>
            <button onClick={() => passwordRef.current.focus()}>
                Установить фокус на поле для ввода пароля
            </button>
        </React.Fragment>
    )
}

Таким образом, для добавления в компонент состояния, в котором сохраняется значение и запускается повторный рендеринг, следует использовать useState или useReducer. Для добавления в компонент состояния, в котором сохраняется значение, но не запускается повторный рендеринг, следует использовать useRef.
Благодарю за внимание.
===========
Источник:
habr.com
===========

===========
Автор оригинала: Tyler McGinnis
===========
Похожие новости: Теги для поиска: #_razrabotka_vebsajtov (Разработка веб-сайтов), #_javascript, #_programmirovanie (Программирование), #_reactjs, #_javascript, #_react.js, #_reactjs, #_react, #_jsx, #_hook, #_hooks, #_usestate, #_useeffect, #_useref, #_huk (хук), #_huki (хуки), #_razrabotka_vebsajtov (
Разработка веб-сайтов
)
, #_javascript, #_programmirovanie (
Программирование
)
, #_reactjs
Профиль  ЛС 
Показать сообщения:     

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы

Текущее время: 01-Ноя 07:36
Часовой пояс: UTC + 5