498 - 《React Refs》

趁着 React 19 正式发布，重新看一遍 Refs，做下笔记。

1、Refs 是逃生舱，允许用户可以，1）访问 DOM 节点，2）保存不需要触发 re-render 的值。比如。

1）DOM 操作。

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

2）保存不需要触发 re-render 的值。

function Timer() {
  const ref = useRef(null);
  useEffect(() => {
    ref.current = setInterval(fn, 1000);
    return () => clearInterval(ref.current);
  }, []);
}

2、Refs 最佳实践。

1）优先用声明式方案，比如 autofocus vs. ref 。

// 🚫 避免
<div ref={el => el?.focus()} />

// ✅ 使用
<input autoFocus />

2）不要在渲染期间读写 ref。

function MyComponent() {
  // 🚫 避免在渲染时读写 ref
  const value = myRef.current;
  
  // ✅ 在事件处理器中使用
  function handleClick() {
    myRef.current.focus();
  }
}

3）callback refs 优于 useRef + useCallback。

// 🚫
const ref = useRef(null);
use