0
  • オム「0.8.0」

私は最近、om リポジトリのサンプルコードを使用してomの学習を開始しました。現在、マルチサンプルをチェックしており、このプログラムの動作を理解できています。

「+」ボタンをクリックした後、

  • まず、「Even(or Odd) widget unmounting」が出力されます。
  • 続いて「奇数(or偶数)ウィジェット実装」が出力されます。

しかし、次のコードを追加すると
(偶奇ウィジェットdefmultiコードをdefnコードに変更するだけです)

(defn test-widget
  [props owner]
  (reify
    om/IWillMount
    (will-mount [_]
      (println "Test widget mounting"))
    om/IWillUnmount
    (will-unmount [_]
      (println "Test widget unmounting"))
    om/IRender
    (render [_]
      (dom/div nil
        (dom/h2 nil (str "Test Widget: " (:my-number props)))
        (dom/p nil (:text props))
        (dom/button
          #js {:onClick #(om/transact! props :my-number inc)}
          "+")))))

の代わりにこの関数を使用しようとしましtest-widgetたが、その結果、印刷​​メッセージはありませんでした...

では、この場合の defmulti と defn の違いは何でしょう? これはバグですか、それとも正しい動作ですか?

前もって感謝します。

4

1 に答える 1

2

プロトコル メソッドom/IWillMountom/IWillUnmountは、コンポーネントのマウント/アンマウント時に 1 回だけ呼び出されます。すべてのレンダリングで呼び出されるわけではないため、コンポーネントがマウント/アンマウントされない場合、「+」ボタンをクリックしてもログ メッセージは生成されません。マルチメソッドを使用しても、この動作には影響しません。

マルチメソッド バージョンを使用しているときにログ ステートメントが繰り返される理由は、クリックするたびに異なるコンポーネントが返されるため、「+」をクリックするたびにコンポーネントもマウント/アンマウントされるためです。マウントされ、「+」をクリックするたびにマウントされたままになります。

生成しているログ メッセージは、プレーン関数とマルチメソッドの両方のバージョンのブラウザーの開発者コンソールに表示されますが、コンポーネントがマウント/マウント解除されたときのみ表示され、すべてのレンダリングでは表示されません。

「+」ボタンをクリックすると、単純な関数シナリオで既存のマウントされたコンポーネントで再レンダリングがトリガーされます。コンポーネントのレンダリングごとにログオンする場合は、次の手順を実行する必要があります。

(defn test-widget
  [props owner]
  (reify
    om/IWillMount
    (will-mount [_]
      (println "Test widget mounting"))
    om/IWillUnmount
    (will-unmount [_]
      (println "Test widget unmounting"))
    om/IRender
    (render [_]
      (.log js/console "Rendering test widget!")
      (dom/div nil
               (dom/h2 nil (str "Test Widget: " (:my-number props)))
               (dom/p nil (:text props))
               (dom/button
                #js {:onClick #(om/transact! props :my-number inc)}
                "+")))))

(defn app [props owner]
  (reify
    om/IRender
    (render [_]
      (apply dom/div nil
        (om/build-all test-widget (:widgets props))))))
于 2015-01-20T13:55:41.817 に答える