如何缓存大型Reagent组件或避免其重复渲染？

嘿，这个问题我太有共鸣了——之前在做Reagent移动端项目时，频繁在列表和详情页切换的卡顿感真的让人头疼。咱们来拆解下问题：你遇到的核心痛点是路由切换时全量卸载/重建组件树，导致重渲染成本过高；而不同详情页切换快是因为React只需要更新局部props（比如详情ID），复用了大部分组件结构。

先说说你之前用display:none的问题：这种方式确实避免了组件销毁，但会打乱生命周期的语义——比如component-did-mount会提前执行，而不可见时无法处理滚动位置这类依赖DOM的操作。下面是几个更优的解决方案，按推荐程度排序：

1. 利用React 18+的Offscreen API（官方推荐） #

React 18引入的Offscreen组件专门解决这类"保留状态的组件隐藏"需求，它能让组件在隐藏时暂停渲染、保留状态，切换回显示时快速恢复，同时完全遵守生命周期语义。

在Reagent中可以通过interop使用：

(defn app-router []
  (let [current-page @current-page-name]
    [:div.app-container
     ;; 为每个页面添加Offscreen包装
     [:> js/React.Suspense {:fallback [:div.loading]}
      [:> js/React.Offscreen {:mode (if (= current-page :list) "visible" "hidden")}
       [list-page]]]
     [:> js/React.Suspense {:fallback [:div.loading]}
      [:> js/React.Offscreen {:mode (if (= current-page :detail) "visible" "hidden")}
       [detail-page]]]]))

• 优点：官方原生支持，自动处理状态保留和渲染暂停，生命周期语义完全正常（比如component-did-mount只执行一次，显示时触发component-did-update）。
• 注意事项：需要确保你的Reagent依赖的React版本是18+，部分旧版Reagent可能需要升级适配。

2. 手动缓存组件状态与DOM引用 #

如果暂时无法升级React版本，可以手动维护页面状态的缓存，在组件卸载时保存关键状态，重新挂载时恢复。

以列表页的滚动位置为例：

;; 全局状态缓存页面关键数据
(def page-state (atom {:list-scroll 0}))

(defn list-page []
  (reagent/create-class
    {:component-did-mount
     (fn [this]
       ;; 挂载时恢复之前保存的滚动位置
       (when-let [scroll-y (:list-scroll @page-state)]
         (set! (.-scrollTop (reagent/dom-node this)) scroll-y)))

     :component-will-unmount
     (fn [this]
       ;; 卸载时保存当前滚动位置
       (swap! page-state assoc :list-scroll (.-scrollTop (reagent/dom-node this))))

     :render
     (fn []
       [:div.list-container {:style {:height "100vh" :overflow "auto"}}
        ;; 你的列表内容
        ])}))

• 扩展思路：除了滚动位置，还可以缓存列表的过滤条件、分页状态等。如果用re-frame管理状态，甚至可以把页面状态存在re-frame的db里，更易于维护。
• 优点：不改变组件的卸载逻辑，完全遵守生命周期语义，移动端适配友好。
• 缺点：需要手动管理每个页面的状态缓存，代码量略多。

3. 组件实例缓存（极致性能） #

如果追求最快的切换速度，可以直接缓存组件的实例，避免每次切换都重新创建组件树。

实现思路是维护一个页面实例的缓存映射，切换路由时复用已有实例：

(def page-cache (atom {}))

(defn cached-page-renderer []
  (let [current-page @current-page-name
        cached-instance (get @page-cache current-page)]
    (if cached-instance
      ;; 复用缓存的组件实例，更新props（如果需要）
      [cached-instance.component (merge cached-instance.props {:key current-page})]
      ;; 创建新组件并缓存
      (let [component (get component-lookup current-page)
            new-instance {:component component :props {}}]
        (swap! page-cache assoc current-page new-instance)
        [component]))))

• 优化点：可以添加缓存清理逻辑，比如当页面超过N分钟未访问时自动清理，避免内存泄漏。
• 优点：切换速度最快，完全复用已有组件树和状态。
• 缺点：需要手动管理缓存的生命周期，可能会出现状态残留的问题（比如用户希望重新进入列表页时重置状态），需要额外处理重置逻辑。

总结选择建议 #

• 如果用React 18+：优先选Offscreen API，最优雅且无额外维护成本；
• 对生命周期语义要求严格：选手动状态缓存，逻辑清晰且兼容性好；
• 追求极致切换速度：选组件实例缓存，但要做好内存和状态管理。

内容的提问来源于stack exchange，提问作者Hendrik Poernama