reactjs – Clojurescript,Reagent:将原子作为输入传递,还是用作全局变量?

我正在编写一个Clojurescript应用程序,使用Reagent使我的组件被反应.

我有一个简单的问题.我是不是该

>通过我的组件传递我的原子作为输入,或
>使用原子作为全局变量,让它们“副作用”我的组件?

tutorial中他们使用后一种选择,但是为了保持我的功能纯洁,我选择了前者.

我是否正确地说使用它们作为全局变量(除了在定义组件输入时不那么冗长)还会阻止重新呈现未使用原子状态的整个父组件?

最佳答案
如果您使组件接受原子作为参数,那么您可以使它们更可重用且更容易测试.

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

;; 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一起使用,您甚至可以更进一步.重新框架鼓励您使用看起来像这样的特定架构来构建您的应用程序.

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

>而不是仅仅编写组件并将它们直接连接到全局原子(app-db),您编写的订阅只是从app-db中选择/查询某些数据的函数,并在app-db更改时将其传递给组件.
>然后,组件不是直接乱用app-db,而是创建事件,这些事件只是描述组件意图的小块数据.
>这些事件被发送到处理程序,处理程序是将事件和当前app-db作为参数并返回新的app-db的函数.然后替换现有的app-db,触发订阅者将数据传递给组件,依此类推.

如果您发现您的Reagent项目有点纠结并且Re-frame readme是一个很好的读取,无论您是否决定使用它,这绝对是有帮助的.

转载注明原文:reactjs – Clojurescript,Reagent:将原子作为输入传递,还是用作全局变量? - 代码日志