なぜこのdefはre-frame todomvcアプリケーションで使用されますか？

Question

は、TODO項目の関数から呼び出されたデフ

(def todo-edit (with-meta todo-input 
         {:component-did-mount #(.focus (r/dom-node %))})) 

以下このファイルには含まれていviews namespace :

todomvc再フレームを参照してください。

「component-did-mount」はreact.jsコンポーネントのライフサイクルのフェーズですが、このdefの目的と意味は分かりません。それはなぜ必要なのですか？

説明してください。

Answer 1

コンポーネントのインストールライフサイクル機能を完全に提供することを目的としています。

defは、todo-editを作成しています。これは、todo-inputであり、domノードがマウントされたときにいくつかのコードが実行されます。 Reagentコンポーネントはdomノードが存在する前に実行される関数なので、通常はフォーカスを呼び出すようなことはできません。関数が返された場合、関数は常にレンダリングを実行します。フォーカスをオンにしたくない場合、フォームは使用できなくなります。

試薬は、メタデータとして添付された関数のライフサイクルメソッドを探します。この入力がマウントされると、domノードのフォーカスメソッドが呼び出されます。

属性を設定するのは軽量の代替方法です。

これを行うためのメタデータを扱うのは難しいので避けてください。

フォーム-3コンポーネント定義は次のようになります。

(defn my-component 
    [x y z] 
    (let [some (local but shared state)  ;; <-- closed over by lifecycle fns 
     can (go here)] 
    (reagent/create-class     ;; <-- expects a map of functions 
     {:component-did-mount    ;; the name of a lifecycle function 
     #(println "component-did-mount") ;; your implementation 

     :component-will-mount    ;; the name of a lifecycle function 
     #(println "component-will-mount") ;; your implementation 

     ;; other lifecycle funcs can go in here 

     :display-name "my-component" ;; for more helpful warnings & errors 

     :reagent-render  ;; Note: is not :render 
     (fn [x y z]   ;; remember to repeat parameters 
      [:div (str x " " y " " z)])}))) 

公式試薬チュートリアルでは、上に示したように、フォーム3のコンポーネントを実行する方法を示しており、代わりにあなたがwith-を使用することを示唆していませんメタ、これは不器用で劣っている。