javascript - ReactJS 中 `useRef` 和 ref 变量的区别

Question

我有这个

const CompA = () => {
  let _input;
  return (
    <input ref={el => _input = el} type="text" />
  );
}

和这个

const CompB = () => {
  const _input = useRef(null);
  return (
    <input ref={_input} type="text" />
  );
}

两个_input是 input 的 ref 对象标签，我找不到它们之间的区别。

我的问题是:两个 _input 有什么区别？其中_input更好？

Answer 1

refs 的两种定义方式是不等价的。

考虑第一个例子

const CompA = () => {
  let _input;
  return (
    <input ref={el => _input = el} type="text" />
  );
}

在此示例中，无论何时，CompA 都会重新渲染，作为新变量 _input被创建，例如，如果您在 CompA 中有一个 useEffect，它旨在在初始渲染上运行，并且它使用这个 ref 变量每隔一段时间执行一些东西，这将导致不一致。

现在考虑第二种情况

const CompA = () => {
  const _input = useRef(null);
  return (
    <input ref={_input} type="text" />
  );
}

在这种情况下，即使在每次渲染时都创建了 _input 变量，useRef确保它收到与第一次收到的引用相同的引用，并且不会再次对其进行初始化。 useRef是为 functional Components 定义引用的正确方法.对于类组件，您可以使用 createRef或者你提到的回调模式