如何更轻松的对React refs 的理解？都有哪些应用场景？

React `refs` 的理解与应用

refs 是 React 提供的一种机制，用于直接访问 DOM 元素或 React 组件实例。在 React 中，refs 主要用于获取对 DOM 元素的引用，或访问类组件中的实例方法。在许多情况下，refs 是避免使用传统的 JavaScript 操作 DOM 的一种方式，同时也能解决一些特定场景中的问题，比如：获取输入框的值、管理焦点、动画、或者与第三方库集成。

目录结构：

React refs 的基本概念
refs 的创建方式
常见的应用场景
- 3.1 获取 DOM 元素的引用
- 3.2 管理焦点、文本选择或媒体播放
- 3.3 集成第三方库
结合实际项目的代码示例
- 4.1 获取 DOM 元素并聚焦
- 4.2 使用 ref 管理组件实例方法
总结

React `refs` 的基本概念

refs 是 React 提供的一个 API，允许你获取对 DOM 元素或 React 组件实例的引用。通过 refs，你可以直接操作这些元素或组件，执行例如修改属性、调用方法等操作。它与 React 的声明式 UI 不同，更接近于传统的命令式编程。

`refs` 的创建方式

在 React 中，可以通过以下方式创建 refs：

使用 React.createRef()（推荐的做法，尤其在类组件中使用）：
React.createRef() 返回一个包含 current 属性的对象，current 属性指向组件的 DOM 元素或实例。
通过回调函数创建 ref：
在函数组件中，ref 可以通过回调函数来创建。

常见的应用场景

3.1 获取 DOM 元素的引用

最常见的使用场景是直接访问 DOM 元素，例如获取 <input> 元素的值，或者操作一个元素的样式。

3.2 管理焦点、文本选择或媒体播放

当你需要在页面加载时或用户操作时自动聚焦一个输入框、播放一个视频，或者控制一个媒体元素时，refs 是非常有用的。

3.3 集成第三方库

在一些与 React 兼容性差的第三方库中，可能需要通过 refs 来获取 DOM 元素的引用并进行直接操作。

结合实际项目的代码示例

4.1 获取 DOM 元素并聚焦

在一个表单中，假设我们有一个文本框，需要在页面加载时将焦点设置到这个文本框上。可以通过 refs 来实现。

import React, { useEffect, useRef } from 'react';const FocusInput = () => {// 使用 useRef 创建 refconst inputRef = useRef(null);// 使用 useEffect 在组件挂载时聚焦输入框useEffect(() => {inputRef.current.focus();}, []);return (<div><h3>聚焦输入框示例</h3><input ref={inputRef} type="text" placeholder="请输入内容" /></div>);
};export default FocusInput;

解释：

useRef 用于创建一个 ref，并将其赋给 <input> 元素。
useEffect 中的 inputRef.current.focus() 会在组件加载时将焦点聚焦到输入框。

4.2 使用 `ref` 管理组件实例方法

refs 也可以用来访问类组件实例，调用组件的实例方法。在函数组件中，我们使用 forwardRef 和 useImperativeHandle 来暴露组件方法。

假设我们有一个计时器组件，父组件需要控制它的开始和暂停。

// Timer.js
import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';const Timer = forwardRef((props, ref) => {const [time, setTime] = useState(0);const intervalRef = useRef(null);// 暴露给父组件的控制方法useImperativeHandle(ref, () => ({start: () => {if (!intervalRef.current) {intervalRef.current = setInterval(() => {setTime((prevTime) => prevTime + 1);}, 1000);}},stop: () => {if (intervalRef.current) {clearInterval(intervalRef.current);intervalRef.current = null;}},}));useEffect(() => {return () => {if (intervalRef.current) clearInterval(intervalRef.current);};}, []);return <div>计时器: {time} 秒</div>;
});export default Timer;// ParentComponent.js
import React, { useRef } from 'react';
import Timer from './Timer';const ParentComponent = () => {const timerRef = useRef(null);return (<div><h3>父组件控制子组件计时器</h3><button onClick={() => timerRef.current.start()}>开始</button><button onClick={() => timerRef.current.stop()}>停止</button><Timer ref={timerRef} /></div>);
};export default ParentComponent;

解释：

在 Timer 组件中，使用 forwardRef 和 useImperativeHandle 来暴露 start 和 stop 方法，使得父组件可以控制子组件的行为。
父组件通过 timerRef.current.start() 和 timerRef.current.stop() 来调用子组件的计时器控制方法。

总结

React refs 是一种强大的工具，它使得我们可以直接访问 DOM 元素和组件实例。虽然 refs 有时被认为是"不太 React 化"的方式，但在特定场景下，refs 可以大大简化开发，避免过多的状态管理。常见的应用场景包括获取 DOM 元素、管理焦点、文本选择、集成第三方库等。

关键要点：

使用 refs 时要谨慎，因为它打破了 React 的声明式编程范式。
refs 适用于那些无法通过状态管理来处理的需求，如焦点控制和与非 React 代码的交互。