DEV Community
·
useRef
💡
原文约400字/词，阅读约需2分钟。
📝
内容提要
useRef是React中的值存储器，用于存储数据而不触发组件重新渲染，常用于访问DOM元素或保存变量。与useState不同，useRef的值变化不会导致UI更新。
🎯
关键要点
- useRef是React中的值存储器，用于存储数据而不触发组件重新渲染。
- useRef常用于访问DOM元素或保存变量，UI不会因值变化而更新。
- useRef可以比作教师口袋中的笔记，学生看不到这些笔记的变化。
- 使用useRef可以实现DOM访问，例如聚焦输入框，但不会导致组件重新渲染。
- useRef也可以用于存储值而不影响UI渲染，例如跟踪计数器的值。
- useState用于存储会影响UI的值，值变化会触发重新渲染。
- useRef用于仅存储数据或访问DOM，不会影响渲染。
❓
延伸问答
useRef在React中有什么作用？
useRef是一个值存储器，用于存储数据而不触发组件重新渲染。
useRef和useState有什么区别？
useState用于存储会影响UI的值，值变化会触发重新渲染；而useRef仅用于存储数据或访问DOM，不会影响渲染。
如何使用useRef访问DOM元素？
可以通过创建一个ref并将其传递给DOM元素，例如<input ref={inputRef} />，然后使用inputRef.current访问该元素。
useRef可以用于哪些场景？
useRef常用于访问DOM元素或存储变量而不影响UI渲染，例如跟踪计数器的值。
使用useRef存储值时会有什么影响？
使用useRef存储的值变化不会导致组件重新渲染，因此可以在不影响UI的情况下跟踪数据。
如何实现一个不影响UI的计数器？
可以使用useRef来存储计数器的值，例如const count = useRef(0);并在点击按钮时更新count.current。
➡️
