为什么这个def会在re todomvc应用程序中使用？

Question

请参见重新框架todomvc 视图命名空间：。

此文件包含以下def

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

它是从todo-item函数调用的。

我理解‘组件-完成-挂载’是react.js组件生命周期中的一个阶段，但我不理解这个def的目的和意义。为什么有这个必要？

请解释一下。

Answer 1

其目的完全是提供组件完成的挂载生命周期功能。

def正在创建todo-edit，它只是一个todo-input，它将在todo-input节点挂载时运行一些代码。请注意，Reagent组件是在dom节点存在之前运行的函数，因此您通常不能做诸如调用焦点之类的事情。如果它们返回一个函数，则该函数将一直运行，您将不想调用focus，否则该表单将不可用。

试剂寻找作为元数据附加的函数的生命周期方法。当这个输入被挂载时，它将调用dom节点上的focus方法。

设置自动对焦属性是一种轻量级的替代方法。

使用元数据来做这件事是笨重的，应该避免。

表单-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组件，而是建议您使用-meta，这是笨拙和低劣的。