Question

请参阅re-frame todomvc views namespace :

此文件包含以下def

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

从todo-item函数调用。

我理解'component-did-mount'是react.js组件生命周期中的一个阶段，但我不明白这个def的目的和含义。为什么有必要？

请解释。

Answer 1

目的完全是提供组件安装生命周期功能。

def正在创建todo-edit，它只是一个todo-input，它会在挂载dom节点时运行一些代码。请注意，Reagent组件是在dom节点存在之前运行的函数，因此您通常无法执行调用焦点等操作。如果它们返回一个函数，则该函数将一直运行渲染，您不希望将其置于焦点上，否则表单将无法使用。

Reagent在附加为元数据的函数中查找生命周期方法。安装此输入时，它将调用dom节点上的focus方法。

设置autofocus属性是一种轻量级选择。

使用元数据来执行此操作非常笨重，应该避免使用。

Form-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)])})))

官方试剂教程没有说明如何以上面显示的方式进行Form-3组件，而是建议你使用with-meta，这是笨拙和低劣的。

为什么在重新构建todomvc应用程序中使用此def？

1 个答案: