React中useRef()方法

本文主要是介绍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>  );  
}