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

文章目录

  • re-frame学习内容
    • 1.Basic
      • 1.事件调度
      • 2.事件处理
      • 3.效果处理
      • 4.查询
      • 5.查看
      • 6.虚拟dom更新为真实dom

re-frame学习内容

1.Basic

1.事件调度

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

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

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

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

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

[:delete-item 2486]

事件向量的第一个元素: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)

因为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}));;必要效果图

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

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

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

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])})

3.效果处理

effect handle函数操作h返回effects

h返回

{:db new-db}

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

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

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

需要明确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"}

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

例如:

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

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))

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

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

在第五步中,看到(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

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

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

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

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

6.虚拟dom更新为真实dom

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

你可能感兴趣的:(clojurejs,学习,开发语言)