React 中 useState 和 useRef 与全局变量的区别
内容提要
React中有多种数据存储方式，包括useState()、useRef()和全局变量。useState()通过dispatch()方法更新数据，只在组件重新执行后才能取到更新后的数据。useRef()可以存储任何类型的数据，不会引起组件刷新，内容被修改会立即生效。全局变量在组件刷新时不会重置数据，可以在多次调用的组件之间共享。根据使用场景选择适合的数据存储方式。
延伸解读
数据更新与渲染的时机差异
useState 更新后必须等组件重新执行才能读取新值，而 useRef 和全局变量修改后立即生效且不触发渲染。这意味着在事件处理中连续读取状态时，useState 可能拿到旧值，而 useRef 能实时反映变化。理解这一点有助于避免因异步更新导致的逻辑错误。
组件复用时的数据隔离
当组件被多次调用时，useState 和 useRef 在每个实例中都是独立的，互不影响；而全局变量会被所有实例共享。例如用全局变量做计数器，多个组件实例会累加同一个值，容易引发意外。若需要每个实例独立计数，应使用 useRef 而非全局变量。
生命周期与作用范围
useState 和 useRef 的数据生命周期与组件绑定，组件销毁后数据随之消失；全局变量则在整个页面周期内有效，除非刷新页面。因此，跨组件长期共享的数据适合用全局状态管理，而组件内部临时标记或 DOM 引用更适合用 useRef。
避免全局变量引发的状态残留
文章提到一个常见错误：用全局变量标记方法是否首次调用，导致组件再次进入时初始值已被修改。这类问题源于全局变量不随组件重置。若只需在组件内标记或计数，应使用 useRef，既能保持值又不会引起不必要的渲染。
Q&A
useState() 和 useRef() 的主要区别是什么？
useState() 更新数据后会引起组件重新渲染，而 useRef() 更新数据不会引起组件刷新。
全局变量在 React 组件中的作用是什么？
全局变量在当前页面周期内有效，可以在多次调用的组件之间共享数据，不会因组件刷新而重置。
如何使用 useEffect() 来监听 props 的变化？
可以在 useEffect() 中设置依赖项为 props，当 props 变化时，更新 state。
局部变量和全局变量在组件中的区别是什么？
局部变量在组件每次执行后会被重置，而全局变量在页面周期内有效，不会因组件刷新而重置。
useRef() 可以存储哪些类型的数据？
useRef() 可以存储任何类型的数据，包括 DOM 元素、对象、回调函数等。
在什么情况下应该使用 useRef() 而不是全局变量？
当需要标记或计数且不希望引起组件重新渲染时，使用 useRef() 更合适。
