Clojurescript/Reagent/Chart.js - Reagent生命周期 - chart.update()的含义。

Question

我们正在使用Clojurescript和Reagent结合Chart.js进行开发。现在我知道Chart.js有一个chart.update()方法，可以用来更新图表数据。那么问题来了，我该如何设置组件，以便在:reagent-render中呈现图表，并在可能的情况下通过:component-will-update调用chart.update()方法？

基本上，是否有一种方法可以在:component-will-update函数中获取从:reagent-render函数创建的图表的句柄？

- Amit Shah

Answer 1

在这种情况下，您通常遵循的模式是将有状态/可变对象包装在React组件中，并使用React的生命周期方法。这种方法在re-frame的Using-Stateful-JS-Component中有详细描述，但这是我使用D3的方式：

(defn graph-render [graph-attrs graph-data]
  ;; return hiccup for the graph here
  (let [width (:width graph-attrs)
        height (:height graph-attrs)]
    [:svg {:width width :height height}
     [:g.graph]]))

(defn graph-component [graph-attrs graph-data]
  (r/create-class
   {:display-name "graph"
    :reagent-render graph-render
    :component-did-update (fn [this]
                            (let [[_ graph-attrs graph-data] (r/argv this)]
                              (update! graph-attrs graph-data)))
    :component-did-mount (fn [this]
                           (let [[_ graph-attrs graph-data] (r/argv this)]
                             (init! graph-attrs graph-data)))}))

(defn container []
  [:div {:id "graph-container"}
   [graph-component
    @graph-attrs-ratom
    @graph-data-ratom]])

重要的是保持外部/内部组合，否则React将无法正确填充其props。

另一件需要注意的事情是reagent/argv向量的返回，正如您所看到的，它包含第一个项之后的props。我在上面的维基页面中看到了(reagent/props comp)，但我自己从未尝试过。

- Andrea Richiardi