React Refs: Разъяснение useRef и createRef

В динамичном мире React-разработки эффективное управление состоянием компонентов и взаимодействие с объектной моделью документа (DOM) имеет решающее значение. React Refs предоставляют механизм для прямого доступа и управления элементами DOM или React-компонентами. Два основных метода создания Refs — это useRef и createRef. Хотя оба служат цели создания Refs, они различаются по своей реализации и случаям использования. Это руководство призвано разъяснить эти два подхода, предоставив ясность в отношении того, когда и как эффективно использовать каждый из них в ваших React-проектах, особенно при разработке для глобальной аудитории.

Понимание React Refs

Ref (сокращение от reference — ссылка) — это функция React, которая позволяет вам напрямую получать доступ к узлу DOM или React-компоненту. Это особенно полезно, когда вам нужно:

• Непосредственно манипулировать элементом DOM, например, установить фокус на поле ввода.
• Получать доступ к методам или свойствам дочернего компонента.
• Управлять значениями, которые сохраняются между рендерами, не вызывая повторных рендеров (аналогично переменным экземпляра в классовых компонентах).

Хотя React поощряет декларативный подход, при котором UI управляется через состояние и пропсы, есть ситуации, когда необходимо прямое манипулирование. Refs предоставляют способ преодолеть разрыв между декларативной природой React и императивными операциями DOM.

createRef: Подход классового компонента

createRef — это метод, предоставляемый React. Он в основном используется в классовых компонентах для создания Refs. Каждый раз, когда создается экземпляр классового компонента, createRef создает новый Ref-объект. Это гарантирует, что каждый экземпляр компонента имеет свой собственный уникальный Ref.

Синтаксис и использование

Чтобы использовать createRef, сначала объявите Ref в своем классовом компоненте, обычно в конструкторе. Затем вы прикрепляете Ref к элементу DOM или компоненту, используя атрибут ref.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    // Доступ к элементу DOM после монтирования компонента
    this.myRef.current.focus();
  }

  render() {
    return ;
  }
}

В этом примере this.myRef создается с помощью React.createRef(). Затем он присваивается атрибуту ref элемента input. После монтирования компонента (в componentDidMount) вы можете получить доступ к фактическому узлу DOM, используя this.myRef.current, и выполнять операции над ним (в данном случае, фокусировка ввода).

Пример: Фокусировка поля ввода

Рассмотрим сценарий, в котором вы хотите автоматически сфокусировать поле ввода при монтировании компонента. Это распространенный случай использования Refs, особенно в формах или интерактивных элементах.

class FocusInput extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  componentDidMount() {
    this.inputRef.current.focus();
  }

  render() {
    return (
      

        
      
    );
  }
}

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

Важные соображения при использовании createRef

• Только классовые компоненты: createRef предназначен для использования в классовых компонентах. Хотя технически он может работать в функциональных компонентах, это не является предполагаемым использованием и может привести к неожиданному поведению.
• Новый Ref для каждого экземпляра: Каждый экземпляр классового компонента получает свой собственный createRef. Это важно для поддержания изоляции между экземплярами компонента.

useRef: Хук функционального компонента

useRef — это хук, который был представлен в React 16.8. Он предоставляет способ создания изменяемых Ref-объектов внутри функциональных компонентов. В отличие от createRef, useRef возвращает один и тот же Ref-объект при каждой отрисовке компонента. Это делает его идеальным для сохранения значений между рендерами без запуска повторных рендеров.

Синтаксис и использование

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

import React, { useRef, useEffect } from 'react';

function MyFunctionalComponent() {
  const myRef = useRef(null);

  useEffect(() => {
    // Доступ к элементу DOM после монтирования компонента
    if (myRef.current) {
      myRef.current.focus();
    }
  }, []);

  return ;
}

В этом примере useRef(null) создает Ref с начальным значением null. Хук useEffect используется для доступа к элементу DOM после монтирования компонента. Свойство myRef.current содержит ссылку на элемент input, позволяя вам сфокусировать его.

