Respo 确实是个轮子, 甚至不像是 react-lite 那样能替代 React
Respo 主要的目标是用 ClojureScript 重新实现一遍, 以及改进和学习
为了方便使用, 我把相应代码整理出一个模块, 方便的有兴趣的同学使用
https://github.com/mvc-works/respo-spa
随后我增加了一个 example 用来展示具体的使用方法
https://github.com/mvc-works/respo-spa-example
我用一个视频录制了从创建项目到完成界面的过程
http://www.tudou.com/programs/view/njte4UfduKw/
了解 cljs 的同学可以直接看 repo 里的内容, 代码实际上挺短了
具体的 API 在 respo 和 respo-client 两个 repo
在 respo-spa 当中主要是封装出来比较友好的接口方便上手
这篇文章相当于一个文字版, 我介绍一下 respo-spa 的用法
首先看一下 Respo 用法上和 React 一些比较明显的区别:
states 是全局的, 不是 React 那样私有状态, 这有利于热替换
Respo 当中 element 的 DSL 分成
style event attrs三类
写起来有点长. 但是对于框架有好处, 需要的话自己可以再封装Respo 中 state 和 Store 一样, 可以自己设置类型, 以及如何更新
Respo 中 mutate 是通过函数式的写法模拟
setState, 有区别
...此外 Respo 中缺少很多 React 中有的生命周期方法, 少了很多功能
毕竟不是文档, 我从源码开始分解吧, example 涉及了大部分功能了:button.cljs:
(ns spa-example.component.button
(:require
[respo.alias :refer [create-comp div span]]
[hsl.core :refer [hsl]]))
; 定义无状态的组件,
; 第一个函数参数对应 props
(defn render [text on-click]
; 第二个函数是 state 和修改 state 的函数
(fn [state mutate]
; 注意这里, style event 是分开的, 所以是两层的 map
(div {:style {:background-color (hsl 200 80 70)
:display "inline-block"
:padding "0 8px"
:color "white"
:margin "0 8px"
:cursor "pointer"}
:event {:click on-click}}
; 属性是 inner-text, 内部翻译为 innerText
(span {:attrs {:inner-text text}}))))
; 创建组件的写法, 没有 state, 因而参数较少
(def comp-button (create-comp :button render))box.cljs:
(ns spa-example.component.box
(:require
[respo.alias :refer [create-comp div span]]
[spa-example.component.button :refer [comp-button]]))
; 定义状态, 这里直接用来数字
(defn init-state [] 0)
; 状态每次操作, 直接加上一个数字
(defn update-state [state step] (+ step state))
; 处理事件, 其中 dispatch 由框架传递, mutate 由参数传递
(defn handle-click [mutate step]
(fn [simple-event dispatch]
; mutate 会调用到 update-state, 第一个参数自动加上
(mutate step)))
; 可以自己封装函数用来简化纯文本的 span
(defn text [x]
(span {:attrs {:inner-text (str x)}}))
(defn render [n]
(fn [state mutate]
(div {}
(text (str n ". "))
; 调用组件的语法, 就和函数一样用
(comp-button "inc" (handle-click mutate n))
(text state))))
; 创建带状态的组件, 注意参数数量增加了
(def comp-box (create-comp :box init-state update-state render))container.cljs:
(ns spa-example.component.container
(:require
[respo.alias :refer [create-comp create-element div span]]
[spa-example.component.button :refer [comp-button]]
[spa-example.component.box :refer [comp-box]]))
; Respo 内部没有定义足够多元素, 可以自己绑定
(defn hr [props & children]
(create-element :hr props children))
(defn handle-click [simple-event dispatch]
(dispatch nil nil))
(defn render [store]
(fn [state mutate]
(div {}
; 列表类型的元素渲染, 外边包裹 div, 里边用 sorted-map
(div {}
(->> (range 10)
(map-indexed (fn [index n]
[index (comp-box n)]))
(into (sorted-map))))
(hr {})
(comp-button "inc" handle-click)
(span {:attrs {:inner-text (str store)}})
(div {}
(comp-box)))))
(def comp-container (create-comp :container render))core.cljs:
(ns spa-example.core
(:require [respo-spa.core :refer [render]]
[spa-example.updater.core :refer [updater]]
[spa-example.component.container :refer [comp-container]]))
; 定义全局的 store 的引用
(defonce store-ref (atom 0))
; 定义全局的 states 的应用
(defonce states-ref (atom {}))
; dispatch 用来操作 store, 用的函数是 reset! 是有副作用的
(defn dispatch [op op-data]
(reset! store-ref (updater @store-ref op op-data)))
(defn render-app []
(let [target (.querySelector js/document "#app")]
; render 函数来自 respo-spa 的封装, 强制传递一些参数过去
(render (comp-container @store-ref) target dispatch states-ref)))
(defn -main []
(enable-console-print!)
(render-app)
; 在 store 和 states 发生改变是重新绘制界面
(add-watch store-ref :changes render-app)
(add-watch states-ref :changes render-app)
(println "app started!"))
(defn on-jsload []
; 在 js 代码热替换之后重新绘制界面
(render-app)
(println "code updated."))
(set! (.-onload js/window) -main)updater/core.cljs 只是说明一下可以定制:
(ns spa-example.updater.core)
(defn updater [store op op-data]
(inc store))整体上都还是我之前在 React.js 当中用的那些套路, 只是更纯粹一些
代码的稳定性还有待时间, 毕竟使用的项目太少, 完全不能保障
生命周期方法的缺失大概会影响具体的使用, 只是程度现在不确定
同时 mutate 函数实际上印象性能, 还有待优化, 我现在并没有处理
视频部分非常详细了, 有兴趣可以照着试试看玩 cljs, 有问题微博上问我