react中useRef的使用

前端交互仔

已于 2023-07-04 19:57:37 修改

阅读量1.1k

点赞数

文章标签： react.js javascript 前端

于 2023-07-04 19:49:28 首次发布

本文链接：https://blog.csdn.net/liulang68/article/details/131541267

版权

useRef 是 React 中的一个 Hook，用于获取 DOM 元素或在组件之间共享不变的数据。

使用 useRef 可以获取任何的 DOM 元素，例如：

import React, { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}

在上面的例子中，我们使用 useRef 来获取 input 元素，并在按钮点击时调用 focus() 方法来聚焦到 input 上。

除了获取 DOM 元素，useRef 还可以用来在组件之间共享不变的数据。例如：

import React, { useRef } from 'react';

function MyComponent() {
  const dataRef = useRef({ name: 'John', age: 30 });

  return (
    <div>
      <p>Name: {dataRef.current.name}</p>
      <p>Age: {dataRef.current.age}</p>
    </div>
  );
}

我问chatgpt的问题

import React, { useRef, useState } from 'react';

function MyComponent() {
const dataRef = useRef({ name: 'John', age: 30 });
const [count, setCount] = useState(1)

return (
<div>
	<p>Name: {dataRef.current.name}</p>
	<p>Age: {dataRef.current.age}</p>
	<p>数字:{count}</p>
	<button onClick={() => {
	dataRef.current.name = 'zhangsan'
	setCount(count+1)
	console.log(dataRef.current.name)
	}}>点击</button>
</div>
);
}
export default MyComponent;

通过页面实际效果我发现
当我没有setState的时候点击按钮页面useRef的值没有更新(也就是没有触发页面的重新渲染，但是useRef的值是更新了)，当我加了setState以后就会页面上useRef的值也更新了。

再来一个对比的例子

import React, { useRef, useState } from 'react';

function MyComponent() {
let date = '20230704'
const dataRef = useRef({ name: 'John', age: 30 });
const [count, setCount] = useState(1)
return (
<div>
	<p>Name: {dataRef.current.name}</p>
	<p>Age: {dataRef.current.age}</p>
	<p>数字:{count}</p>
	<p>日期:{date}</p>
	<button onClick={() => {
	dataRef.current.name = 'zhangsan'
	date = '20230705'
	setCount(count+1)
	console.log(dataRef.current.name)
	}}>点击</button>
	<button onClick={() => {
	console.log(dataRef.current.name)
	console.log(date)
	}}>获取日期</button>
</div>
);
}
export default MyComponent;

问题：为什么打印date的值是20230704而不是20230705

答案: 这是因为在React函数组件中，每次状态更新时，整个组件函数将重新执行。在这个例子中，日期date被定义为一个普通的变量，而不是状态变量。当你点击“点击”按钮时，date确实被更新为20230705，但是当组件重新渲染时，MyComponent函数重新执行，date变量又被重新赋值为20230704(假如页面没有重新渲染，我们拿到的就是修改以后的值)。

我之前的做法是把date放到组件外侧定义这个变量，但是假如我们理解了useRef的使用，我们这个时候就可以用useRef.

在组件内部，如果一个变量是使用 useState 或 useRef 定义的，那么它的值会被 React 管理，并且在组件重新渲染时会保留上一次的值，而不是被重新赋值为初始值。

dataRef 是一个使用 useRef 来存储引用的对象。当你在点击按钮时修改了 dataRef.current.name 的值，这个变化不会触发组件的重新渲染，但是页面上的值确实被更新了，因为它们都来自于 dataRef.current 这个对象。