6

我有这个

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更好？

4

2 回答 2

10

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是定义 refs 的正确方法functional Components。对于您可以使用的类组件createRef或您提到的回调模式

于 2019-06-12T05:34:54.700 回答
2

从文档：

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

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

于 2019-06-12T00:48:49.130 回答