Почему этот def используется в приложении re-frame todomvc?

Question

См. Переименование пространства имен todomvc views:

Этот файл содержит следующее определение

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

который вызывается из функции todo-item.

Я понимаю, что 'component-did-mount' - это фаза в жизненном цикле компонента act.js, но я не понимаю ни цели, ни значения этого определения. Зачем это нужно?

Пожалуйста, объясни.

Answer 1

Цель состоит в том, чтобы полностью обеспечить функцию жизненного цикла "компонент сделал монтирование".

Def создает todo-edit который просто todo-input который будет запускать некоторый код при монтировании узла dom. Обратите внимание, что компоненты Reagent - это функции, которые выполняются до того, как узел dom существует, поэтому обычно вы не можете делать такие вещи, как вызов focus. Если они возвращают функцию, функция запускается при любом рендеринге, на котором вы бы не хотели фокусироваться, иначе форма была бы непригодной для использования.

Реагент ищет методы жизненного цикла для функций, прикрепленных как метаданные. Когда этот вход смонтирован, он вызовет метод focus на узле dom.

Установка атрибута автофокуса является легкой альтернативой.

Работа с метаданными для этого неуклюжа и ее следует избегать.

Определение компонента 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, что является неуклюжим и неполноценным.