React之useRef的使用

第一章 React之useRef的使用

---

---

前言

我们在使用React开发中可能会操作DOM对象或者需要保存某个值，这个时候我们可以使用useRef。

---

一、useRef是什么？

它其实只是创建一个容器

const numRef = useRef()

二、使用步骤

1.引入库

代码如下（示例）：

import {useRfe} from 'React'

2.代码中使用

代码如下（示例）：

import {useRef} from "react";
export const Test = () => {
const numRef = useRef()
	return <div>
		<h1 ref = {numRef }>Ref</h1>
	</div>
}

创建一个存储DOM对象的容器
使用 useRef() 钩子函数
钩子函数的注意事项：
React中的钩子函数只能用于函数组件或自定义钩子

• 钩子函数只能直接在函数组件中调用
• 将容器设置为想要获取DOM对象元素的ref属性
• React会自动将当前元素的DOM对象，设置为容器current属性

---

三、useRef扩展

我们知道useRef返回的就是一个普通的JS对象{current:undefined}，所以我们直接创建一个js对象，也可以代替useRef()。

区别：

• 我们创建的对象，组件每次重新渲染都会创建一个新对象。
• useRef()创建的对象，可以确保每次渲染获取到的都是同一个对象。

当你需要一个对象不会因为组件的重新渲染而改变时，就可以使用useRef()。