• React hooks依赖数组坑得我差点重写整个组件*

在React的函数式组件中，Hooks的引入无疑是一场革命。它们让我们能够在不编写class的情况下使用state和其他React特性。话说回来，只是因为使用的深入，特别是useEffectuseCallback和useMemo等Hooks的依赖数组问题。往往会让开发者陷入无尽的调试深渊。

我的痛点：

• "为什么我的useEffect总是执行多次？"
• "我修改了状态却没有触发副作用？"
• "这个无限循环问题要怎么解决？"
• "难道要重构所有代码吗？"

我自己就曾因为依赖数组的问题，差点被迫重写整个组件。

依赖数组的基本概念

在React Hooks中，依赖数组是useEffectuseCallback和useMemo等Hooks的第二个参数。它的作用是告诉React，只有当数组中的依赖项发生变化时才重新执行Hook内的逻辑。这种设计是为了调整性能，避免不必要的计算或副作用。

useEffect => {
// 副作用逻辑
},);

"看似简单却暗藏杀机！ "

依赖数组的常见问题

. 依赖项缺失导致的过时闭包

"为什么我的console.log总是输出旧值？" 这是最常见且最隐蔽的问题之一。当你在Hook内部使用了某个变量，但没有将其添加到依赖数组中时可能会导致闭包捕获的是旧的变量值。

function Counter {
const = useState;useEffect => {
const timer = setInterval => {
console.log;// 始终输出0
},1000);return => clearInterval;},)，不过，// ❌缺少count依赖
}

"这让我疯狂地调试了半天！"

• 方法：确保所有Hook内部使用的变量都包含在依赖数组中。说到对于这种情况，
  • 说到推荐方法。使用useRef来获取最新值

    const countRef = useRef;countRef.current = count;

useEffect => { const timer = setInterval => { console.log;},1000)，},);// ✅正确处理 )