一、完整代码示例（React 18+）
import { useState, useRef, useEffect } from 'react'; // 自定义 Hook：usePrev，保存上一次渲染的值 function usePrev(value) { const ref = useRef(); // 每次 value 变化后，把当前值存入 ref，供下一次渲染读取 useEffect(() => { ref.current = value; }, [value]); // 组件渲染阶段，返回 ref.current（此时还是上一次的值） return ref.current; } // 使用示例：计数器 export default function Counter() { const [count, setCount] = useState(0); // 拿到上一次的 count const prevCount = usePrev(count); return ( <div style={{ padding: 20 }}> <h2>usePrev 示例：计数器</h2> <p>现在的值：{count}</p> <p>上一次的值：{prevCount ?? 'undefined（首次渲染）'}</p> <button onClick={() => setCount(c => c + 1)}>加 1</button> <button onClick={() => setCount(c => c - 1)} style={{ marginLeft: 8 }}>减 1</button> </div> ); }二、运行效果说明
表格
| 渲染次数 | count（当前值） | prevCount（返回值） | 说明 |
|---|---|---|---|
| 第 1 次 | 0 | undefined | useEffect还没执行，ref.current初始为undefined |
| 第 2 次 | 1 | 0 | 上一次渲染的count是0，已被存入ref |
| 第 3 次 | 2 | 1 | 上一次渲染的count是1 |
核心逻辑：
- 组件渲染时，
usePrev直接返回ref.current，此时它还是上一次的值。 - 渲染完成后，
useEffect才会执行，把最新的value存入ref，供下一次渲染读取。
三、进阶用法：监听值的变化
你可以用它做一个 “值变化监听” 的效果：
function App() { const [count, setCount] = useState(0); const prevCount = usePrev(count); useEffect(() => { if (prevCount !== undefined && prevCount !== count) { console.log(`count 从 ${prevCount} 变成了 ${count}`); } }, [count, prevCount]); return ( <div> <p>count: {count}</p> <button onClick={() => setCount(c => c + 1)}>加 1</button> </div> ); }四、注意事项 & 坑点
第一次渲染返回
undefined因为useRef初始值为空，useEffect在渲染完成后才执行，所以首次渲染拿到的是undefined。 解决方法：可以给useRef设初始值，或使用useLayoutEffect（不推荐，可能影响性能）。useEffect是异步的在useEffect之外直接读取ref.current，拿到的是上一次的值，这正是usePrev的设计目的。只能用于组件 / 自定义 Hook 顶层不能放在条件判断、循环里调用，这是 React Hook 的通用规则。
框架：提升大语言模型性能的关键技术)
