active-group / active-group/reacl
Provide a way to declare "methods" for event handlers (and other callbacks)
- 主要語言
- Clojure
- 星號
- 78
- 分支
- 2
- PR 合併指標
- 30 天內沒有已合併 PR
描述
DOM elements (and other native utilities) require simple real functions as event handlers, but handling the event usually requires accessing at least the component instance (`this`):
```(dom/div {:onClick (fn [ev] (send-message! this (... ev)))})```
But "binding" `this` in the closure like that, will recreate a new function in each rendering, and esp. if this is not a simple div but something bigger, this might have an impact on performance because functions are never `=`.
React solves this by implicitly binding custom "method" declarations of a class to 'this', so that a method of the class can serve as an event handler and `this` is bound to the component instance inside of the function body. Although the same could be done in Clojure and Reacl as well, it's not very idiomatic (`this-as` and so on).
Binding via a new Clojure type implementing IFn (like reactions) does not work for event-handler, as they must be real functions (at least React checks for `typeof .. == "function"`)
Therefore I propose a new low-level class declaration like this:
```
(defclass foo this []
methods [(my-handler [ev] (send-message! this ...ev)) ...]
)
```
Where the syntax is like that of `letfn`. Only `this` should be visible in the function bodies, because the methods should be created only once for an instance of the class.
There might be use-cases where the handling depends on the then current state and props (which could lead us on the ugly path of adding `(get-local-state this)` and alike), but maybe that can/should always be done in `handle-message` if needed anyway.
A higher level, more declarative way of defining event-handlers (resp. the translation of events into messages) could later be based on this primitive.
貢獻指南
這個儲存庫沒有索引到貢獻指南
研究方向
The issue names no implementation files or tests. Start with the proposed defclass and methods syntax, compare it with letfn-style declarations, and inspect how Reacl passes event handlers to React. Done means the API design is settled and the method handlers satisfy the stated real-function and instance-binding requirements.
由索引模型根據 Issue 內容生成。
評估
- 技術堆疊
- clojure, react
- 領域
- frontend
- Issue 類型
- 功能
- 難度
- 5/5
- 預估耗時
- 一週以上
- 活躍度
- 停滯
- 描述清晰度
- 基本清楚
- 新手友好度
- 35/100