Figwheel 没有检测到我的代码中的大多数更改

Question

Figwheel 可以很好地显示下面的代码。但我必须刷新页面才能看到任何更改。 Figwheel 必须改变什么才能显示变化？有没有强制重绘而不丢失应用程序状态的命令？

顺便说一句：Chrome 已禁用缓存true，并且在保存文件时会出现 CLJS 图标。

(defn simple-example []
  [ui/mui-theme-provider {:mui-theme (get-mui-theme
                                       {:palette {:text-color (color :blue800)}})}
   [:div
    [ui/app-bar {:title                 "Hi all"
                 :icon-class-name-right "muidocs-icon-navigation-expand-more"}]
    [ui/paper
     [:div
      [ui/tabs
       [ui/tab {:label "Menu" :value "0"}
        [:div "Hello world"]]]]]]]))

(defn ^:export run []
  (render [simple-example]
          (js/document.getElementById "app")))) 

Answer 1

需要通知 Reagent 状态更改以在屏幕上重新渲染受影响的组件。您的代码还没有任何内部状态可以被观察以确定是否需要重新渲染。

您可以将您的应用状态存储在试剂原子中。当您取消引用试剂组件（在您的情况下为 simple-example 组件）中的试剂原子时，会为状态原子设置一个事件侦听器，以便任何时候它更改组件都会重新呈现。

在simple-example的定义之前添加以下内容：

(defonce counter (reagent.core/atom 0))
(swap! counter inc)

这会创建一个名为counter 的状态，如果它还不存在的话。它还会立即增加它，因此任何已注册的组件都将被刷新。

然后在simple-example 的函数体中的任何位置放置一个@counter deref 调用。这样，函数的初始调用就会安装状态变化监听器。

现在，每当您修改代码时，命名空间都会重新加载，因此counter atom 会增加，从而触发组件的重新渲染。

Answer 2

来自docs：

设置:figwheel true 或:figwheel { :on-jsload "example.core/reload-hook" } 会自动将figwheel 客户端代码插入到您的应用程序中。如果您提供:on-jsload 函数的名称，则该函数将在新代码重新加载后被调用。

Reagent 的 reload hook 和配置示例：

(ns your-namespace.core
  (:require [reagent.core :as r]))


(defn render [view]
  (let [node (.getElementById js/document "app")]
    (r/render-component view node)))


(defn rerender []
  (let [node (.getElementById js/document "app")]
    (r/unmount-component-at-node node)
    (render [:div "Reloading"]))


(defn ^:export reload []
  (rerender))

然后在你的project.clj:

:cljsbuild {:builds {:dev {:source-paths ["src"] 
                           :figwheel     {:on-jsload "your-namespace.core/reload"}}}

/编辑

请注意，re-frame 使用 Reagent。在重新构架的情况下，我建议从re-frame-template 开始。例如，

lein new re-frame your-project-name # options, e.g., +re-frisk +cider

这将给出一个默认的core.cljs，如下所示：

(defn dev-setup []
  (when config/debug?
    (enable-console-print!)
    (println "dev mode")))

(defn mount-root []
  (re-frame/clear-subscription-cache!)
  (reagent/render [views/main-panel]
                  (.getElementById js/document "app")))

(defn ^:export init []
  (re-frame/dispatch-sync [:initialize-db])
  (dev-setup)
  (mount-root))

index.html 有一个 id 为 app 的节点并调用 init。而project.cljs 指定on-jsload 如下：

:cljsbuild
{:builds
 [{:id           "dev"
   :source-paths ["src/cljs"]
   :figwheel     {:on-jsload "your-project-name.core/mount-root"}
#_(...)}}

这应该绝对更新带有组件更改的页面。如果它不符合您的要求，我可能误解了您的问题。