为什么在 re-frame todomvc 应用程序中使用此 def？

Question

此文件包含以下定义

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

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

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

请说明。

Answer 1

目的完全是提供component-did-mount生命周期功能

def 正在创建 todo-edit，它只是一个 todo-input，当安装 dom 节点时，它将运行一些代码。请注意，Reagent 组件是在 dom 节点存在之前运行的函数，因此您通常不能执行诸如调用焦点之类的操作。如果他们 return 一个函数，该函数运行永远呈现，您不想调用焦点或表单将无法使用。

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，比较笨拙。

为什么在 re-frame todomvc 应用程序中使用此 def？

Why is this def used in the re-frame todomvc app?

clojure

clojurescript

reagent

re-frame