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

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

回答：
useRef 和 useState 都可用于在组件中保存值，但它们在行为上有本质区别：

• useState：用于保存需要触发组件重新渲染的状态。当通过 setState 更新值时，React 会安排一次重新渲染，使 UI 与状态同步。
• useRef：用于保存一个可变的值（.current 属性），该值的变更不会触发组件重新渲染。它主要用于访问 DOM 元素或保存在渲染之间需要保持但不触发 UI 更新的数据。

解析：
在函数组件每次渲染时，都会重新执行函数体。如果使用普通变量保存数据，该数据会在每次渲染时被重置。而 useRef 创建的对象在组件整个生命周期内保持不变（即其引用不变），其 .current 属性可被读写，且修改不会导致重新渲染。

例如，若你想记录组件被点击的次数但不希望每次点击都触发渲染（比如用于日志、计时器 ID、上次 props 等场景），应使用 useRef；而如果点击次数需要显示在界面上，则必须用 useState。

典型错误：尝试用 useRef 来保存需要在 UI 中反映的值，结果发现界面不更新——因为 useRef 的变更不会触发重渲染。

示例代码对比：

// 使用 useState（点击更新 UI）
const [count, setCount] = useState(0);
const handleClick = () => setCount(c => c + 1);

// 使用 useRef（点击不更新 UI，但值在后台变化）
const countRef = useRef(0);
const handleClick = () => {
  countRef.current += 1;
  console.log(countRef.current); // 值会变，但组件不会重渲染
};