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

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

---

一、Refs 的核心作用

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

   const inputRef = useRef(null);
   
   useEffect(() => {
     inputRef.current.focus(); // 自动聚焦输入框
   }, []);
   
   return <input ref={inputRef} />;
   

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

   class Child extends React.Component {
     doSomething() { /* ... */ }
   }
   
   // 父组件
   const childRef = useRef(null);
   childRef.current.doSomething(); // 调用子组件方法
   

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

   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 使用注意事项

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

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

---

四、Refs 的典型使用场景

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

---

五、Refs 与 State 的对比

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

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