javascript - Reagent 不会在 let 内部使用 deref-ing 重新渲染组件

Question

我有原子foo:

(defonce foo (r/atom "foo"))

我有父组件:

(defn parent-component []
  (js/setTimeout #(reset! foo "bar") 5000)
  (child-component {:foo foo}))

我有子组件:

(defn child-component [props]
  (let [derefed (deref (:foo props))]
    (fn []
      [:div
       [:p derefed]
       [:p (deref (:foo props))]])))

重置 foo 后仅更新第二段。

为什么会这样？

Answer 1

来自关于 Form-2 组件的重构文档:https://github.com/Day8/re-frame/wiki/Creating-Reagent-Components#form-2--a-function-returning-a-function .

需要在内层函数中再次重复外层函数参数:

(defn child-component [props]
  (fn [props]
    (let [derefed (deref (:foo props))]
      [:div
       [:p derefed]
       [:p (deref (:foo props))]])))