React-ссылка (ref) - это механизм, который позволяет получить доступ к реальному DOM-элементу, созданному компонентом, и изменять его свойства и методы.

В React, когда компонент рендерится, React создает виртуальное дерево DOM, которое является копией реального DOM. Виртуальное дерево DOM не является полным представлением реального DOM, поэтому некоторые свойства и методы реального DOM не могут быть изменены напрямую из компонента. React-ссылка (ref) позволяет получить доступ к реальному DOM-элементу и изменять его свойства и методы.

React-ссылка создается с помощью функции React.createRef(). Эта функция возвращает объект ref, который можно передать в свойство компонента. Когда компонент монтируется, React присваивает объект ref свойству ref элемента DOM, созданного компонентом.

Пример использования React-ссылки:

import React, { Component } from "react"
 
class MyComponent extends Component {
  constructor(props) {
    super(props)
    this.inputRef = React.createRef()
  }
 
  componentDidMount() {
    this.inputRef.current.focus()
  }
 
  render() {
    return <input type="text" ref={this.inputRef} />
  }
}
 
export default MyComponent

В данном примере мы создаем React-ссылку inputRef в конструкторе компонента MyComponent. В методе componentDidMount() мы вызываем метод focus() для получения фокуса на элементе input. В методе render() мы передаем React-ссылку в свойство ref элемента input. После монтирования компонента, React присваивает объект inputRef свойству ref элемента input. Когда метод componentDidMount() вызывается, мы можем получить доступ к элементу input через this.inputRef.current и вызвать метод focus().

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

**Отличие state от ref

Официальная документация рекомендует использовать state и прибегать к refs только в том случае, когда по-другому никак, потому что ref используется когда нужна DOMnode или React-element. Например, после какого-то event вы хотите ставить focus в какой-то input. Берете ref input и ставите фокус.

В state - хранится локальное состояние.

Назад