重新渲染如何影响 useRef 值
在组件的顶部，我使用 useRef 定义了一个变量，如下所示。
const data = {
item1 : useRef (null),
}
console.log (data['item1'].current?.srcObject)
现在，随着逻辑通过组件，item1 的值已设置。 ref 附加到视频元素。并且在某些时候组件会重新渲染。 console.log 在第一次和第二次重新渲染时打印 srcObject 的值。但到了第三次，这个价值就消失了。 srcObject 在重新渲染之间没有显式更改。
我不完全理解 refs，但我想知道这些值是如何保留或销毁的。当然，我知道它们可能是针对特定情况的，但我仍然想了解总体思路。
At the top of my component I define a variable with useRef like below.
const data = {
item1 : useRef (null),
}
console.log (data['item1'].current?.srcObject)
Now as the logic proceeds through the component the value for item1 is set up. The ref is attached to a video element. And at certain points the component re-renders.
The console.log prints the value of the srcObject upon the first re-render and the second. But on the third that value is lost. The srcObject is not explicitly changed in between the re-renders.
I don't fully understand refs but I'd like to know how these values are retained or destroyed. Of course I get that they maybe case specific but I'd still like to get the general idea.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可能想要改为执行
const ref = useRef({item1: ...})并将当前值引用为ref.current.item。每次渲染都会重新创建您的对象。如果将对象放入 ref 中，
ref.current将是该对象，并且该对象不会随着 React 渲染而更新或更改。这就是 refs 的用途，您可以独立于渲染更新这些值，这些值也会在组件的生命周期内保留。You probably want to instead do
const ref = useRef({item1: ...})and reference the current value asref.current.item. Your object is getting re-created every render.If you put the object inside the ref,
ref.currentwill be the object, and that object won't update or change with react renders. That's what refs are for, values that you can update independent of rendering, that also stick around for the lifetime of the component.