试剂组件不会在道具更改时重新渲染答案

【问题标题】：Reagent Component not Re-Rendering on Prop Change试剂组件不会在道具更改时重新渲染
【发布时间】：2020-05-25 05:55:53
【问题描述】：

我的 Reagent 组件是一个简单的 div，它有一个 component-did-mount 和一个 component-did-update 钩子。它使用 vexflow 绘制笔记。

(defn note-bar [notes]
  (reagent/create-class
    {:display-name         "Note Bar"
     :reagent-render       (fn [notes]
                             ^{:key notes}                  ;; force update
                             [:div#note-bar])
     :component-did-mount  (fn [this]
                             (draw-system-with-chord notes))
     :component-did-update (fn [this]
                             (draw-system-with-chord notes))}))

这样使用。

(defn exercise-one []
  (let [note (re-frame/subscribe [:exercise-one/note])]
    [:div
     [note-bar/note-bar @note]
     [other]
     [components]]))

我的事件代码如下。

(defn store-exercise-one-note [db [_ note]]
  (assoc-in db [:exercise-one :note-bar :note] note))

(re-frame/reg-event-db
  :exercise-one/store-note
  store-exercise-one-note)

(defn query-exercise-one-note [db]
  (or (get-in db [:exercise-one :note-bar :note])
      [{:octave 4 :key :c}]))

(re-frame/reg-sub
  :exercise-one/note
  query-exercise-one-note)

我验证了 app-db 值使用 10 倍变化。然而，当热重载启动时，注释栏只显示不同的注释。我相信这是由于未调用 component-did-update 挂钩。

我的问题是，这是绑定呈现某些内容的 JavaScript 库的正确方法吗？如果是这样，为什么我的组件没有更新？

【问题讨论】：

标签： clojurescript reagent re-frame

【解决方案1】：

以下修复了组件。请参阅有关 form-3 组件的文档here

(defn note-bar [notes]
  (reagent/create-class
    {:display-name         "Note Bar"
     :reagent-render       (fn [notes]
                             ^{:key notes}                  ;; force update
                             [:div#note-bar])
     :component-did-mount  (fn []
                             (draw-system-with-chord notes))
     :component-did-update (fn [this]
                             (let [new-notes (rest (reagent/argv this))]
                               (apply draw-system-with-chord new-notes)))}))

【讨论】：