Day 11：Ref 原理

Day 11：Ref 原理

核心概念

Ref = React 的"直达车"，绕过渲染直接操作 DOM

不用 Ref	用 Ref
只能通过状态影响 DOM	直接操作 DOM 节点
受 React 管理	绕过 React 控制

---

useRef

function TextInput() {
  const inputRef = useRef(null);
  
  function handleFocus() {
    inputRef.current.focus();
  }
  
  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleFocus}>聚焦</button>
    </div>
  );
}

useRef vs useState

特性	useState	useRef
变化触发渲染	✅	❌
存储值	任意值	对象.current
用途	需要渲染的数据	不需要渲染的数据

---

forwardRef

让父组件获取子组件的 DOM

// 子组件
const FancyButton = forwardRef((props, ref) => (
  <button ref={ref} className="fancy">
    {props.children}
  </button>
));

// 父组件
function Parent() {
  const buttonRef = useRef(null);
  return <FancyButton ref={buttonRef}>Click</FancyButton>;
}

---

常见使用场景

场景	示例
DOM 操作	聚焦、测量尺寸
动画	控制 CSS 动画
第三方库	D3.js、Three.js
存储上次值	访问上一次的 state

---

自测答案

1. useRef vs useState：useRef 变化不触发渲染
2. forwardRef：让父组件访问子组件 DOM
3. 为什么不变触发渲染：返回稳定引用对象
4. 典型场景：DOM 操作、动画、第三方库