React中为什么将函数列入useEffect依赖项属于性能优化手段？

为什么不能在useEffect()依赖项中省略函数 #

• React的useEffect完全基于依赖数组的变化判断是否需要重新执行副作用逻辑。组件内部定义的函数每次渲染都会生成全新的引用，且函数作为闭包会捕获当前渲染周期的props、state值，如果故意省略函数依赖，effect内调用该函数时永远只能拿到第一次执行时捕获的旧值，会出现难以排查的脏数据问题，完全不符合React Hooks的设计预期。
• 该规则也是react-hooks/exhaustive-deps ESLint校验规则的核心要求，省略依赖会直接触发校验报错，强制开发者明确所有副作用依赖。

相关性能影响与优化方案 #

如果直接将未做处理的内部函数放入useEffect依赖数组，会出现以下性能问题：

• 函数每次渲染的引用都不同，会触发useEffect无意义的频繁执行，若effect内包含接口请求、大量DOM操作、复杂计算逻辑，会带来明显的额外性能开销，甚至导致页面卡顿、重复请求等异常。

对应的常规优化手段如下：

• 若函数不需要依赖任何组件内的props、state，可直接将其定义在组件外部，保证引用永久固定，放入依赖数组也不会触发effect重复执行。
• 若函数需要依赖组件内部状态，使用useCallback()包裹该函数，同时将函数自身的依赖项明确列入useCallback的依赖数组，只有当函数自身的依赖发生变化时，函数引用才会更新，也就只会在必要时触发useEffect重新执行。

注意：除非你100%确认该函数的引用变化不需要触发副作用更新，否则不要手动加注释关闭exhaustive-deps校验，这几乎都会为后续维护埋下闭包隐患。

内容的提问来源于stack exchange，提问作者Ihsan Müjdeci