3

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

顺便说一句：Chrome 的 Disable Cache 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"))))
4

2 回答 2

4

从文档：

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

一个示例 reload hook 加上 Reagent 的配置：

(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有一个 idapp和 calls的节点init。并project.cljs指定on-jsload如下：

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

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

于 2017-09-19T11:05:33.053 回答
0

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

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

将以下内容放在 的定义之前simple-example：

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

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

然后将@counterderef 调用放在simple-example. 这样，函数的初始调用就会安装状态更改侦听器。

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

于 2017-09-19T09:51:27.017 回答