如何缓存或防止重新渲染大型试剂组件
How to cache or prevent re-render of large reagent component
我有一个试剂单页申请。在根组件中，我有一个路由调度程序，它根据路由呈现组件。类似于：
(defn page []
[(get component-lookup @current-page-name)])
我有一个列表页和一个详情页，用户经常来回切换。
问题是，在这两个页面之间切换会破坏并重新创建整个页面的组件。这会显着减慢页面转换速度，尤其是在移动设备中。相比之下，从一个详细页面切换到另一个页面非常快，因为 React 认为只有少数组件需要重新渲染。
我的第一次优化尝试是让两个页面始终呈现，但在它们不可见时添加 display:none。这加快了页面转换，但改变了生命周期方法的含义。例如，component-did-mount 会执行，但组件不可见，我无法更新其滚动位置。
有更好的方法吗？也许可以卸载组件树，将其与其子组件和 states/virtual dom 一起保存，以便稍后使用新道具重新安装？
我认为如果不分叉 React，您将无法做到这一点。生命周期本质上与对虚拟 dom 的修改相关联——这就是它们存在的全部意义。
令人惊讶的是，仅渲染 DOM 元素太慢了，除非您的页面有数千个 dom 元素或大量媒体。 mount 期间你在做什么？如果它是计算密集型的，我会看看你是否可以分离出该逻辑并将其缓存起来，以便它是一个切换组件的轻量级过程。
我有一个试剂单页申请。在根组件中，我有一个路由调度程序，它根据路由呈现组件。类似于：
(defn page []
[(get component-lookup @current-page-name)])
我有一个列表页和一个详情页，用户经常来回切换。
问题是，在这两个页面之间切换会破坏并重新创建整个页面的组件。这会显着减慢页面转换速度，尤其是在移动设备中。相比之下，从一个详细页面切换到另一个页面非常快，因为 React 认为只有少数组件需要重新渲染。
我的第一次优化尝试是让两个页面始终呈现，但在它们不可见时添加 display:none。这加快了页面转换，但改变了生命周期方法的含义。例如，component-did-mount 会执行，但组件不可见，我无法更新其滚动位置。
有更好的方法吗？也许可以卸载组件树，将其与其子组件和 states/virtual dom 一起保存，以便稍后使用新道具重新安装？
我认为如果不分叉 React，您将无法做到这一点。生命周期本质上与对虚拟 dom 的修改相关联——这就是它们存在的全部意义。
令人惊讶的是，仅渲染 DOM 元素太慢了，除非您的页面有数千个 dom 元素或大量媒体。 mount 期间你在做什么？如果它是计算密集型的，我会看看你是否可以分离出该逻辑并将其缓存起来，以便它是一个切换组件的轻量级过程。