React Refs：直接操作DOM的终极指南

在 React 中，Refs（引用） 是一种特殊的机制，用于直接访问 DOM 节点或 React 组件实例。它的核心作用是绕过 React 的声明式数据流，在特定场景下直接操作底层元素或组件。以下是 Refs 的主要作用和使用场景：

一、Refs 的核心作用

直接访问 DOM 元素

当需要操作原生 DOM 时（如聚焦输入框、测量元素尺寸、触发动画等）：

jsx 复制代码

const inputRef = useRef(null);

useEffect(() => {
  inputRef.current.focus(); // 自动聚焦输入框
}, []);

return <input ref={inputRef} />;

访问类组件实例

获取子组件（仅限类组件）的实例并调用其方法：

jsx 复制代码

class Child extends React.Component {
  doSomething() { /* ... */ }
}

// 父组件
const childRef = useRef(null);
childRef.current.doSomething(); // 调用子组件方法

存储可变值（不触发重渲染）

保存与渲染无关的变量（如定时器 ID、缓存数据），修改时不会触发组件更新：

jsx 复制代码

const timerRef = useRef(null);

useEffect(() => {
  timerRef.current = setInterval(() => {
    // 定时任务...
  }, 1000);
  return () => clearInterval(timerRef.current);
}, []);

二、Refs 的创建方式

方式	适用场景	示例
`useRef` Hook	函数组件	`const ref = useRef(initialValue)`
`createRef`	类组件	`this.ref = React.createRef()`
回调 Refs	动态 Refs	`<div ref={el => this.ref = el}>`

️ 注意：函数组件无法直接通过 Ref 获取实例（需配合 forwardRef 或 useImperativeHandle）

三、Refs 使用注意事项

避免过度使用：多数场景应优先使用 React 的声明式编程（通过 state/props 控制 UI）
不要在渲染期间访问 .current：Refs 的值在渲染后才更新
避免用作控制组件的状态：Refs 修改不会触发重渲染

函数组件需特殊处理 ：

jsx 复制代码

// 子组件（暴露方法给父组件）
const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    doSomething: () => { /* ... */ }
  }));
  return <div>...</div>;
});

// 父组件
const childRef = useRef();
childRef.current.doSomething();

四、Refs 的典型使用场景

表单控制：输入框聚焦、选中文本
媒体操作：播放/暂停视频、控制音频
动画控制：直接操作 DOM 元素样式
第三方库集成：如 D3.js 直接操作 DOM
复杂计算缓存：存储上一次计算结果

五、Refs 与 State 的对比

特性	Ref	State
触发重渲染	❌	✅
可变性	✅ 直接修改 `.current`	❌ 必须用 `setState()`
数据类型	任意值	任意值
作用范围	组件生命周期内	组件生命周期内
主要用途	操作 DOM/保存变量	驱动 UI 更新

✅ 总结：Refs 是 React 提供的"逃生舱"，用于处理 React 抽象层之外的 DOM 操作和特殊交互场景。正确使用 Refs 可以解决特定问题，但滥用会影响代码的可维护性。