在 ReactJS 中，当只有一个这样的组件时，在文件的全局范围内使用变量是不是与 useRef() 相同？

Posted 2023-02-25

【中文标题】在 ReactJS 中，当只有一个这样的组件时，在文件的全局范围内使用变量是不是与 useRef() 相同？

【英文标题】：In ReactJS, is it true that using a variable in the global scope of the file only works the same as useRef() when there is only one such component?在 ReactJS 中，当只有一个这样的组件时，在文件的全局范围内使用变量是否与 useRef() 相同？

【发布时间】：2021-09-23 13:20:50

【问题描述】：

在 ReactJS 中，当我们编写函数式组件时：

let someState = true;

const Foo = (props) => 
  // so something...
  return <div> ... </div>;

我们可以使用上面的“状态”，也可以使用someStateByRef = useRef(true) 和someStateByRef.current。 （这是一个不需要渲染或触发重新渲染的状态或标志）。

它们是否相同，只有当我们确定页面上会有一个这样的组件实例时？似乎如果有两个Foo 实例，那么someState 可以在两个组件之间共享，而someStateByRef.current 是每个Foo 的一个副本？是这样的吗？

【问题讨论】：

最大的区别是使用问题中的代码和参考中的状态，react 不会识别它正在更改，并且不会更新。您甚至可以使用 window.myVar = 'something' 并在其他地方阅读。但是 react 不知道是否发生了变化，如果发生了变化，也不会重新渲染。

【参考方案1】：

不完全一样，因为useRef的作用域是组件生命周期。

这意味着每当卸载组件时，useRef 就会被删除，当组件再次安装时，您将拥有一个新实例。例如。当你有条件地渲染时。

相比之下，someState 在组件卸载后仍然存在。

如果您有多个 Foo 组件实例，每个实例都有自己的 useRef 实例，因为它与组件生命周期绑定。

 <Foo title="Foo"/>
 <Foo title="Bar"/>

所以最后...

如果有两个 Foo 实例，那么 someState 可以在两个组件之间共享，而 someStateByRef.current 是每个 Foo 一个副本？是这样的吗？

是的，它会这样工作。但如果您想在多个组件之间共享状态，我建议您使用上下文 - 请参阅 useContext。

【讨论】：

哦，对了，我不想分享状态...这个组件是唯一的组件，所以我认为不用担心...但是如果出于任何原因，该组件需要显示两次，然后它就会成为一个问题