Автор: Джоэл Адевол


Введение

Среди различных библиотек и фреймворков JavaScript React известен своим удобством для разработчиков и поддержкой.

Большинство разработчиков находят React очень удобным и масштабируемым из-за наличия в нем хуков. Хуки — это встроенные API, которые поставляются с React и позволяют разработчикам взаимодействовать с состоянием React и функциями жизненного цикла в React. Хуки не работают внутри классов, поэтому их можно использовать только внутри функциональных компонентов. Разработчики также могут создавать собственные хуки.

React предоставляет разработчику свободу действий, и в большей степени, чем большинство библиотек пользовательского интерфейса, он позволяет вам переосмыслить стандартный подход к разработке компонентов пользовательского интерфейса, например, путем создания представлений с использованием механизма абстракции React и JSX, а не типичной спецификации DOM.

В этой статье мы обсудим Реагировать на использованиеRef ловушка, используя ref для доступа к DOM и различия между ref и useRef.

Шаги, которые мы рассмотрим:


Что такое useRef?

Одним из различных хуков, включенных в React, является хук useRef; он используется для ссылки на объект внутри функционального компонента и сохраняет состояние объекта, на который ссылаются, между повторными рендерингами.

useRef имеет свойство под названием «текущий», используемое для извлечения значения объекта, на который ссылаются, в любое время, а также принимает начальное значение в качестве аргумента. Вы можете изменить значение ссылочного объекта, обновив current ценность.

Вот как создать ссылочный объект:

import { useRef } from react

