useEffect与依赖项：常见陷阱
react的useeffect hook允许我们在函数组件中执行副作用操作，如数据获取、订阅或手动更改dom。它的第二个参数是一个依赖项数组，react会比较数组中的值，只有当依赖项发生变化时，副作用函数才会重新执行。这是优化性能和避免不必要副作用的关键机制。
然而，当副作用内部的操作会更新其自身所依赖的状态时，就会出现一个常见的陷手：
const [list, setList] = useState([]);
const [curPage, setCurPage] = useState(0);
const fetchItem = useCallback(async () => {
const data = await callAPI(); // 假设 callAPI 返回一个数据对象
setList(prev => [...prev, data]); // 更新 list 状态
}, []);
useEffect(() => {
if (list.length - 1 < curPage) {
fetchItem().then(() => {
// 一些后续操作
});
} else {
// 另一些操作
}
}, [curPage, fetchItem]); // ESlint 会警告：'list.length' 是缺失的依赖项在这个例子中，useEffect内部的条件判断list.length - 1 < curPage依赖于list状态。同时，fetchItem函数在执行后会调用setList来更新list状态。
问题分析：
- ESLint警告： 如果不将list.length（或list）添加到依赖数组中，ESLint会发出react-hooks/exhaustive-deps警告，提示依赖项缺失。这是因为list.length在effect内部被使用，但不在依赖数组中，可能导致使用到过期的list.length值。
- 无限循环： 如果我们将list或list.length添加到依赖数组中，当fetchItem更新list时，list.length会改变，这将导致useEffect重新执行。如果条件list.length - 1 < curPage仍然为真，fetchItem会再次被调用，再次更新list，从而陷入无限循环。
用户尝试使用ref来存储list.length，但认为其“不常规”。实际上，在特定场景下，useRef正是解决此类问题的“常规”且优雅的方案。
解决方案：利用useRef打破依赖循环
解决这类问题的核心在于：我们希望useEffect在curPage或fetchItem（确保其稳定性）变化时执行，并且能够读取到list的最新值，但list本身的更新不应该立即触发useEffect的再次执行，从而避免无限循环。
useRef提供了一个可变容器，其.current属性可以在不触发组件重新渲染的情况下被更新。我们可以利用这一点来存储list的最新值，并在useEffect中
