В чем разница между useRef и createRef?

Я просматривал документацию по хукам, когда наткнулся на нее useRef.

Глядя на их пример…

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

… Вроде useRefможно заменить на createRef.

function TextInputWithFocusButton() {
  const inputRef = createRef(); // what's the diff?
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputRef.current.focus();
  };
  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

Зачем нужен хук для рефов? Почему useRefсуществует?

Разница в том, что createRefвсегда будет создаваться новый реф. В компоненте на основе классов вы обычно помещаете ref в свойство экземпляра во время построения (например, this.input = createRef()). У вас нет этой опции в функциональном компоненте. useRefзаботится о том, чтобы каждый раз возвращать ту же ссылку, что и при первоначальном рендеринге.

Вот пример приложения, демонстрирующий разницу в поведении этих двух функций:

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

function App() {
  const [renderIndex, setRenderIndex] = useState(1);
  const refFromUseRef = useRef();
  const refFromCreateRef = createRef();
  if (!refFromUseRef.current) {
    refFromUseRef.current = renderIndex;
  }
  if (!refFromCreateRef.current) {
    refFromCreateRef.current = renderIndex;
  }
  return (
    <div className="App">
      Current render index: {renderIndex}
      <br />
      First render index remembered within refFromUseRef.current:
      {refFromUseRef.current}
      <br />
      First render index unsuccessfully remembered within
      refFromCreateRef.current:
      {refFromCreateRef.current}
      <br />
      <button onClick={() => setRenderIndex(prev => prev + 1)}>
        Cause re-render
      </button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

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

Во втором примере ссылка будет воссоздаваться при каждой визуализации.

TLDR

A ref- простой объект JS { current: <some value> }.

React.createRef()фабрика возвращает реф { current: null }- никакой магии .

useRef(initValue)также возвращает ссылку, { current: initValue }похожую на React.createRef(). Кроме того , он запоминает эту ссылку, чтобы она сохранялась при нескольких отрисовках в функциональном компоненте .

this.myRef = React.createRef(); // stores ref in "mutable" this context (class)

useRef(null)в основном эквивалентно useState(React.createRef())[0] ¹ .

¹ Заменить useRefна useState+createRef

Следующий твит был для меня поучительным:

useRef()в основном useState({current: initialValue })[0].

Теперь, опираясь на информацию из tldrраздела, мы можем сделать следующий вывод:

useRef(null)в основном useState(React.createRef())[0].

Вышеупомянутый код "злоупотребляет" useStateсохранением возвращенного исх React.createRef(). [0]просто выбирает часть значения useState- [1]будет установщиком.

useStateвызывает повторную визуализацию в отличие от useRef. Более формально React сравнивает старую и новую ссылку на объект useState, когда новое значение устанавливается с помощью метода установки. Если мы мутировать состояние useStateнепосредственно (не против сеттеров вызова), то его поведение более или менее становится эквивалентом к useRef, так как без повторного рендеринга срабатывают больше:

// Example of mutaing object contained in useState directly
const [ref] = useState({ current: null })
ref.current = 42; // doesn't cause re-render

_{Примечание: не делайте этого! Используйте оптимизированный useRefAPI вместо того, чтобы изобретать колесо. Выше для иллюстрации.}

Просто чтобы выделить цель:

createRefтак же просто, как return {current: null}. Это способ обрабатывать ref=опору самым современным способом, и все (в то время как основанный на строках - это слишком магия, а на основе обратного вызова выглядит слишком многословно).

useRefсохраняет некоторые данные перед рендерингом, и их изменение не вызывает повторного рендеринга (как это useStateпроисходит). Они редко связаны. Все, что вы ожидаете от компонента на основе классов, переходит в поля экземпляра ( this.* =), похоже, кандидат для реализации useRefв функциональных компонентах.

Say useCallbackработает как методы ограниченного класса ( this.handleClick = .....bind(this)) и может быть повторно реализован (но мы точно не должны изобретать колесо) с помощью useRef.

Другими примерами являются ссылки на DOM, идентификаторы тайм-аута / интервала, идентификаторы или ссылки любых сторонних библиотек.

PS Я считаю, что команде React лучше выбрать другое название, useRefчтобы избежать путаницы createRef. Может быть useAndKeepили даже usePermanent.

Еще одно, но важное дополнение к другим ответам.

Вы не можете установить новое значение для createRef. Но вы можете useRef.

const ur = useRef();
const cr = createRef();

ur.current = 10; // you can do it, and value is set
cr.current = 10; // you can, but it's no good, it will not change it