本文主要是介绍React中useRef()方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
在React中，
useRef是一个非常重要的Hook，它提供了一种方式，让我们可以在函数组件中访问DOM节点或保持可变值，其值在整个组件生命周期内保持不变。
useRef返回的是一个可变对象，其.current属性被初始化为传入的参数（initialValue）。返回的ref对象在组件的整个生命周期内保持不变。
useRef的基本用法
- 访问DOM节点
useRef最常见的用法之一是访问DOM节点。在类组件中，我们通常会使用ref属性配合React.createRef()来访问DOM节点，但在函数组件中，我们不能直接使用ref属性，这时就需要使用useRef
import React, { useRef, useEffect } from 'react'; function MyComponent() { const inputRef = useRef(null); useEffect(() => { if (inputRef.current) { inputRef.current.focus(); } }, []); return <input ref={inputRef} type="text" />;
}
在这个例子中，useRef创建了一个ref，并将其附加到<input>元素上。然后，在useEffect中，我们通过inputRef.current访问到该DOM节点，并调用其focus()方法。
- 保持可变值
除了访问DOM节点，useRef还可以用于在组件中保持可变值。这些值不会触发组件的重新渲染，因此非常适合用于存储那些不需要触发UI更新的状态。
import React, { useRef } from 'react'; function MyComponent() { const counter = useRef(0); const increment = () => { counter.current = counter.current + 1; console.log(counter.current); }; return ( <div> <p>Clicked {counter.current} times</p> <button onClick={increment}>Click me</button> </div> );
}
在这个例子中，我们使用useRef创建了一个计数器。每次点击按钮时，计数器的值就会增加，但并不会触发组件的重新渲染。因此，尽管计数器的值在控制台中增加了，但页面上的显示并不会改变。
微信搜一搜「 Meteor的笔记 」并关注，第一时间阅读相关文章！持续分享技术、校招、程序员成长等内容更新！
这篇关于React中useRef()方法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
