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或您提到的回调模式

Answer 2

从文档中：

这是有效的，因为useRef((创建了一个普通的JavaScript对象。useRef(( 和自己创建一个 {current： ...} 对象之间的唯一区别是 useRef 会在每次渲染时给你相同的 ref 对象。

换句话说，useRef将通过更改 props 或状态来保留每次渲染/更新的引用。另一方面，作为变量的简单ref将在每个组件周期中被删除。