Пример: Отслеживание предыдущих значений пропсов

Одним из мощных вариантов использования useRef является отслеживание предыдущего значения пропса. Поскольку изменения Refs не запускают повторные рендеры, вы можете использовать их для хранения значений, которые хотите сохранить между рендерами, не влияя на UI.

import React, { useRef, useEffect } from 'react';

function PreviousValueComponent({ value }) {
  const previousValue = useRef();

  useEffect(() => {
    previousValue.current = value;
  }, [value]);

  return (
    

      
Current Value: {value}
      
Previous Value: {previousValue.current}
    
  );
}

В этом примере previousValue.current хранит предыдущее значение пропса value. Хук useEffect обновляет Ref всякий раз, когда пропс value изменяется. Это позволяет вам сравнивать текущие и предыдущие значения, что может быть полезно для обнаружения изменений или реализации анимации.

Важные соображения при использовании useRef

• Только функциональные компоненты: useRef — это хук и может использоваться только внутри функциональных компонентов или пользовательских хуков.
• Сохраняется между рендерами: Хук useRef возвращает один и тот же Ref-объект при каждом рендере. Это ключ к его способности сохранять значения без запуска повторных рендеров.
• Изменяемое свойство .current: Вы можете напрямую изменять свойство .current Ref-объекта.
• Начальное значение: Вы можете предоставить начальное значение для useRef. Это значение будет присвоено свойству .current при первой отрисовке компонента.
• Нет повторных рендеров: Изменение свойства .current Ref не вызывает повторный рендеринг компонента.

useRef vs. createRef: Подробное сравнение

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

Функция	useRef	createRef
Тип компонента	Функциональные компоненты	Классовые компоненты
Хук или метод	Хук	Метод
Экземпляр Ref	Возвращает один и тот же Ref-объект при каждой отрисовке	Создает новый Ref-объект для каждого экземпляра компонента
Случаи использования	Доступ к элементам DOM Сохранение значений между рендерами без запуска повторных рендеров Отслеживание предыдущих значений пропсов Хранение изменяемых значений, которые не вызывают повторные рендеры	Доступ к элементам DOM Доступ к методам дочернего компонента

Выбор правильного Ref: Руководство по принятию решений

Вот простое руководство, которое поможет вам выбрать между useRef и createRef:

• Вы работаете с функциональным компонентом? Используйте useRef.
• Вы работаете с классовым компонентом? Используйте createRef.
• Вам нужно сохранить значение между рендерами, не запуская повторные рендеры? Используйте useRef.
• Вам нужно отслеживать предыдущее значение пропса? Используйте useRef.

За пределами манипуляций с DOM: Расширенные варианты использования Refs

Хотя доступ и манипулирование элементами DOM является основным вариантом использования Refs, они предлагают возможности, выходящие за рамки этой основной функциональности. Давайте рассмотрим некоторые расширенные сценарии, в которых Refs могут быть особенно полезны.

1. Доступ к методам дочернего компонента

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

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }

  handleClick = () => {
    // Вызов метода в дочернем компоненте
    this.childRef.current.doSomething();
  };

  render() {
    return (
      

        
        Trigger Child Action
      
    );
  }
}

class ChildComponent extends React.Component {
  doSomething = () => {
    console.log('Child component action triggered!');
  };

  render() {
    return 
This is a child component.
;
  }
}

В этом примере ParentComponent использует Ref для доступа к ChildComponent и вызова его метода doSomething.

2. Управление фокусом и выделением

Refs неоценимы для управления фокусом и выделением внутри полей ввода и других интерактивных элементов. Это имеет решающее значение для создания доступных и удобных интерфейсов.

import React, { useRef, useEffect } from 'react';

function FocusOnMount() {
  const inputRef = useRef(null);

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
      inputRef.current.select(); // Выделить текст во входном элементе
    }
  }, []);

  return ;
}

