Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте useRef Хук | React Хуки та Контекст
Опановуємо React
course content

Зміст курсу

Опановуємо React

Опановуємо React

4. React в Реальному Світі

book
useRef Хук

Хук useRef дозволяє створити змінну, яка містить посилання на елемент, значення або будь-які інші дані, що не впливають на рендеринг компонента. Це може бути корисно для зберігання змінних значень, доступу до DOM-елементів або збереження значень у різних рендерах компонента.

Синтаксис:

Для використання хука useRef ми оголошуємо змінну (refVariable) і присвоюємо їй результат виклику useRef(). За бажанням, ми можемо передати початкове значення (initialValue) як аргумент цього хука.

const refVariable = useRef(initialValue);

Примітка

Поточне значення можна отримати та оновити за допомогою властивості refVariable.current. Краса useRef полягає у тому, що вона дозволяє нам маніпулювати цими значеннями, не викликаючи повторного рендерингу компонента.

Приклад:

Створімо компонент FormInput, який використовує хук useRef для створення посилання на елемент вводу і фокусується на ньому при натисканні кнопки.

import React, { useRef } from "react";

const FormInput = () => {
  const inputRef = useRef();

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

У цьому прикладі хук useRef створює посилання з назвою inputRef. Це посилання присвоюється атрибуту ref елемента input, що дозволяє нам отримати доступ до елемента input за допомогою inputRef.current.

Пояснення по рядках:

  • Рядок 1: Імпортуємо хук useRef з бібліотеки React, щоб використати його функціональність.
  • Рядок 3: Компонент FormInput визначається за допомогою звичайного синтаксису функцій.
  • Рядок 4: Ми ініціалізуємо змінну inputRef за допомогою хука useRef, що представляє посилання на вхідні дані.
  • Рядки 6-8: Ця функція JavaScript-стрілки обробляє логіку натискання кнопки, яка фокусує курсор користувача на полі введення.
  • Рядки 10-15: Відображається розмітка компонента.
    1. У рядку 12 ми встановлюємо посилання за допомогою атрибута ref і присвоюємо змінну inputRef як його значення.
    2. Кнопка в рядку 13 використовує атрибут onClick, щоб вказати функцію, яка буде виконуватися при натисканні, в даному випадку це функція handleClick.

Повний код програми:

1. Яке основне призначення хука useRef?

2. Яке з наступних тверджень найкраще описує поведінку змінної useRef при оновленні її значення?

question mark

Яке основне призначення хука useRef?

Select the correct answer

question mark

Яке з наступних тверджень найкраще описує поведінку змінної useRef при оновленні її значення?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 3. Розділ 4

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

course content

Зміст курсу

Опановуємо React

Опановуємо React

4. React в Реальному Світі

book
useRef Хук

Хук useRef дозволяє створити змінну, яка містить посилання на елемент, значення або будь-які інші дані, що не впливають на рендеринг компонента. Це може бути корисно для зберігання змінних значень, доступу до DOM-елементів або збереження значень у різних рендерах компонента.

Синтаксис:

Для використання хука useRef ми оголошуємо змінну (refVariable) і присвоюємо їй результат виклику useRef(). За бажанням, ми можемо передати початкове значення (initialValue) як аргумент цього хука.

const refVariable = useRef(initialValue);

Примітка

Поточне значення можна отримати та оновити за допомогою властивості refVariable.current. Краса useRef полягає у тому, що вона дозволяє нам маніпулювати цими значеннями, не викликаючи повторного рендерингу компонента.

Приклад:

Створімо компонент FormInput, який використовує хук useRef для створення посилання на елемент вводу і фокусується на ньому при натисканні кнопки.

import React, { useRef } from "react";

const FormInput = () => {
  const inputRef = useRef();

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

У цьому прикладі хук useRef створює посилання з назвою inputRef. Це посилання присвоюється атрибуту ref елемента input, що дозволяє нам отримати доступ до елемента input за допомогою inputRef.current.

Пояснення по рядках:

  • Рядок 1: Імпортуємо хук useRef з бібліотеки React, щоб використати його функціональність.
  • Рядок 3: Компонент FormInput визначається за допомогою звичайного синтаксису функцій.
  • Рядок 4: Ми ініціалізуємо змінну inputRef за допомогою хука useRef, що представляє посилання на вхідні дані.
  • Рядки 6-8: Ця функція JavaScript-стрілки обробляє логіку натискання кнопки, яка фокусує курсор користувача на полі введення.
  • Рядки 10-15: Відображається розмітка компонента.
    1. У рядку 12 ми встановлюємо посилання за допомогою атрибута ref і присвоюємо змінну inputRef як його значення.
    2. Кнопка в рядку 13 використовує атрибут onClick, щоб вказати функцію, яка буде виконуватися при натисканні, в даному випадку це функція handleClick.

Повний код програми:

1. Яке основне призначення хука useRef?

2. Яке з наступних тверджень найкраще описує поведінку змінної useRef при оновленні її значення?

question mark

Яке основне призначення хука useRef?

Select the correct answer

question mark

Яке з наступних тверджень найкраще описує поведінку змінної useRef при оновленні її значення?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 3. Розділ 4
some-alt