React extensions for Elmish apps
Elmish-React implements boilerplate to wire up the rendering of React and React Native components and several rendering optimization functions.
Installation
1:
|
|
You also need to install React:
1:
|
|
Program module extensions
Both React and React Native applications need a root component to be rendered at the specified placeholder, see browser and native tutorials for details.
Lazy views
By default, every time the main update function is called (upon receiving and processing a message), the entire DOM is constructed anew and passed to React for reconciliation. If there are no changes in the model of some component, its view function will under normal circumstances not return a different result. React will then still perform reconciliation and realize that there is no need to update the component's UI. Consequently, when the DOM is sufficiently large or its construction extremely time-consuming, this unnecessary work may have noticeable repercussions in terms of application performance. Thanks to lazy views however, the update process can be optimized by avoiding DOM reconciliation and construction steps, but only if the model remains unchanged.
lazyView
can be used with equatable models (most F# core types: records, tuples, etc).
lazyViewWith
can be used with types that don't implement the equality
constraint (such as types/instances coming from JS libraries) by passing the custom equal
function that compares the previous and the new model.
These functions work for both React and React Native views. They are used in the following way.
Given a view function of one argument:
1: 2: 3: 4: 5: 6: 7: 8: |
|
the rendered view will be cached for as long as model
remains the same.
Given a view function of three arguments:
1: 2: |
|
Elmish-React will skip calling the view3
for as long as both model1
and model2
remain unmodified.
Full name: Index.view1
Full name: Microsoft.FSharp.Core.Operators.failwith
Full name: Index.view2
Full name: Index.view3
Full name: Index.model
Full name: Index.model1
Full name: Index.model2
Full name: Index.dispatch
Full name: Microsoft.FSharp.Core.unit