reactjs - Clojurescript、Reagent : pass atoms down as inputs, 或用作全局变量？

Question

我正在编写一个 Clojurescript 应用程序，使用 Reagent 使我的组件具有反应性。

我有一个简单的问题。我应该吗

1. 将我的原子作为输入传递给我的组件，或者
2. 使用原子作为全局变量并让它们“侧面影响”我的组件？

在 tutorial他们使用后一个选项，但是为了保持我的函数纯粹，我选择了前者。

我是否正确地说，使用它们作为全局变量(除了在定义组件输入时不那么冗长之外)可以防止重新渲染未使用原子状态的整个父组件？

Answer 1

如果你让你的组件接受原子作为参数，那么你可以使它们更可重用并且更容易测试。

如果您选择将整个应用程序状态保留在单个原子中，然后使用游标将其传递给子组件，则尤其如此。

;; setup a single instance of global state
(defonce app-state
  (reagent/atom {:foo 0 :bar 0})

;; define a generic counter component that knows
;; nothing about the global state
(defn counter
  [count]
  [:div
    [:button {:onclick #(swap! count inc) "+"]
    [:span @count]])

 ;; define counter components and give them access to
 ;; specific context within the global state
 (defn app
   [state]
   [counter (reagent/cursor app-state [:foo])]
   [counter (reagent/cursor app-state [:bar])])

如果您决定将 Reagent 与 Re-frame 一起使用，您甚至可以更进一步。 Re-frame 鼓励您使用如下所示的特定架构来构建应用程序。

 app-db  >  subscriptions
   ^             
handlers        v
   ^             
 events  <  components

1. 您编写的不仅仅是编写组件并将它们直接连接到全局原子(app-db)，而是编写订阅，它们只是选择/的函数。从 app-db 查询一些数据，并在 app-db 发生更改时将其传递给组件。

2. 然后，该组件不是直接与 app-db 打交道，而是创建 事件，这些事件只是描述事件意图的小数据片段。组件。

3. 这些事件被发送到处理程序，这些处理程序是将事件和当前app-db作为参数的函数并返回一个新的app-db。然后现有的 app-db 被替换，触发订阅者将数据向下传递给组件等等。

如果您发现您的 Reagent 项目有点困惑，并且 Re-frame readme 绝对有帮助。无论您是否决定使用它，这都是一本很棒的读物。