react 中 useRef Hook 作用

`useRef`是一个非常实用的钩子函数

一、访问和操作 DOM 元素

1. 获取 DOM 元素引用

1.1 基本原理

通过 `useRef` 我们可以直接操作 DOM 元素

1.2 代码示例

import React, { useRef, useEffect } from "react";const InputFocusComponent = () => {const inputRef = useRef(null);useEffect(() => {// 组件挂载后，使输入框获得焦点if (inputRef.current) {inputRef.current.focus();}}, []);return (<div><input type="text" ref={inputRef} /></div>);};export default InputFocusComponent;

2. 跨渲染周期保持引用

2.1 渲染周期中的稳定性

例如：在一个定时器的场景中，需要在组件挂载时启动定时器，并在组件卸载时清除定时器，`useRef`可以帮助我们保持对定时器 ID 的引用。

2.2 代码示例

import React, { useRef, useEffect, useState } from "react";const TimerComponent = () => {const timerRef = useRef(null);const [count, setCount] = useState(0);useEffect(() => {// 组件挂载时启动定时器timerRef.current = setInterval(() => {setCount((prevCount) => prevCount + 1);}, 1000);return () => {// 组件卸载时清除定时器if (timerRef.current) {clearInterval(timerRef.current);}};}, []);return (<div><p>Seconds passed: {count}</p></div>);};export default TimerComponent;

二、保存可变值

1. 避免重新渲染触发的问题

1.2 与 state 的区别

例如：在一个数据获取的场景中，获取数据时不需要触发组件渲染。

1.3 代码示例

import React, { useRef, useState, useEffect } from "react";const DataFetchingComponent = () => {const isFetchingRef = useRef(false);const [data, setData] = useState(null);useEffect(() => {if (!isFetchingRef.current) {isFetchingRef.current = true;fetch("https://example.com/api/data").then((response) => response.json()).then((jsonData) => {setData(jsonData);isFetchingRef.current = false;});}}, []);return (<div>{data ? (<pre>{JSON.stringify(data)}</pre>) : (<p>{isFetchingRef.current ? "Fetching data..." : "No data available"}</p>)}</div>);};export default DataFetchingComponent;