React 中 useRef 和 useState 有什么区别？在什么场景下应该使用 useRef 而不是 useState？

React 中 useRef 和 useState 有什么区别？在什么场景下应该使用 useRef 而不是 useState？

回答：
useRef 和 useState 都是 React 的 Hook，但用途和行为有本质区别：

• useState 用于管理组件的状态。当状态值更新时，会触发组件重新渲染。
• useRef 返回一个可变的 ref 对象，其 .current 属性可被直接修改，且修改不会触发重新渲染。它常用于访问 DOM 元素或保存可变值（类似类组件中的实例变量）。

主要区别：

1. 是否触发重渲染：useState 更新会触发重渲染，useRef 不会。
2. 值的可变性：useRef 的 .current 可直接赋值，而 useState 必须通过 setState 更新。
3. 持久性：两者在组件重新渲染时都能保持值，但 useRef 更适合保存跨渲染周期的“非状态”数据。

使用 useRef 而不是 useState 的典型场景：

• 获取 DOM 元素引用（如 input.focus()）。
• 保存计时器 ID（如 setTimeout 返回值），避免每次渲染都重新声明。
• 记录前一次的状态或 props（例如用 ref 保存上一轮的值用于对比）。
• 存储不需要触发 UI 更新的中间变量（如鼠标位置、滚动位置等临时数据）。

示例：

function MyComponent() {
  const [count, setCount] = useState(0);
  const renderCount = useRef(0); // 不需要触发重渲染的计数

  useEffect(() => {
    renderCount.current += 1; // 修改不会导致重新渲染
  });

  return <div>State count: {count}, Render count: {renderCount.current}</div>;
}

总结：
当需要保存数据但不需要触发组件更新时，优先使用 useRef；当数据变化需要反映到 UI 上时，使用 useState。