That approach is very convenient because when you start proptotypong, the received props obeys the already known idioms, and all works in a way like the component is a simple clojure function.
+That approach is very convenient because when you start prototyping, the received props obeys the already known idioms, and all works in a way like the component is a simple clojure function.
But, this approach has inconvenience of the need to transform from js object to clojure hash-map on each render and this has performance penalization. In the majority of cases this has no isues at all.
But in cases when performance is important, it is recommended to use the ::mf/props :obj which completly removes the transformation overhead.
The component functions with ::mf/props :obj also has support for the already familiar destructuring idiom. Internally, this compiles to code that directly accesses properties within the props object. The only thing to keep in mind, whether you use destructuring or not, is that the props object is a flat js object and not a clojure hash-map.
Components are everything that we as users define.
In this case we have two ways to call our component (or in react words, create the react-dom element from a user-defined component):
-A: When we have 100% control of the props and we do not want any type of transformation to be done to them (usually when we are talking about large components, you probably do not reuse that they represent a page or a section of that page).
+A: When we have 100% control of the props and we do not want any type of transformation to be done to them (usually when we are talking about large components, you probably do not reuse that they represent a page or a section of that page, but not limited to).
B: When we are creating a reusable component that is probably wrapping one or more native elements of the virtual dom and we simply want to extend its behavior controlling only a subset of props, where the rest of the props that are not controlled would be passed as is to the next native element.
For the A case, we will use the [:& ...] handler:
(mf/defc title
@@ -117,25 +117,27 @@ User def
(mf/defc button
{::mf/props :obj}
[{:keys [name onClick]}]
- [:button {:on-click on-click} name])
+ [:button {:on-click onClick} name])
(mf/defc my-big-component
[]
[:> button {:name "foobar" :on-click some-fn}])
-
The prop literals passed to the [:> handler will be transformed automatically using react props naming rules.
-Remember that ::mf/props :obj should probably be a default, so all components you define should have that metadata.
+In this example, we are creating a react element from user defined button component in the same way as we do it with native DOM elements. Following the same transformation rules (the prop literals passed to the [:> handler will be transformed automatically using react props naming rules, as explained previously).
Special case with components ending in * on the name
For convenience, if the component is named with an * at the end of the name (or it has the ::mf/props :react in the metadata instead of ::mf/props :obj), the destructuring can use the lisp-case and the macro will automatically access the value with camelCase from the props, respecting the react convention for props.
Useful when you build a native element wrapper and the majority of props will be passed as-is to the wrapped element.
(mf/defc button*
- [{:keys [name on-clic class]}]
+ [{:keys [name on-click class]}]
[:button {:on-click on-click :class class} name])
(mf/defc my-big-component
[]
+ ;; note: we use here camel case just for demostration purposes and it
+ ;; is not really needded becaue the macro will do it for you
[:> button* {:name "foobar" :onClick some-fn :className "foobar"}])
+But remember, the * only changes the behavior of destructuring. The call convention is determined by the used handler: [:& or [:>.
Props Checking
Rumext comes with basic props checking that allows basic existence checking or with simple predicate checking. For simple existence checking, just pass a set with prop names.
(ns my.ns