React中全局作用域变量与useRef是否仅单组件实例时效果一致

结论 #

你描述的多实例场景下的运行逻辑完全正确，且两种实现即便在单实例场景下效果也不是完全一致的。

差异详细说明

• 多实例场景
  你提到的表现完全符合运行规则：
  顶层声明的let someState = true是模块作用域变量，整个JS文件被加载后仅会初始化一次，所有Foo组件实例共享这一份变量，任意实例修改它的值都会同步到其他所有实例。
  而useRef创建的someStateByRef是绑定到单个组件实例的内部存储，每个Foo实例都会生成独立的ref对象，实例之间互不影响，修改某一个实例的someStateByRef.current不会作用到其他实例上。

• 单实例场景
  哪怕页面仅存在一个Foo实例，两者也存在本质差异：

  1. 组件卸载后重新挂载时，模块全局的someState会保留之前修改后的值，不会重置；而useRef会随新实例重新初始化，值回到初始的true。
  2. 服务端渲染场景下，模块全局变量会在多个用户请求之间共享，极易出现跨请求的状态污染；而useRef是请求隔离、实例隔离的，不存在该问题。

选型建议

如果需要全实例共享、且不需要触发重渲染的全局标记，可以使用模块作用域变量，注意要规避SSR场景下的交叉污染问题；如果是每个实例私有的、不需要触发重渲染的状态，统一使用useRef即可。

内容的提问来源于stack exchange，提问作者nonopolarity