DEV Community
·
超越焦点的useRef钩子：详解useRef钩子的所有用例
💡
原文英文，约800词，阅读约需3分钟。
📝
内容提要
本文探讨了React中useRef钩子的多种用途，包括持久化变量、直接操作DOM、设置属性、读取值、样式调整、添加事件监听、测量尺寸、滚动到元素及触发动画。尽管useRef允许直接访问DOM，但在大多数状态相关交互中，使用React的状态管理机制（如useState）更为合适。
🎯
关键要点
- 本文探讨了React中useRef钩子的多种用途。
- useRef可以持久化变量，不会导致组件重新渲染。
- useRef允许直接访问和操作DOM元素。
- 可以使用useRef设置属性、读取值和调整样式。
- useRef可以添加事件监听器以跟踪输入框的变化。
- 可以使用useRef测量DOM元素的尺寸。
- useRef可以实现滚动到元素和触发动画的功能。
- 尽管useRef提供了直接访问DOM的能力，但在大多数状态相关交互中，使用React的状态管理机制（如useState）更为合适。
❓
延伸问答
useRef钩子在React中有什么主要用途？
useRef钩子主要用于持久化变量、直接操作DOM、设置属性、读取值、样式调整、添加事件监听、测量尺寸、滚动到元素及触发动画。
使用useRef钩子时，如何避免组件重新渲染？
useRef存储的值不会被React跟踪，因此对ref.current的更改不会触发组件重新渲染。
如何使用useRef来直接操作DOM元素？
可以通过useRef创建一个引用，然后将其传递给DOM元素，从而实现对该元素的直接访问和操作，例如设置属性或添加事件监听。
useRef钩子如何帮助测量DOM元素的尺寸？
可以在useEffect中访问inputRef.current，使用offsetWidth和offsetHeight属性来获取DOM元素的宽度和高度。
在使用useRef时，何时应该使用React的状态管理机制？
在大多数状态相关交互中，使用React的状态管理机制（如useState）更为合适，而不是直接使用useRef。
如何使用useRef实现输入框的事件监听？
可以在useEffect中为inputRef.current添加事件监听器，以跟踪输入框的变化，并在组件卸载时移除该监听器。
➡️
