Question

我对使用useRef挂钩在React中引用的声明有疑问。

这样做之间有什么区别吗？

 const inputRef = useRef(null).current;

 ...

 inputRef?.focus();

这：

 const inputRef = useRef(null);
 
 ...

 inputRef.current?.focus();

??

在我的代码中，行为是相同的，但是在某些情况下，在其他用例中，我得到的结果是不同的。

例如：

 const arrayRef = useRef(null);
 arrayRef.current = data; // data is an array of numbers

似乎与

不同

 const arrayRef = useRef(null).current;
 arrayRef = data;

但是为什么呢？（不太确定是否相同，但是我的代码使用第二种方法无法正常工作。）

非常感谢您的帮助。谢谢。

Answer 1

使用.current的问题是，将立即提取当前参考。如果在渲染时提取了该值，但随后进行了重新渲染，但是初始渲染仍在某处使用提取的引用，则它将作为ref中的 old value 的引用。可能还不存在。

举个简单的例子：

const Foo = () => {
  const inputRef = useRef(null);
  useEffect(() => {
    window.addEventListener('custom-focus-the-input', () => {
      inputRef.current.focus();
    });
  }, []);
  return (
    <input ref={inputRef} />
  );
};

以上，引用必须用作普通引用。直到进入事件侦听器之内，您才能将其提取到其current值中，因为在第一次渲染时，引用的引用会更改。

此外，为了使引用正确分配其.current，您必须将引用本身放入返回的JSX中-请勿将.current值放入JSX中，因为那样会导致会导致ref的.current属性发生变化。

通常-仅从引用中提取.current值，直到您需要在随后的 synchronous 代码中不久使用它为止。

Answer 2

useRef（就像几乎所有的react钩子一样）有效地将实例变量提供给没有实例的对象（功能组件不受实例支持-它是一个函数，但react跟踪）这是通过纤维和其他酷魔术的生命周期。

现在您知道它只是一个实例变量，很明显，实例变量仅在可以分配事物时才有用。

In the context you've given：

const animatedOpacity = useRef(new Animated.Value(0)).current;

实例变量被分配了Animated.Value。无需重新分配它，因为Animated.Value（即引用的current属性）是使用其他功能（例如Animated.timing）进行操纵/重新分配的。

使用useRef（）。current代替useRef（）有什么区别吗？

2 个答案: