React 为啥将函数包含在依赖项列表中被认为是一种性能优化？

Posted 2023-03-17

【中文标题】React 为啥将函数包含在依赖项列表中被认为是一种性能优化？

【英文标题】：React Why is it considered a performance optimisation to include functions in the list of dependencies?React 为什么将函数包含在依赖项列表中被认为是一种性能优化？

【发布时间】：2021-11-27 12:35:34

【问题描述】：

根据docs，我们不想从useEffect() 的依赖项中省略函数。为什么是这样？对性能有何影响？

【参考方案1】：

如果你省略了函数并且你的组件增长了，那么在某个时间点你的函数可能需要一些 props 并且间接地你的影响可能在于依赖关系。

这就是为什么建议将不需要 props 或 state 的函数提升到组件之外，并将仅由 effect 使用的函数拉到该 effect 内部。 如果useEffect 仍然需要函数作为依赖项，则将它们包装在useCallback 中。

这样我们不再需要考虑传递依赖。我们的依赖数组不再撒谎：我们确实没有在我们的效果中使用来自组件外部范围的任何东西。而且您的代码是高性能且最佳的。

refer more here: moving-functions-inside-effects

【讨论】：

这听起来更像是一个建议，因此很容易跟踪您的函数使用的依赖项。拥有这些“传递依赖”本身并不是一个真正的问题。