时间戳

首页 > 解决方案 > Can i use (if) as a form-2 reagent render-function

clojurescript - Can i use (if) as a form-2 reagent render-function

问题描述

I use an (if) condition as form-2 render-function in this way:

(defn bro [dex]
      (let [yo (inc dex)]
           (if true
               [:div (str yo)])))

instead of this way:

(defn bro [dex]
      (let [yo (inc dex)]
           (fn [dex]
               (if true
                   [:div (str yo)]))))

Is a problem if i use an (if) statement instead of an (fn) function? And what happens when the statement gone false? The render function returns with nil?

标签： clojurescriptreagentreagent-forms

解决方案

不，这不会像你期望的那样工作。要了解差异，请考虑以下两个组件：

(defn test-component-if []
  (let [a (atom 1)
        _ (.log js/console "let in -if")]
    (if (odd? @a)
      [:div
       [:p "odd"]
       [:button {:on-click #(swap! a inc)}
        "inc"]]
      [:div
       [:p "even"]
       [:button {:on-click #(swap! a inc)}
        "inc"]])))

(defn test-component-fn []
  (let [a (atom 1)
        _ (.log js/console "let in -fn")]
     ;; I dub thee test-inner
    (fn []
      (if (odd? @a)
        [:div
         [:p "odd"]
         [:button {:on-click #(swap! a inc)}
          "inc"]]
        [:div
         [:p "even"]
         [:button {:on-click #(swap! a inc)}
          "inc"]]))))

test-component-fn按预期工作，而test-component-if没有。这是为什么？好吧，当一个试剂组件可以返回两件事之一时（我忽略了“类型 3”组件，因为它与反应知识挂钩）。它可以返回

  1. 一个向量
  2. 另一个功能

如果它返回一个向量，函数本身就成为渲染函数，在我们的例子test-component-if中。当它返回一个函数时，返回的函数，而不是原始函数，是渲染函数。在这种情况下，我所配音的test-inner

当 Reagent 调用渲染函数时，它会跟踪函数访问的原子，并且每当该原子发生变化时，它都会调用渲染函数。那么当我们使用时会发生什么test-component-if？

  1. 试剂调用test-component-if
  2. 我们的 let 子句将一个新原子绑定a到 1。
  3. 返回一个向量
  4. 我们点击按钮
  5. 原子a递增
  6. 试剂看到变化a并调用test-component-if
  7. 我们的 let 子句将一个新原子绑定a到 1。（与我们之前的不同原子a）
  8. 哎呀！

总是 1。您可以通过查看控制台来验证这a一点，并看到每次单击按钮时都会打印消息。

现在怎么样test-component-fn？

  1. 试剂调用test-component-fn
  2. 我们的 let 子句将一个新原子绑定a到 1。
  3. test-component-fn返回test-inner 关闭a
  4. 试剂调用test-inner
  5. 我们点击按钮
  6. a递增
  7. 试剂看到变化a并调用test-inner
  8. 根据需要重复多次。

您可以验证 let only 在控制台上再次执行。根据需要多次单击按钮，消息只会在第一次呈现时打印。

就if没有else子句而言，这确实会返回 nil。在这种情况下使用when而不是使用是惯例if，这清楚地表明缺少 anelse是有意的。它还具有包含隐式do的优点。至于 Reagent 遇到这种情况会怎么做nil，大多数情况下它会默默地移除它，什么也不显示。

推荐阅读