javascript - 为什么 react `useRef` Hook 将对象存储在 `current` 属性中？为什么不能直接存储在 ref 对象中？

Question

useRef 返回的对象为什么钩子(Hook)存储它应该在 current 中保存的任何值属性(property)？为什么我们不能直接给 ref 对象赋值，如下所示:

const sampleRef = useRef([]);

/** why can't we do this... */
sampleRef.push('1');

/** ...instead of this? Why an extra `current` object? */
sampleRef.current.pus('1');

useRef的目的是什么返回包装在另一个对象中的参数 current属性(property)？

Answer 1

这个问题的答案并不特定于 React 及其钩子(Hook)系统。
改变一个对象只是你如何在不同的闭包/范围之间共享值的一种解决方案。

当您调用 useRef()对于您的组件，在 React 内部创建了一个“ref 对象”，与您的组件的特定实例相关联。
每次useRef()跨多个渲染调用，返回相同的“引用对象”。设置current这就是您如何存储一个值以在下次渲染时重新访问它。

通过做类似的事情

let value = useRef();
value = 1234;

您正在丢弃 ref 对象，将其替换为本地范围内的新值。 React 无法跟踪该操作并更新存储在其内部的 ref 对象。 (事实上​​，React 无论如何都不会跟踪对“引用对象”的任何操作，它只是将它们提供给你。你改变它们，你访问它们)。

但是使用当前的 API，您可以

const ref = useRef(); // ref is an object that is stored somewhere in React internals
ref.current = 1234; // you update the property of that object

下次渲染组件时，React 会为您提供相同的 ref 对象，以便您可以使用之前设置的值。