当用户浏览 SPA 应用程序时,React.js 会实例化其组件多少次?

How many times does React.js instantiate its components when user browses a SPA app?

标题说明了一切。当涉及到 SPA 应用程序时,我很好奇组件实例化在 React.js 中是如何工作的。当用户导航到新的 url ("page") 时,不再使用的组件会发生什么情况?如果用户在两个页面之间来回移动,不同的组件将被实例化多少次?当有许多不同的屏幕时,更大的应用程序呢?他们的所有组件都将以某种方式缓存吗?

如果您渲染了 ,现在您不渲染 被移除,GC 收集 。请参阅 WiredPrairie 的 link,其中解释了 的构成。

这适用于每个级别:

  • 路由器
    • 几乎总是有条件的存在,只有路线需要的东西
  • 选项卡、手风琴、下拉列表项等。
    • 介于:
    • 能见度
    • 存在
    • 基于滚动位置的部分存在(最佳性能,最难)
      • 参见'infinite table' 技巧

这只是权衡;小树可以切换可见性,而大树应该切换存在。