mirror of https://github.com/status-im/reagent.git
More news text
This commit is contained in:
parent
d1a48eb73e
commit
8d3a2bdc7d
|
@ -21,12 +21,13 @@
|
||||||
(:people @app-state))
|
(:people @app-state))
|
||||||
|
|
||||||
(defn person-keys []
|
(defn person-keys []
|
||||||
(let [m @(r/track people)]
|
(-> @(r/track people)
|
||||||
(keys m)))
|
keys
|
||||||
|
sort))
|
||||||
|
|
||||||
(defn person [id]
|
(defn person [id]
|
||||||
(let [m @(r/track people)]
|
(-> @(r/track people)
|
||||||
(get m id)))
|
(get id)))
|
||||||
|
|
||||||
(defn name-comp [id]
|
(defn name-comp [id]
|
||||||
(let [p @(r/track person id)]
|
(let [p @(r/track person id)]
|
||||||
|
@ -53,8 +54,8 @@
|
||||||
[:h2 "Use any function as a reactive value"]
|
[:h2 "Use any function as a reactive value"]
|
||||||
|
|
||||||
[:p [:code "reagent.core/track"] " takes a function, and
|
[:p [:code "reagent.core/track"] " takes a function, and
|
||||||
optional arguments for that function, and returns an
|
optional arguments for that function, and gives a
|
||||||
”atom-like” value that can be derefed, and gives whatever is
|
derefable (i.e ”atom-like”) value, containing whatever is
|
||||||
returned by that function. If the tracked function depends on a
|
returned by that function. If the tracked function depends on a
|
||||||
Reagent atom, the function is called again whenever that atom
|
Reagent atom, the function is called again whenever that atom
|
||||||
changes – just like a Reagent component function. If the value
|
changes – just like a Reagent component function. If the value
|
||||||
|
@ -64,7 +65,7 @@
|
||||||
|
|
||||||
[:p "In other words, " [:code "@(r/track foo x)"] " gives the
|
[:p "In other words, " [:code "@(r/track foo x)"] " gives the
|
||||||
same result as " [:code "(foo x)"] " – but in the first case,
|
same result as " [:code "(foo x)"] " – but in the first case,
|
||||||
foo is only called again when the atoms it depends on
|
foo is only called again when the atom(s) it depends on
|
||||||
changes."]
|
changes."]
|
||||||
|
|
||||||
[:p "Here's an example: "]
|
[:p "Here's an example: "]
|
||||||
|
@ -78,10 +79,30 @@
|
||||||
:name-list])}]
|
:name-list])}]
|
||||||
|
|
||||||
[:p "Here, the " [:code "name-list"] " component will only be
|
[:p "Here, the " [:code "name-list"] " component will only be
|
||||||
re-rendered if the keys to the " [:code ":people"] " map
|
re-rendered if the keys of the " [:code ":people"] " map
|
||||||
changes. Every " [:code "name-comp"] " only renders again when
|
changes. Every " [:code "name-comp"] " only renders again when
|
||||||
needed, etc."]
|
needed, etc."]
|
||||||
|
|
||||||
|
[:p "Use of " [:code "track"] " can improve performance in
|
||||||
|
three ways:" ]
|
||||||
|
|
||||||
|
[:ul
|
||||||
|
[:li "It can be used as a cache for an expensive function,
|
||||||
|
that is automatically updated if that function depends on Reagent
|
||||||
|
atoms (or other tracks, cursors, etc)."]
|
||||||
|
|
||||||
|
[:li "It can also be used to limit the number of times a
|
||||||
|
component is re-rendered. The user of " [:code "track"] " is
|
||||||
|
only updated when the function’s result changes. In other
|
||||||
|
words, you can use track as a kind of generalized, read-only
|
||||||
|
cursor."]
|
||||||
|
|
||||||
|
[:li "Every use of " [:code "track"] " with the same arguments
|
||||||
|
will only result in one execution of the function. E.g the two
|
||||||
|
uses of " [:code "@(r/track people)"] " in the example above
|
||||||
|
will only result in one call to the " [:code "people"] "
|
||||||
|
function (both initially, and when the state atom changes)."]]
|
||||||
|
|
||||||
])]])
|
])]])
|
||||||
|
|
||||||
(tools/register-page url [#'main] title)
|
(tools/register-page url [#'main] title)
|
||||||
|
|
Loading…
Reference in New Issue