Question

我有几个选择，但两者看起来都有点滞后，我认为应该有更好的选择。我只是希望能够创建表单，甚至可以动态创建表单（例如，从我的应用程序中向表单添加行），并具有试剂/重新框架/反应适当的访问不同输入的值。

不确定这些中的任何一个是否是最好的选择，因为它们都在每:on-change之后运行函数...

选项＃1 - 将:on-change更新为全局原子

[:input {:value       @new-job-form
         :on-change   #(dispatch [:new-job-form (-> % .-target .-value)])}]

(reg-event-db
 :new-job-form
 (fn [db [_ v]]
   (assoc db :new-job-form v)))

选项＃2 - 更新一些本地状态，仅调度到全局原子:on-blur

(defn text-input
  "adapted from:
  https://yogthos.net/posts/2016-09-25-ReagentComponents.html

  The big idea is this holds local state, and pushes it to the global
  state only when necessary"
  [{:keys [sub-path disp]}]
  (r/with-let [value    (r/atom nil)
               focused? (r/atom false)]
    [:div
     [:input
      {:type      :text
       :on-focus  #(do (reset! value @(subscribe sub-path))
                       (reset! focused? true))
       :on-blur   #(do (dispatch (conj disp @value))
                       (reset! focused? false))
       :value     (if @focused? @value @(subscribe sub-path))
       :on-change #(reset! value (-> % .-target .-value))}]]))

第二个选项稍微不那么滞后，但比原始文本输入更加滞后......

编辑：

选项＃3 - 为了完整性，与重新组合的TODOMVC略有不同的风格

(defn text-input
  "adapted from re-frame's TODOMVC:
      https://github.com/Day8/re-frame/blob/master/examples/todomvc/src/todomvc/views.cljs

  note: this is one-way bound to the global atom, it doesn't subscribe to it"
  [{:keys [on-save on-stop props]}]
  (let [inner (r/atom "")]
    (fn [] [:input (merge props
                          {:type        "text"
                           :value       @inner
                           :on-blur     (on-save @inner)
                           :on-change   #(reset! inner (-> % .-target .-value))
                           :on-key-down #(case (.-which %)
                                           13 (on-save @inner) ; enter
                                           27 (on-stop) ; esc
                                           nil)})])))

[text-input {:on-save #(dispatch [:new-job-form {:path [:a]
                                                         :v    %}])
                     :on-stop #(js/console.log "stopp")
                     :props   {:placeholder "url"}}]

Answer 1

在较低级别重新构建和reagent + React，尝试将重新渲染限制为更改的组件。在您的情况下，如果除了文本字段之外的另一个组件（或整个UI）重新呈现，则可能导致延迟，这是唯一改变的内容。

在您的＆＃34;选项一＆＃34;：

上构建示例

(defn busy-wait [ms]
  (let [start (.getTime (js/Date.))]
    (while (< (.getTime (js/Date.)) (+ start ms)))))

(defn slow-component []
  (busy-wait 2000)
  (.log js/console "Ouch!")
  [:h2 "I was busy"])

(defn main-panel []
  (let [new-job-form (re-frame/subscribe [:new-job-form])
    (fn []
      [:div.container-fluid
        (slow-component)
        [:input       {:value    @new-job-form
         :on-change   #(dispatch [:new-job-form (-> % .-target .-value)])}]
;; etc

每次输入文本时都会导致slow-component重新渲染，并且非常滞后，因为slow-component至少需要2000毫秒进行渲染。

在上述情况下，一个简单的解决方案是提供slow-component作为重新构造的函数，将调用更改为向量，即：

[:div.container-fluid
  [slow-component]

这允许重新框架看到slow-component不需要重新渲染，因为它的数据没有改变。当我们在原始示例中自己调用函数时，我们跳过这个推理：

[:div.container-fluid
  (slow-component)

一个好的做法是在绑定订阅时使用Form-2 components。

如何在Clojure Re-Frame中处理输入元素？

1 个答案: