Реагировать Учебник

Реагировать Главная Реагировать Введение Реагировать Начать Реагировать ES6 Реагировать на визуализацию HTML Реагировать JSX Реагировать Компоненты Реагировать на класс Реагировать на реквизиты Реагировать на события Реагировать на условия Реагировать списки Реагировать на формы Реактивный маршрутизатор Реагировать на заметку Реагировать на стили CSS Реагировать на стиль Sass

Реагировать на крючки

Что такое крючок? использование состояния использованиеЭффект использованиеконтекста useRef использованиередьюсер использоватьОбратный звонок useMemo Пользовательские крючки

Упражнения по реагированию

Ответная викторина Упражнения по реагированию Сертификат реакции

Реагировать на useRefкрючок


Хук useRefпозволяет сохранять значения между рендерингами.

Его можно использовать для хранения изменяемого значения, которое не вызывает повторного рендеринга при обновлении.

Его можно использовать для прямого доступа к элементу DOM.


Не вызывает повторного рендеринга

Если бы мы попытались подсчитать, сколько раз наше приложение отрисовывается с использованием useStateхука, мы бы застряли в бесконечном цикле, поскольку сам этот хук вызывает повторный рендеринг.

Чтобы избежать этого, мы можем использовать useRefхук.

Пример:

Используйте useRefдля отслеживания рендеринга приложений.

import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

function App() {
  const [inputValue, setInputValue] = useState("");
  const count = useRef(0);

  useEffect(() => {
    count.current = count.current + 1;
  });

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h1>Render Count: {count.current}</h1>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

useRef()возвращает только один элемент. Он возвращает объект с именем current.

При инициализации useRefмы устанавливаем начальное значение: useRef(0).

Это как сделать это: const count = {current: 0}. Мы можем получить доступ к подсчету, используя count.current.

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


w3schools CERTIFIED . 2022

Получите сертификат!

Завершите модули React, выполните упражнения, сдайте экзамен и получите сертификат w3schools!!

ЗАПИСАТЬСЯ НА 95 $

Доступ к элементам DOM

В общем, мы хотим, чтобы React справился со всеми манипуляциями с DOM.

Но есть несколько случаев, когда useRefих можно использовать, не вызывая проблем.

В React мы можем добавить refатрибут к элементу, чтобы получить к нему доступ непосредственно в DOM.

Пример:

Используйте useRef, чтобы сфокусировать ввод:

import { useRef } from "react";
import ReactDOM from "react-dom";

function App() {
  const inputElement = useRef();

  const focusInput = () => {
    inputElement.current.focus();
  };

  return (
    <>
      <input type="text" ref={inputElement} />
      <button onClick={focusInput}>Focus Input</button>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));


Отслеживание изменений состояния

Крюк useRefтакже можно использовать для отслеживания предыдущих значений состояния.

Это потому, что мы можем сохранять useRefзначения между рендерами.

Пример:

Используйте useRefдля отслеживания предыдущих значений состояния:

import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

function App() {
  const [inputValue, setInputValue] = useState("");
  const previousInputValue = useRef("");

  useEffect(() => {
    previousInputValue.current = inputValue;
  }, [inputValue]);

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h2>Current Value: {inputValue}</h2>
      <h2>Previous Value: {previousInputValue.current}</h2>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

На этот раз мы используем комбинацию useState, useEffectи useRefдля отслеживания предыдущего состояния.

В useEffect, мы обновляем useRefтекущее значение каждый раз inputValue, когда обновляется, вводя текст в поле ввода.