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

【问题标题】：Differences between `useRef` and ref variable in ReactJSReactJS 中 `useRef` 和 ref 变量的区别
【发布时间】：2019-10-26 10:31:51
【问题描述】：

我有这个

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 更好有什么区别？

【问题讨论】：

标签： javascript reactjs react-hooks react-ref

【解决方案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 或您提到的回调模式

【讨论】：

这尤其适用于在 useEffect() 挂钩的依赖数组中使用该值的情况。使用变量而不是 ref 可能会意外触发相关的 useEffect() 挂钩。

【解决方案2】：

来自docs：

这是因为 useRef() 创建了一个普通的 JavaScript 对象。 useRef() 和自己创建 {current: ...} 对象之间的唯一区别是 useRef 会在每次渲染时为您提供相同的 ref 对象。

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

【讨论】：

这意味着const ref = useRef(1)等于const ref = useMemo(() => ({ current: 1 }), [])