useRef 创建的 ref 值是组件实例隔离的，每个组件实例拥有独立副本；而组件外声明的变量是全局共享的，所有实例共用同一份内存地址，易引发状态污染和竞态问题。
reactjs 中 useref 与组件外声明变量的本质区别：`useref` 创建的 ref 值是组件实例隔离的，每个组件实例拥有独立副本；而组件外声明的变量是全局共享的，所有实例共用同一份内存地址，易引发状态污染和竞态问题。
在 React 函数组件中，看似相似的两种“持久化变量”写法，实则存在根本性差异：
// ✅ 正确：useRef —— 实例私有、安全、符合 React 模型
function MyComponent() {
const isPersistent = useRef(true); // 每个 MyComponent 实例都有独立的 isPersistent.current
return <div>{isPersistent.current ? 'Active' : 'Inactive'}</div>;
}
// ❌ 危险：组件外声明 —— 全局共享、跨实例污染
let isPersistent = true;
function MyComponent() {
return <div>{isPersistent ? 'Active' : 'Inactive'}</div>;
}
关键区别在于作用域与生命周期归属：
-
useRef(true)返回的 ref 对象由 React 管理，其.current属性在每次组件挂载时被初始化，并在组件卸载时自动解绑（虽然 ref 本身不触发重渲染，但其生命周期与组件强绑定）。多个isPersistent.current，互不影响。 外部声明的
let isPersistent = true是模块级变量（闭包变量），属于整个 JS 模块作用域。无论渲染多少个MyComponent实例，它们都读写同一个isPersistent变量 —— 这会导致典型的状态共享副作用。例如：
// 假设页面中同时存在两个组件： <mycomponent></mycomponent> // 实例 A <mycomponent></mycomponent> // 实例 B // 若某处执行：isPersistent = false; // → 两个实例的渲染结果将同时变为 'Inactive'，违背组件封装性！
⚠️ 注意事项：
-
useRef不会触发重渲染（这点与useState不同），它仅提供可变的、跨渲染周期稳定的容器，适合存储 DOM 引用、定时器 ID、上一次 props/state 等非响应式数据。 - 组件外变量虽在极少数场景下有用（如统计全局组件渲染次数、调试钩子、单例配置缓存），但必须明确其全局性，并加注释说明意图，绝不可用于任何需实例隔离的状态逻辑。
- 若需跨实例共享状态，请使用
Context API或状态管理库（如 Redux、Zustand），而非裸露的外部变量。
✅ 总结：
选择 useRef 不是为了“更高级”，而是为了遵守 React 的组件模型契约——每个组件实例应拥有独立、可预测、可销毁的状态边界。外部变量破坏了这一边界，是隐式耦合的根源，应严格避免在业务逻辑中使用。