const myComponent = () => {
         const refObj = useRef(initialValue)

    return (
    //…
    )
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

В приведенном выше фрагменте у нас есть объект refObj мы хотим сослаться в приложении, чтобы получить доступ к значению или обновить значение, мы можем вызвать current вот такое свойство:

// inside a function
const handleRefUpdate = () => {
    // accessing the referenced object’s value
    const value = refObj.current

    // updating the referenced object’s value
   refObj.current = newValue
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Вы должны принять к сведению, что:

  • Значение объекта, на который ссылаются, остается неизменным между повторными рендерингами.
  • Обновление значения ссылочного объекта не вызывает повторную визуализацию.


Использование ссылки для доступа к элементам DOM

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

ref это HTML-атрибут, который присваивает ссылочный объект элементу DOM. Давайте посмотрим, как это работает:

import {useRef} from react

const myComponent = () => {
         const elementRef = useRef()

    return (
        <input ref={elementRef} type=text />
    )
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

В приведенном выше фрагменте кода мы создали новый ссылочный объект, elementRef и присвоил его входному тегу с помощью ref атрибут. Мы можем получить доступ к значению входного тега и обновить значение следующим образом:

const handleInput = () => {
    //accessing the input element value
   const textValue = elementRef.current.value


   // update the input element value
   elementRef.current.value = Hello World
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

В приведенном выше фрагменте кода мы создали функцию, которая получает текущее значение элемента ввода и присваивает его функции textValue. Мы также обновили значение элемента ввода до «Hello World».


Ваше приложение CRUD перегружено техническим долгом?

Познакомьтесь с безголовым решением на основе React для создания гладких CRUD Приложения. Благодаря уточнению вы можете быть уверены, что ваша кодовая база всегда будет оставаться чистой и свободной от шаблонов.

Пытаться уточнить чтобы быстро построить свой следующий CRUD проекта, будь то панель администратора, панель инструментов, внутренний инструмент или витрина.


улучшить логотип блога


Разница между Ref и useRef

Как обсуждалось в предыдущих разделах этой статьи, мы ясно понимаем, что useRef используется для создания ссылочного объекта, а ref используется для доступа и назначения узлов DOM или компонентов реакции внутри метода рендеринга на ссылочный объект.

Также ref может быть создан с помощью хука useRef или функции createRef, что невозможно сделать другим способом.

useRef может использоваться для ссылки на любой тип объекта, Реагировать исх это просто атрибут DOM, используемый для ссылки на элементы DOM.


Использование Ref и useRef в приложении

Поскольку мы понимаем, как ref а также useRef работу и их различия, давайте посмотрим, как мы можем использовать их в реальном приложении.
Например, мы хотим реализовать прослушиватель событий click-away для всплывающего окна. Мы можем использовать ref для доступа к элементу DOM всплывающего окна и прослушивания щелчка за пределами всплывающего окна.

В среде вашего приложения для реагирования вы можете создать папку с именем «хуки», эта папка будет содержать пользовательские крючки.

Внутри папки создайте новый файл useClickAwayи введите в файл следующий код:

import React, { useEffect} from 'react'

export default function useClickAway(ref: any, callback: Function) {
   useEffect(() => {
     function handleClickAway(event: any) {
       if (ref.current && !ref.current.contains(event.target)) {
         callback();
       }
     }
 document.addEventListener("mousedown", handleClickAway);
     return () => {
       document.removeEventListener("mousedown", handleClickAway);
     };
   }, [ref]);
 };
Войти в полноэкранный режим

Выйти из полноэкранного режима

В приведенном выше фрагменте кода мы создали пользовательский хук, который принимал ссылочный объект как ref и функцию обратного вызова, затем мы выполнили прослушиватель событий, чтобы проверить, когда щелкнули мышью, если щелчок не по текущей ссылке, тогда мы запускаем функцию обратного вызова.

Вот реализация пользовательского хука на странице продукта:

import React, { useRef } from "react";
//.. Other importations
export default function Storefront() {
  const targetElement = useRef(null)
  const alertClickAway = () => {
   alert("Clicked outside product 1")
 }
 useClickAway(targetElement, alertClickAway)
 //.. Other functions
 return (
       {//.. Other parts of the application}
       <div className="gallery">
         <div className="col" ref={targetElement}>
           <img src=" alt="Product 1" />
           <p>iWatch Series 6</p>
           <div className="btns">
             <button>
               <img src=" alt="like" />
             </button>
             <button>
               <img 
                  src="
                  alt="add" />
            </button>
           </div>
         </div>
 )
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

В приведенном выше фрагменте кода у нас есть компонент витрины, куда мы импортировали пользовательский хук. useClickAwayзатем мы создали новый эталонный объект targetElement и назначили его div внутри галереи продуктов, а затем мы создали функцию обратного вызова для оповещения всякий раз, когда мышь щелкает за пределами элемента продукта с ref targetElement.

Теперь давайте посмотрим на вывод:

Использование изображенияСсылка


Варианты использования Ref и useRef

Теперь у вас достаточно понимания того, что ref а также useRef есть и как они работают. Теперь вы можете размышлять, когда использовать и когда избегать использования ссылок. Оба ref а также useRef ими довольно легко злоупотребить, и это может быть очень дорого.

Ниже приведены некоторые варианты использования ссылок:

  • Взаимодействие с элементами ввода: доступ к элементам ввода и выполнение таких функций, как фокус, отслеживание изменений или автозаполнение, становятся возможными с помощью refs.
  • Взаимодействие со сторонними библиотеками пользовательского интерфейса: Ref можно использовать для взаимодействия с элементами, созданными сторонними библиотеками пользовательского интерфейса, к которым может быть сложно получить доступ с помощью стандартных методов DOM. Например, если вы используете стороннюю библиотеку для создания ползунков, вы можете использовать ref для доступа к элементу DOM ползунков, не зная структуры исходного кода библиотеки ползунков.
  • Воспроизведение мультимедиа: вы также можете получить доступ к мультимедийным ресурсам, таким как изображения, аудио или видео, используя ссылки, и взаимодействовать с тем, как они отображаются. Например, автоматическое воспроизведение видео или ленивая загрузка изображений, когда элемент входит в область просмотра.
  • Запуск сложной анимации: традиционно для определения момента запуска анимации используются ключевые кадры CSS или тайм-аут. В некоторых ситуациях, которые могут быть более сложными, вы можете использовать refs, чтобы наблюдать за элементами DOM и определять, когда начинать анимацию.
  • В некоторых ситуациях, таких как следующие, вы не должны использовать ссылки:
  • Декларативные случаи: даже в ситуациях с простыми решениями, где использование ссылок работает, нет необходимости писать более дорогой код для выполнения той же задачи. Например, использование условного рендеринга для скрытия или отображения элементов DOM вместо ссылок.
  • Элементы, влияющие на состояние: иногда концепция использования ссылок настолько интригует, что вы упускаете из виду влияние изменений, внесенных в элемент, на жизненный цикл приложения. Вы должны иметь в виду, что изменения в ссылках не вызывают повторного рендеринга и что ссылки сохраняют значение своих объектов при рендеринге. Поэтому рекомендуется избегать использования ссылок в ситуациях, когда изменения состояния должны вызывать повторную визуализацию.
    • Доступ к функциональным компонентам: на элементы DOM, которые не следует путать с функциональными компонентами, можно ссылаться с помощью атрибута Ref. Потому что, в отличие от компонентов класса или элементов DOM, функциональные компоненты не имеют экземпляров. Например:
import {useRef} from react

const FunctionalComponent = () => {
    return (
        <h1>Hello World<>
)
}

const myComponent = () => {
         const elementRef = useRef()

    return (
        <FunctionalComponent ref={elementRef} />
    )
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Поскольку компонент FunctionalComponent не имеет экземпляров, ссылка в приведенном выше фрагменте кода не будет работать. Вместо этого мы можем преобразовать FunctionalComponent в компонент класса или использовать forwardRef в FunctionalComponent составная часть.


баннер раздора


Вывод

В этой статье мы обсудили, как создавать ссылки с помощью хука useRef, который принимает начальное значение и изменяет значение текущего свойства объекта ссылки, чтобы обновить его значение.

Мы увидели, как использовать «текущее» значение с «ref» для доступа к элементам DOM и взаимодействия с их свойствами.

Мы рассмотрим, как создать пользовательский хук, который принимает ссылочный элемент DOM, и функцию обратного вызова для использования «ref» и «useRef» в приложении для наблюдения за событиями щелчка на элементах DOM.

Кроме того, мы говорили о вариантах использования «ref» и «useRef», когда их можно использовать, а когда нет.

Увидев, как ref а также useRef можно использовать для отслеживания и обновления изменяемых значений без повторного рендеринга родительских компонентов, вы можете узнать больше о них или узнать больше, проверив официальную документацию React о ссылки а также useRefs и даже попробовать другие хуки React.