A render optimization algorithm for refreshing the UI via props tunnelling (setting new props on a component's state in a pre-agreed location). This algorithm analyzes database changes and on-screen components to update components (by ident) whose props have changed.
Prop change detection is done by scanning the database in only the locations that on-screen components are querying (derived by the mounted component idents, and any ident-joins in the queries).
A render optimization algorithm for refreshing the UI via props tunnelling (setting new props on a component's state in a pre-agreed location). This algorithm analyzes database changes and on-screen components to update components (by ident) whose props have changed. Prop change detection is done by scanning the database in *only* the locations that on-screen components are querying (derived by the mounted component idents, and any ident-joins in the queries).
The keyframe optimized render.
The keyframe optimized render.
Just like keyframe render, but supports :only-refresh option.
Just like keyframe render, but supports `:only-refresh` option.
Like keyframe-render2, but also supports free-floating roots.
WARNING: THIS RENDERER SHOULD BE CONSIDERED DEPRECATED (even though for legacy reasons it is the default)
in favor of using hooks with helpers like use-component.
General usage:
render! as your application's optimized render function.(dom/create-element ReactClass) to render the vanilla wrapper, or
c. Use the vanilla wrapper class when a js library controls rendering (like routing).Example:
(defonce app (app/fulcro-app {:optimized-render! mroot/render!}))
(defsc AltRoot [this {:keys [alt-child]}]
;; query is from ROOT of the db, just like normal root.
{:query [{:alt-child (comp/get-query OtherChild)}]
:componentDidMount (fn [this] (mroot/register-root! this {:app app}))
:componentWillUnmount (fn [this] (mroot/deregister-root! this {:app app}))
:shouldComponentUpdate (fn [] true)
:initial-state {:alt-child [{:id 1 :n 22}
{:id 2 :n 44}]}}
(dom/div
(mapv ui-other-child alt-child)))
;; For use in the body of normal defsc components.
(def ui-alt-root (mroot/floating-root-factory AltRoot))
;; For use as plain React class
(def PlainAltRoot (mroot/floating-root-react-class AltRoot app))
...
(some-js-library #js {:thing PlainAltRoot})
(defsc NormalFulcroClass [this props]
{:query [:stuff]
:ident (fn [] [:x 1])
...}
(dom/div
;; ok to use within defsc components:
(ui-alt-root)
;; how to use the plain react class, which is how js libs would use it:
(dom/create-element PlainAltRoot)))
Like keyframe-render2, but also supports free-floating roots.
WARNING: THIS RENDERER SHOULD BE CONSIDERED DEPRECATED (even though for legacy reasons it is the default)
in favor of using hooks with helpers like `use-component`.
General usage:
1. Set this nses `render!` as your application's optimized render function.
2. Create a class that follows all of the normal rules for a Fulcro root (no ident, has initial state,
composes children queries/initial-state, etc.
a. Add mount/unmount register/deregister calls
2. Use floating-root-factory to generate a Fulcro factory, or floating-root-react-class to generate
a vanilla React wrapper class that renders the new root.
a. Use the factory in normal Fuclro rendering, but don't pass it props, or
b. Use `(dom/create-element ReactClass)` to render the vanilla wrapper, or
c. Use the vanilla wrapper class when a js library controls rendering (like routing).
Example:
```
(defonce app (app/fulcro-app {:optimized-render! mroot/render!}))
(defsc AltRoot [this {:keys [alt-child]}]
;; query is from ROOT of the db, just like normal root.
{:query [{:alt-child (comp/get-query OtherChild)}]
:componentDidMount (fn [this] (mroot/register-root! this {:app app}))
:componentWillUnmount (fn [this] (mroot/deregister-root! this {:app app}))
:shouldComponentUpdate (fn [] true)
:initial-state {:alt-child [{:id 1 :n 22}
{:id 2 :n 44}]}}
(dom/div
(mapv ui-other-child alt-child)))
;; For use in the body of normal defsc components.
(def ui-alt-root (mroot/floating-root-factory AltRoot))
;; For use as plain React class
(def PlainAltRoot (mroot/floating-root-react-class AltRoot app))
...
(some-js-library #js {:thing PlainAltRoot})
(defsc NormalFulcroClass [this props]
{:query [:stuff]
:ident (fn [] [:x 1])
...}
(dom/div
;; ok to use within defsc components:
(ui-alt-root)
;; how to use the plain react class, which is how js libs would use it:
(dom/create-element PlainAltRoot)))
```
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 |