【clojure】re-frame的学习笔记01

re-frame学习内容

1.Basic

1.事件调度

根据官方网站的案例，点击删除事件

(defn delete-button
    [item-id]
    [:div.garbage-bin
     :on-click #(re-frame.code/dispatch [:delete-item item-id])])
1
2
3
4

当用户点击删除事件是就会调用该函数

#(re-frame.core/dispatch [:delete-item item-id])
1

每一个ref-frame都是一个向量，在这种情况下，调用event有两个元素

[:delete-item 2486]
1

事件向量的第一个元素:delete-item是事件的类型。事件以特定领域的方式表达用户意图，他们是re-frame系统的语言.

2.事件处理

调用一个event handler函数，命名为h,来计算事件[:delete-item 2486]

启动时，重新构建应用程序使用reg-event-fx，所以在程序中h是事件:delete-item的处理函数，它必须是这样注册的

(re-frame.code/reg-event-fx
    :delete-item
    h)
1
2
3

因为h是一个函数，所以它被编写为带有两个参数：

1. 一个conffects的map，这些数据改变了"the world"的状态，是一个简单映射，如下：{:db a-value}，其中a-value是当前应用程序app-db中的状态
2. 要处理的event，本例中的[:delete-item 2486]

h将计算结果作为数据，它计算事件应该如何改变"the world"，并返回一个effects描述必要的map

(defn h
    [conffects event] ;; conffects 获取现在的状态
    (let [item-id (second event) ;; 从事件中提取id
          db (:db coeffects) ;; 提取当前应用程序的状态
          new-db (dissoc-in db [:item item-id])] ;;新应用程序的状态
        {:db new-db}));;必要效果图
1
2
3
4
5
6

有一些方法，可以将”the world“的必要方面，注入到第一个coeffectsmap参数中，但当前的“应用程序状态”是世界中总是需要的一方面，并且默认情况下在密钥中可用:db。因此，当前值 在app-db可通过表达式 获得(:db coeffects)。

返回的h是一个只有一个键的映射

{:db new-db};;new-db` 是最新计算出的状态
1

h计算一个效果并返回它，该效果表示要更改的应用程序状态

Attention:

1. h通过获取当前应用程序状态（map）(:db coeffects)
2. 它是通过计算修改后的应用程序装填(dissoc-in db [:items item-id])
3. 它在效果图中返回修改后的应用程序状态{:db new-db}

使用解构的方式

(defn h
    [{:key [db]} [_ item_id]]
    {:db (dissoc-in db [:items item-id])})
1
2
3

3.效果处理

effect handle函数操作h返回effects

h返回

{:db new-db}
1

返回的映射的每一个键都标识一种方法，并且该键提供了更多详细信息，返回h只有一个键，因此:db只指一种方法

启动时，一个re-frame程序可以effects handlers使用reg-fx。例子如下：

(re-frame.core/reg-fx
    :db                     ;;效果键
    (fn [val]               ;;处理函数
        (reset! app-db val)))
1
2
3
4

需要明确：reset!是app-db一个变异的、有效的行为，这就是效果处理程序所做的事情，他们改变"the world"。

现在，您不需要注册效果处理程序，:db 因为 re-frame 提供了一个内置的效果处理程序。 re-frame 进行管理app-db，因此它将查找对其进行的任何更改（效果）。
如果h返回了

{:wear {:pants "valour flares" :belt false}
 :tweet "Okay,yes, I am Satoshi"}
1
2

然后，注册两个效果处理程序:wear并将:tweet被调用来操作这两个效果。而且，不，重新框架不提供标准效果处理程序，因此您需要自己编写它们，然后注册它们。

例如：

(re-frame.core/reg-fx
    :wear
    (fn [val]
        ...))
1
2
3
4

4.查询

更新操作app-db将触发react中的v = f(s)该流程的一部分。

应用程序状态 s刚刚发生变化（在 Domino 3 中），现在 Domino 4、5 和 6 都发生了变化，最后我们向v用户显示了一个新视图 。

由于该例，存储在应用程序状态中，因此无需太多计算，只需从应用程序状态中提取项目列表

(defn query-fn
    [db v] ;;db是现在在app-db中的值，v是查询向量
    (:items dbs))
1
2
3

在程序启动时，query-fn必须使用re-frame.core/reg-sub与query-id关联

(re-frame.core/reg-sub
    :query-items ;;query id
    query-fn) ;;执行查询的函数
1
2
3

在第五步中，看到(subscribe [:query-items])，则调用query-fn来计算他

5.查看

因为查询函数:query-items只是重新计算了一个新值，所以任何使用 a 的视图（函数）(subscribe [:query-items]) 都会自动（反应性地）调用来重新计算新的 DOM（以响应其源数据的更改）。

视图函数以暂时性耽搁(hiccup)格式计算数据结构，描述所需的 DOM 节点。在这种“项目”情况下，视图函数显然不会为刚刚删除的项目生成hiccup，但除此之外，“这次”计算的hiccup将与“上次”相同。

(defn items-view
    []
    (let [items (subscribe [:query-itmes])] ;;来自应用程序状态的源项目
        [:div (map item-render @item)])) ;; assume item-render already written
1
2
3
4

注意：items是如何通过re-frame.core/subscribe从app state变成sourced的，它是用向量参数调用的，该向量的第一个元素是一个查询 ID

注意：subscribe查询可以参数化。因此，在现实世界的应用程序中，您可能会遇到以下情况：
(subscribe [:items "blue"])

该向量首先识别查询，然后提供进一步的参数。您可以将其视为代表select * from Items where colour="blue"。

除非没有可用的 SQL，并且您将是实现更复杂的query-fn能够处理“where”参数的人。更多内容将在后面的教程中介绍。

6.虚拟dom更新为真实dom

Reagent/React制作成真实的浏览器DOM。不需要您提供任何代码。