Question

Figwheel显示下面的代码就好了。但我必须刷新页面才能看到任何变化。 Figwheel有什么变化来显示变化？是否有强制重绘的命令，而不会丢失应用程序状态？

BTW： 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

来自docs：

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

Reagent的示例reload hook plus配置：

(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"}}}

/编辑

请注意，重新使用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有一个标识为app的节点并调用init。 project.cljs指定on-jsload如下：

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

这绝对应该更新组件更新页面。如果它没有做你想要的，我可能会误解你的问题。

Answer 2

需要通知试剂有关状态更改的信息，以便在屏幕上重新呈现受影响的组件。您的代码还没有任何可以监视的内部状态，以便决定是否需要重新渲染。

您可以将应用状态存储在试剂原子中。当您对试剂组件中的试剂原子（即您的案例中的simple-example组件）进行取消引用时，会将事件侦听器设置为state atom，以便在任何时候更改组件都将重新呈现。

将以下内容放在simple-example：

的定义之前

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

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

然后在@counter的函数体内的任何位置放置simple-example deref调用。这样，函数的初始调用将安装状态更改侦听器。

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

Figwheel没有检测到我的代码中的大多数变化

2 个答案: