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

来自docs：

This works because useRef() creates a plain JavaScript object. The only difference between useRef() and creating a {current: ...} object yourself is that useRef will give you the same ref object on every render.

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

Answer 2

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

考虑第一个例子

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

在此示例中，每当创建 CompA re-renders 作为新变量 _input 时，例如，如果您在 CompA 中有一个 useEffect，它意味着运行在初始渲染时并使用此 ref 变量每隔一段时间执行一些操作，这会导致不一致。

现在考虑第二种情况

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

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

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

Differences between `useRef` and ref variable in ReactJS

javascript

reactjs

react-ref

react-hooks