为什么React跨渲染追踪变量优先用useRef而非模块级let声明？

问题1：第一段代码的写法属于反模式吗？ #

是，第一段写法属于典型的React反模式。

问题2：反模式的原因以及useRef的设计价值 #

第一段写法的核心问题 #

• 组件外部声明的currentSearchInput是全局共享变量：如果同一页面渲染多个TypeaheadList组件实例，所有实例会共用这一个变量，不同实例的搜索请求会互相覆盖判断基准，直接导致逻辑混乱、结果渲染错误。
• 全局变量状态不会随组件生命周期重置：组件卸载后重新挂载、或者开发环境热更新时，变量会残留上一次的旧值，引发不可预期的bug。
• 违反组件封装原则：组件的内部运行状态应该和实例绑定，不应该泄漏到外部作用域，也存在被外部逻辑意外修改的风险。

React提供useRef API的原因 #

useRef是为了满足「存储不需要触发视图更新的可变状态」的需求，同时完全规避了全局变量的缺陷：

• 每个组件实例持有独立的ref对象，不同实例的current值互不干扰，多实例场景下逻辑完全独立。
• ref的生命周期和组件实例完全绑定：组件挂载时创建，卸载时销毁，不会有残留状态的问题。
• ref值更新不会触发组件重渲染：用来存储异步请求追踪标识、DOM引用、定时器ID这类不需要驱动视图的状态时，不会产生额外的渲染开销，性能优于用useState存储。
• 属于React官方原生支持的状态存储方案，符合React运行规则，在严格模式、并发渲染等场景下都能保证逻辑正确性。

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