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 原子增加会触发组件的重新渲染。

Answer 2

来自docs：

Setting :figwheel true or :figwheel { :on-jsload "example.core/reload-hook" } will automagically insert the figwheel client code into your application. If you supply :on-jsload the name of a function, that function will be called after new code gets reloaded.

重新加载挂钩示例和试剂配置：

(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-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"}
#_(...)}}

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

Figwheel 没有检测到我代码中的大部分更改

Figwheel doesn't detect most changes in my code

clojure

clojurescript

figwheel