Разве ссылка, созданная с помощью createRef, не должна быть одинаковой при каждой визуализации?

Question

Я не понимаю основного поведения системы ref в перехватчиках реакции.

Я понимаю, что useRef создаст постоянный объект, в котором во время каждого рендеринга будет изменяться только текущее свойство. Я ожидал, что createRef будет вести себя так же, но, по-видимому, не так:

Этот код создает бесконечное l oop

import React from "react";

export default function App() {
  const [count, setCount] = React.useState(0)
  const ref = React.createRef()
  React.useLayoutEffect(() => {setCount(count => count+1)}, [ref])
  return (
    <h1 ref={ref}>{count}</h1>
  );
}

Этот код не:

import React from "react";

export default function App() {
  const [count, setCount] = React.useState(0)
  const ref = React.useRef()
  React.useLayoutEffect(() => {setCount(count => count+1)}, [ref])
  return (
    <h1 ref={ref}>{count}</h1>
  );
}

Итак, что же это за c за createRef?

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

Answer 1

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

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