- It allows you to use
because you can then use observables for managing state
reffor component lifetime, leading to more concise code.
- It helps you to use React in an algorithmically efficient way:
- The body of a functional component is evaluated only once each time the
component is mounted.
- This also helps you to avoid issues such as the gotcha with ref.
- Only elements that contain embedded observables are rerendered when changes are pushed through observables. An update to a deeply nested VDOM element can be an O(1) operation.
- The body of a functional component is evaluated only once each time the component is mounted.
Using Baret couldn't be simpler. You just
import React from "baret" and you
are good to go.
To use Baret, you simply import it as
import React from "baret"
and you can then write React components:
const oncePerSecond = Baconconst Clock =<div>The time is oncePerSecond</div>
with VDOM that can have embedded Bacon.js observables.
NOTE: The result, like the
Clock above, is just a React component. If
you export it, you can use it just like any other React component and even in
modules that do not import
Baret only lifts built-in HTML elements implicitly. The
on a non-primitive element instructs Baret to lift the element.
For example, you could write:
import * as RR from "react-router"import React from "baret"const Link1 = ...props <RR.Link />
to be able to use
embedded Bacon.js observables:
Note that the
ref attribute is only there as an example to contrast
fromBacon allows one to convert a Bacon observable of React elements into a
React element. It is useful in case the top-most element of a component depends
on a Bacon observable.
import fromBacon from "baret"import ifte from "baret.util"const Chosen = choice
baret-util returns an observable that is
choice is true and otherwise
Note that the point of using
fromBacon in the above example is that we don't
want to wrap the
ifte(...) inside an additional element like this:
const Chosen = choice<div></div>
fromClass allows one to lift a React component.
import * as RR from "react-router"import fromClass from "baret"const Link2 =
$$ref attribute on an element whose component is lifted using
does the same thing as the ordinary
ref as a special case and it is not passed to components, so
a special name had to be introduced for it.