Figwheelは私のコードのほとんどの変更を検出しません

Question

Figwheelはコードをちょうどいいが表示します。しかし、変更を見るためにページを更新する必要があります。 Figwheelが変更を表示するためには何を変更する必要がありますか？アプリケーションの状態を失うことなく、再描画を強制するコマンドはありますか？

ところで：クロムが無効にキャッシュ真を持っており、ファイルが保存されるとき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

：

:figwheel trueまたは:figwheel { :on-jsload "example.core/reload-hook" }を設定すると、自動的にアプリケーションにfigwheelクライアントのコードを挿入します。関数の名前を:on-jsloadに指定すると、その関数は新しいコードがリロードされた後に呼び出されます。

試薬たとえばリロードフックプラス設定：再フレームは試薬を使用しています

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

/編集

注：お使いのproject.cljで

(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)) 

そして。再フレームの場合は、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"} 
#_(...)}} 

これは絶対に変更コンポーネントでページを更新する必要があります。それがあなたが望むことをしなければ、私はあなたの質問を誤解しているかもしれません。

Answer 2

影響を受けるコンポーネントを画面上に再描画するには、状態の変更について試薬に通知する必要があります。再レンダリングが必要かどうかを判断するために、コードにはまだ内部状態がありません。

あなたのアプリの状態を試薬原子に保存することができます。試薬コンポーネント（試薬ケースのsimple-exampleコンポーネント）の試薬原子を逆参照すると、イベントリスナーが状態原子に設定されるので、いつでもコンポーネントが再描画されます。

simple-exampleの定義の前にちょうど次を置き：

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

これは状態を作成し、それがまだ存在しない場合counterと呼ばれます。また、すぐにそれを増やして、すでに登録されているコンポーネントがリフレッシュされるようにします。

simple-exampleの関数本体のどこにでもderef呼び出しを配置し​​ます。このようにして、関数の最初の呼び出しは状態変更リスナーをインストールします。

コードを変更するといつでもネームスペースがリロードされ、counterアトムが増加してコンポーネントの再レンダリングをトリガします。 docsから