Public API for use with Reagent, Ref. https://github.com/reagent-project/reagent.
(-new-cmptfn id
?mount-rvals-fn
?render-rvals-fn
render-fn
?post-render-fn
?unmount-fn
?catch-fn)Returns a new Reagent component defined in terms of special cmptfn lifecycle fns. These in turn are defined in a special macro context to get magic bindings and flow-through behaviour, etc.
(cmptfn id params & args)Reagent component fn util. Provides a sensible let-flow API for writing
simple, flexible Clj/s Reagent components.
(cmptfn
id ; Component identifier for debugging, error reporting, etc.
[x y] ; Reagent args passed to component
:let-mount [] ; Est. with each instance mount, avail. downstream
:let-render [] ; Est. with each instance render, avail. downstream, pure!
:render <body> ; Or just provide render body as final arg, pure!
:post-render <body> ; For DOM node setup/mutation
:unmount <body> ; For DOM node teardown
:catch <body> ; Experimental fallback for descendant errors, pure!
)
- Magic bindings: `this-cmpt`; `this-mounting?` in `:let-render`,
`:render`, and `:post-render`; `this-error` only in `:catch`.
- Nodes: `[<cmpt> {:ref (fn [node] _)}]` or `(enc/oget ev "currentTarget")`.
- Call Reagent components as:
* (<cmpt> <...>) - to get inlining.
* [<cmpt> <...>] - to get an intermediary Reagent component:
* Rerender-iff-args-change semantics.
* Can take ^{:key _} [<cmpt> <...>].
- Lifecycle behaviour:
* Component `id` becomes the React display-name for DevTools/stack traces.
* `:let-mount` runs during render; keep it cheap/idempotent.
* `:let-mount` bindings evaluate once per mount and are cleared after unmount.
* React StrictMode remounts preserve lifecycle values for the reused instance.
* StrictMode remounts may run `:post-render` with `this-mounting?` true
while preserving `:let-render` values from the prior render.
* Experimental: `:catch` defines a React error boundary fallback body for
descendant render/lifecycle errors. It receives component args,
`:let-mount` values, last successful `:let-render` values, and
`this-error`. It resets automatically on argv change.
* `:catch` uses `UNSAFE_componentWillReceiveProps` for argv-change reset;
React StrictMode dev builds may log a warning. Production is unaffected.
* Lifecycle errors include component/lifecycle ex-data; non-`js/Error`
throws are preserved under `:thrown`.(def-cmptfn sym & sigs)Defines a top-level Reagent component fn using `cmptfn`. See the `cmptfn` docstring for more details on args, etc.
cljdoc builds & hosts documentation for Clojure/Script libraries
| Ctrl+k | Jump to recent docs |
| ← | Move to previous article |
| → | Move to next article |
| Ctrl+/ | Jump to the search field |