DEV Community
·
理解 React 中的 useRef Hook
💡
原文英文，约500词，阅读约需2分钟。
📝
内容提要
useRef 是 React 中的重要工具，用于在渲染之间存储值、直接访问 DOM 元素，并避免不必要的重新渲染。与 useState 不同，useRef 的更新不会触发重新渲染，适合用于需要持久化值或直接操作 DOM 的场景，如计数渲染次数和实现计时器功能。
🎯
关键要点
- useRef 是 React 中的重要工具，用于在渲染之间存储值、直接访问 DOM 元素，并避免不必要的重新渲染。
- useRef 与 useState 的主要区别在于更新 useRef 的值不会触发重新渲染。
- useRef 可以用于存储可变值和直接访问 DOM 元素。
- 基本语法为 const refContainer = useRef(initialValue)。
- 示例 1：使用 useRef 持久化渲染次数。
- 示例 2：使用 useRef 访问 DOM 元素以实现计时器功能。
- 使用 useRef 的场景包括：需要存储不需要触发重新渲染的值（如计时器、计数器或跟踪渲染次数），以及需要直接访问或修改 DOM 元素而不导致重新渲染。
❓
延伸问答
useRef Hook 的主要功能是什么？
useRef Hook 主要用于在渲染之间存储值、直接访问 DOM 元素，并避免不必要的重新渲染。
useRef 和 useState 有什么区别？
useRef 的更新不会触发重新渲染，而 useState 的更新会导致组件重新渲染。
useRef 的基本语法是什么？
useRef 的基本语法为 const refContainer = useRef(initialValue)。
在什么情况下应该使用 useRef？
应在需要存储不触发重新渲染的值或直接访问 DOM 元素时使用 useRef。
如何使用 useRef 来实现计时器功能？
可以使用 useRef 存储定时器的引用，避免在每次渲染时重新创建定时器。
useRef 可以存储哪些类型的值？
useRef 可以存储可变值，如计数器、计时器等，不会导致组件重新渲染。
➡️
