为什么组件无法在 Reagent 中正确呈现？

Question

当使用 Clojurescript 在 Reagent 上仔细阅读 this post 时，我尝试了不同的方法来实现 timer-component 组件。然而，我的第一次尝试没有成功：

(defn timer-component []
  (fn []
    (let [seconds-elapsed (r/atom 0)]
      (js/setTimeout #(swap! seconds-elapsed inc) 1000)
      [:p (str "Expired time: " @seconds-elapsed)])))

由于调试日志语句显示计时器仍会定期调用并且 seconds-elapsed 变量仍会正确更新。但是，显示不会更新，组件始终显示 "Expired time: 0".

与博客 [=26=] 中的代码示例相比，我的组件交换了 fn 和 let 声明，此修改似乎阻止了正确显示，但没有正确更新零件。我的期望是组件既更新又正确显示，或者既不更新也不显示。

我的问题是为什么会这样？这是 Reagent 中的错误还是我对 API 的一些误用？

Answer 1

您总是看到相同的值，因为每次（重新）渲染都会调用内部匿名函数。因此，seconds-elapsed 一次又一次地绑定到一个值为 0 的新原子。这不是错误，而是 Reagent 应该如何工作。

您的组件是 "Form-2"，应该在外部函数 timer-component 中声明其本地状态，每个组件只调用一次。 Re-frame documentation explains different forms of Reagent components很好。

Re-frame 文档在 Reagent 教程中的示例中添加注释，这可能有助于澄清：

(defn timer-component []
  (let [seconds-elapsed (reagent/atom 0)]     ;; setup, and local state
    (fn []        ;; inner, render function is returned
      (js/setTimeout #(swap! seconds-elapsed inc) 1000)
      [:div "Seconds Elapsed: " @seconds-elapsed])))

为什么组件无法在 Reagent 中正确呈现？

Why does a component not render correctly in Reagent?

clojurescript

reagent