解决内存问题：Chrome 开发工具中的 FiberNode 是什么？答案

【问题标题】：Solving Memory Issues: What is a FiberNode in Chrome Dev Tools?解决内存问题：Chrome 开发工具中的 FiberNode 是什么？
【发布时间】：2020-12-29 05:05:43
【问题描述】：

所以我目前正在尝试使用Chrome Dev Tools 中的堆快照来调试我们的 Nodejs/React 应用程序中的一些内存泄漏，经过一些分析，看起来应用程序中增长最快的部分是Objects, Arrays, Strings, and this thing called a FiberNode。看起来所有这些中增长最快的最终是FiberNode，但我不知道在我们的代码中引用了什么。我在网上搜索过，在Chrome Dev Tools 的任何地方都找不到对FiberNode 的引用，因此找到我们的内存泄漏变得更加困难。在Chrome Dev Tools 中扩展FiberNode 时，我得到了无法理解的混乱，我无法理解（见下图）。

上图显示了最后一张快照与之前一张快照的比较，我已将其设置为按Size Delta 降序排序。如果有人知道这个FiberNode 指的是什么，那么这将有助于更好地解决这些内存问题。提前致谢！

【问题讨论】：

这是一个 React 的东西，devtools 只是显示它的类名。另请参阅crbug.com/1064433
@wOxxOm 如果它是 React 的东西，那么我该如何调试它以了解泄漏的来源？我注意到的一些人说bound_this in native_bind() 与onclick() and onchange() 一起找到。这是否意味着 onclick 和 onchange 没有得到释放？开发工具有点难以理解。
IDK。让我们等待反应专家。

标签： reactjs memory-leaks google-chrome-devtools

【解决方案1】：

FiberNode 只是一个内部数据结构，react 使用它来执行协调过程（跟踪您的应用状态并执行屏幕更新）。有关对帐过程的更多信息，您可以参考official react docs。

此处使用的算法称为 Fiber，从 react 16 开始使用（在此版本之前使用了另一种实现）。

在后台，从 render 方法返回的每个 React 元素都被合并到 Fiber 节点树中，Fiber 节点是一个可变对象，包含组件状态和 DOM，并且与 React 元素不同，它们不会在每次渲染时重新创建。

【讨论】：