时间戳

首页 > 解决方案 > 为什么反应`useRef`挂钩将对象存储在`current`属性中？为什么不能直接存储在 ref 对象中？

javascript - 为什么反应`useRef`挂钩将对象存储在`current`属性中？为什么不能直接存储在 ref 对象中？

问题描述

为什么useRef钩子返回的对象会存储它应该在属性中保存的任何值current？为什么我们不能直接给 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属性的对象中的参数的目的是什么？

标签： javascriptreactjsreact-hooks

解决方案

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

当您调用useRef()组件时，会在 React 内部创建一个“引用对象”，并与组件的特定实例相关联。每次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 对象，以便您可以使用之前设置的值。

推荐阅读