React 中 useRef 和 useState 在保存可变值时有什么本质区别？

React 中 useRef 和 useState 在保存可变值时有什么本质区别？

回答：
useRef 和 useState 都可用于保存可变值，但本质区别在于：

• useState 用于保存响应式状态。当通过 setState 更新状态时，组件会自动重新渲染，UI 会同步更新。
• useRef 用于保存非响应式的可变值。修改 ref.current 不会触发组件重新渲染，其值在组件整个生命周期内保持不变（引用不变），适用于保存跨渲染周期但不需要触发 UI 更新的数据（如定时器 ID、DOM 引用、前一状态等）。

解析：
例如：

function MyComponent() {
  const [count, setCount] = useState(0);
  const countRef = useRef(0);

  const handleClick = () => {
    setCount(c => c + 1);      // 触发重新渲染
    countRef.current += 1;     // 不触发重新渲染
  };

  return (
    <div>
      <p>State count: {count}</p>
      <p>Ref count: {countRef.current}</p>
      <button onClick={clickHandle}>Increase</button>
    </div>
  );
}

在此例中，点击按钮后，state count 会立即反映在 UI 上，而 ref count 虽然也增加了，但不会导致组件重渲染，因此 UI 上的 “Ref count” 不会实时更新（除非其他状态变化导致组件重新渲染，此时才会显示最新值）。

因此，需要触发 UI 更新时用 useState，仅需保存/读取值而不影响渲染时用 useRef。