В этом примере фокус устанавливается на ввод и выделяется его текст, как только компонент монтируется.

3. Анимация элементов

Refs можно использовать в сочетании с библиотеками анимации (такими как GreenSock или Framer Motion) для непосредственного управления DOM и создания сложных анимаций. Это обеспечивает точный контроль над последовательностями анимации.

Пример с использованием чистого JavaScript для простоты:

import React, { useRef, useEffect } from 'react';

function AnimatedBox() {
  const boxRef = useRef(null);

  useEffect(() => {
    const box = boxRef.current;
    if (box) {
      // Простая анимация: перемещение поля вправо
      box.animate(
        [
          { transform: 'translateX(0)' },
          { transform: 'translateX(100px)' },
        ],
        {
          duration: 1000, // 1 секунда
          iterations: Infinity, // Повторять бесконечно
          direction: 'alternate',
        }
      );
    }
  }, []);

  return 
;
}

В этом примере используется Web Animations API для анимации простого поля, перемещая его вперед и назад по горизонтали.

Лучшие практики использования React Refs в глобальных приложениях

При разработке React-приложений для глобальной аудитории важно учитывать, как Refs взаимодействуют с интернационализацией (i18n) и локализацией (l10n). Вот несколько лучших практик:

1. Доступность (A11y)

Убедитесь, что ваше использование Refs не оказывает негативного влияния на доступность. Например, при программном фокусировании элементов учитывайте порядок фокусировки пользователя и то, является ли изменение фокуса подходящим для программ чтения с экрана и пользователей клавиатуры.

import React, { useRef, useEffect } from 'react';

function AccessibleFocus() {
  const buttonRef = useRef(null);

  useEffect(() => {
    const button = buttonRef.current;
    if (button) {
      // Фокусировать только в том случае, если кнопка еще не сфокусирована пользователем
      if (document.activeElement !== button) {
        button.focus();
      }
    }
  }, []);

  return Click Me;
}

2. Интернационализированные поля ввода

При работе с полями ввода помните о различных методах ввода и наборах символов, используемых в разных языках. Убедитесь, что ваши манипуляции на основе Ref (например, выделение, положение курсора) работают правильно с различными типами ввода и локалями. Тщательно протестируйте свои компоненты с разными языками и методами ввода.

3. Макеты справа налево (RTL)

Если ваше приложение поддерживает языки RTL (например, арабский, иврит), убедитесь, что ваши манипуляции с DOM с использованием Refs учитывают перевернутый макет. Например, при анимации элементов рассмотрите возможность изменения направления анимации для языков RTL.

4. Соображения производительности

Хотя Refs предоставляют мощный способ взаимодействия с DOM, чрезмерное использование может привести к проблемам с производительностью. Непосредственное манипулирование DOM обходит виртуальный DOM React и процесс согласования, что потенциально может привести к несогласованностям и замедлению обновлений. Используйте Refs разумно и только при необходимости.

Заключение

React Refs, в частности useRef и createRef, являются важными инструментами для React-разработчиков. Понимание нюансов каждого подхода и того, когда их эффективно применять, имеет решающее значение для создания надежных и производительных приложений. createRef остается стандартом для управления Refs в классовых компонентах, гарантируя, что каждый экземпляр имеет свой уникальный Ref. useRef, с его постоянным характером между рендерами, идеально подходит для функциональных компонентов, предлагая способ управления элементами DOM и сохранения значений без запуска ненужных повторных рендеров. Мудро используя эти инструменты, вы можете улучшить функциональность и пользовательский опыт своих React-приложений, обслуживая глобальную аудиторию с помощью доступных и производительных интерфейсов.

Поскольку React продолжает развиваться, освоение этих фундаментальных концепций позволит вам создавать инновационные и удобные веб-интерфейсы, которые выходят за географические и культурные границы. Не забывайте уделять приоритетное внимание доступности, интернационализации и производительности, чтобы создавать действительно глобальные приложения.