ReactJS中的useuse和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标签的引用对象，我找不到它们之间的区别。

我的问题是：两个_input之间有什么区别，哪个_input更好？

Answer 1

两种定义方式，refs不相等。

考虑第一个示例

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

在此示例中，每当创建新变量_input时，CompA都会重新渲染，例如，如果您在CompA中有一个useEffect，它打算在初始渲染上运行，并且它会使用此ref变量会导致不一致。

现在考虑第二种情况

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

在这种情况下，即使在每个渲染上都创建了_input变量，useRef仍可确保它收到的引用与第一次收到的引用相同，而无需再次初始化。 useRef是为functional Components定义引用的正确方法。对于类组件，您可以使用createRef或您提到的回调模式

Answer 2

来自docs：

  

之所以有效，是因为useRef（）创建了一个纯JavaScript对象。 useRef（）和自己创建{current：...}对象之间的唯一区别是useRef将在每个渲染器上为您提供相同的ref对象。

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