React usePrevious Hook：追踪先前的状态与属性（2026）
React 在每次渲染时都会提供状态和属性的当前值，但没有内置的方法来询问之前的值是什么。因此，每个人都复制同样的十行代码模板：在 useEffect 中将值存储在一个引用对象中，然后返回 ref.current。这在演示中有效，也能发布到生产环境，但有一天，“计数增加 ↑”的指示器开始声称没有任何变化——因为组件由于完全无关的原因重新渲染，而引用对象意外地覆盖了自己的历史记录。
来自 @reactuses/core 的 usePrevious 追踪的是先前不同的值，而不是先前渲染时的值，它采用了 React 官方文档本身推荐的模式——无需引用对象，无需副作用，无偏差。整个实现只有十二行代码，因此本文将深入探讨经典模板中的真实缺陷，解释为什么这种修复看起来不合规但实际上并非如此，以及可能导致无限循环的一个陷阱。优先支持 TypeScript。
经典模板及其脆弱之处
这是存在于成千上万篇博客文章中，可能也存在于你的一些代码库中的版本：
function usePrevious<T>(value: T): T | undefined {
const ref = useRef<T>();
useEffect(() => {
ref.current = value;
});
return ref.current;
}
渲染发生后，副作用触发并将当前值复制到引用对象中。下一次渲染时读取该引用对象——得到的是上一次渲染时的值。微妙之处在于最后一句话：这个钩子函数返回的是上一次渲染时的值，而不是上一个值。只有当你的组件重新渲染的唯一原因是值发生变化时，这两者才是相同的。但这种情况从来不会一直保持不变。
看看它是如何出错的。一个带有方向指示器的计数器，加上一个无关的状态项：
function Counter() {
const [count, setCount] = useState(0);
const [dark, setDark] = useState(false);
const 免责声明：本文内容来自互联网，该文观点不代表本站观点。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请到页面底部单击反馈，一经查实，本站将立刻删除。
