蚊子
·
React 中 useState 和 useRef 与全局变量的区别
内容提要
React中有多种数据存储方式，包括useState()、useRef()和全局变量。useState()通过dispatch()方法更新数据，只在组件重新执行后才能取到更新后的数据。useRef()可以存储任何类型的数据，不会引起组件刷新，内容被修改会立即生效。全局变量在组件刷新时不会重置数据，可以在多次调用的组件之间共享。根据使用场景选择适合的数据存储方式。
关键要点
-
React中有多种数据存储方式，包括useState()、useRef()和全局变量。
-
useState()通过dispatch()方法更新数据，更新后需要重新执行组件才能获取最新数据。
-
useRef()可以存储任何类型的数据，不会引起组件刷新，内容修改立即生效。
-
全局变量在组件刷新时不会重置数据，可以在多次调用的组件之间共享。
-
根据使用场景选择适合的数据存储方式。
-
局部变量在组件每次执行后会被重置，而全局变量不会。
-
useEffect()可以用来监听props的变化并更新state。
-
useRef()可以存储DOM元素、对象、回调函数等，且更新不会引起组件重新渲染。
-
全局变量在当前页面周期内有效，组件被多次调用时共享该全局变量。
-
使用useRef()可以避免全局变量带来的问题，适合用于标记或计数。
延伸问答
useState() 和 useRef() 的主要区别是什么？
useState() 更新数据后会引起组件重新渲染，而 useRef() 更新数据不会引起组件刷新。
全局变量在 React 组件中的作用是什么？
全局变量在当前页面周期内有效，可以在多次调用的组件之间共享数据，不会因组件刷新而重置。
如何使用 useEffect() 来监听 props 的变化？
可以在 useEffect() 中设置依赖项为 props，当 props 变化时，更新 state。
局部变量和全局变量在组件中的区别是什么？
局部变量在组件每次执行后会被重置，而全局变量在页面周期内有效，不会因组件刷新而重置。
useRef() 可以存储哪些类型的数据？
useRef() 可以存储任何类型的数据，包括 DOM 元素、对象、回调函数等。
在什么情况下应该使用 useRef() 而不是全局变量？
当需要标记或计数且不希望引起组件重新渲染时，使用 useRef() 更合适。
