Reagent Compiler object is a new way to configure how Reagent turns the Hiccup-style markup into React components and elements.
As a first step, this can be used to turn on option to create
functional components when a function is referred in a Hiccup vector:
[component-fn parameters]
.
(def functional-compiler (reagent.core/create-compiler {:function-components true}))
;; Using the option
(reagent.dom/render [main] div functional-compiler)
(reagent.core/as-element [main] functional-compiler)
;; Setting compiler as the default
(reagent.core/set-default-compiler! functional-compiler)
Features:
react/memo
to implement logic similar to
shouldComponentUpdate
(component is rendered only if the properties change).Differences to Class component implementation:
reagent.dom/render
doesn't return the Component instance, but just nil
reagent.core/current-component
returns a mocked object that can be passed to reagent.core/force-update
,
but won't support everything that real Component instance would support.useEffect
cleanup function is called asynchronously some time after
unmounting the component from DOM (in React 17). This is used to dispose component RAtom,
which will affect e.g. r/with-let
finally
function being called. Cleanup
is still called before the component is mounted again. This probably shouldn't
affect any real use cases, but required waiting two animation frames on
Reagent tests to assert that the finally
was ran.
(More information)r/wrap
as component parameter seems to in some cases re-render
components when source atom is changed, even if the value in path didn't
change. Could be related to how react/memo
handles changes properties.(Local test run with https://github.com/krausest/js-framework-benchmark, with added function component case)
Now that this mechanism to control how Reagent compiles Hiccup-style markup to React calls is in place, it will be probably used later to control some other things also:
From Clojurist Together announcenment:
As this [hooks] affects how Reagent turns Hiccup to React elements and components, I have some ideas on allowing users configure the Reagent Hiccup compiler, similar to what Hicada does. This would also allow introducing optional features which would break existing Reagent code, by making users opt-in to these. One case would be to make React component interop simpler.
Some ideas:
Open questions:
as-element
with their own Compiler to ensure compatibility.Can you improve this documentation?Edit on GitHub
cljdoc is a website building & hosting documentation for Clojure/Script libraries
× close