-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
161 lines (153 loc) · 31.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!doctype html>
<html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><base href=""/><link href="css/built.css?973e6a" rel="stylesheet"/><title>Reagent: Minimalistic React for ClojureScript</title></head><body><div id="main-content"><div><div><div class="nav"><ul class="nav"><li class="brand"><a href="index.html">Reagent:</a></li><li><a href="index.html">Intro</a></li><li><a href="news/index.html">News</a></li><li><a href="https://github.com/reagent-project/reagent">GitHub</a></li><li><a href="http://reagent-project.github.io/docs/master/">API</a></li></ul></div><div></div><div class="reagent-demo"><h1>Reagent: Minimalistic React for ClojureScript</h1><div class="demo-text"><h2>Introduction to Reagent</h2><p><a href="https://github.com/reagent-project/reagent">Reagent</a> provides a minimalistic interface
between <a href="https://github.com/clojure/clojurescript">ClojureScript</a> and <a href="https://reactjs.org/">React</a>. It allows you to define efficient React
components using nothing but plain ClojureScript functions and
data, that describe your UI using a <a href="https://github.com/weavejester/hiccup">Hiccup</a>-like
syntax.</p><p>The goal of Reagent is to make it possible to define
arbitrarily complex UIs using just a couple of basic concepts,
and to be fast enough by default that you rarely have to think
about performance.</p><p>A very basic Reagent component may look something like this: </p><div><div class="demo-example clearfix"><a class="demo-example-hide">hide</a><h3 class="demo-heading">Example </h3><div class="simple-demo"><div><p>I am a component!</p><p class="someclass">I have <strong>bold</strong><span style="color:red"> and red </span>text.</p></div></div></div><div class="demo-source clearfix"><h3 class="demo-heading">Source</h3><pre><span style="color:#272">(</span><span style="color:#687868;font-weight:bold">defn</span> <span style="color:#5050c0;font-weight:bold">simple-component</span> <span style="color:#940">[</span><span style="color:#940">]</span>
<span style="color:#940">[</span><span style="color:blue">:div</span>
<span style="color:#44a">[</span><span style="color:blue">:p</span> <span style="color:green">"I am a component!"</span><span style="color:#44a">]</span>
<span style="color:#44a">[</span><span style="color:blue">:p.someclass</span>
<span style="color:green">"I have "</span> <span style="color:#272">[</span><span style="color:blue">:strong</span> <span style="color:green">"bold"</span><span style="color:#272">]</span>
<span style="color:#272">[</span><span style="color:blue">:span</span> <span style="color:#940">{</span><span style="color:blue">:style</span> <span style="color:#44a">{</span><span style="color:blue">:color</span> <span style="color:green">"red"</span><span style="color:#44a">}</span><span style="color:#940">}</span> <span style="color:green">" and red "</span><span style="color:#272">]</span> <span style="color:green">"text."</span><span style="color:#44a">]</span><span style="color:#940">]</span><span style="color:#272">)</span></pre></div></div><p>You can build new components using other components as
building blocks. Like this:</p><div><div class="demo-example clearfix"><a class="demo-example-hide">hide</a><h3 class="demo-heading">Example </h3><div class="simple-demo"><div><p>I include simple-component.</p><div><p>I am a component!</p><p class="someclass">I have <strong>bold</strong><span style="color:red"> and red </span>text.</p></div></div></div></div><div class="demo-source clearfix"><h3 class="demo-heading">Source</h3><pre><span style="color:#272">(</span><span style="color:#687868;font-weight:bold">defn</span> <span style="color:#5050c0;font-weight:bold">simple-parent</span> <span style="color:#940">[</span><span style="color:#940">]</span>
<span style="color:#940">[</span><span style="color:blue">:div</span>
<span style="color:#44a">[</span><span style="color:blue">:p</span> <span style="color:green">"I include simple-component."</span><span style="color:#44a">]</span>
<span style="color:#44a">[</span>simple-component<span style="color:#44a">]</span><span style="color:#940">]</span><span style="color:#272">)</span></pre></div></div><p>Data is passed to child components using plain old Clojure
data types. Like this:</p><div><div class="demo-example clearfix"><a class="demo-example-hide">hide</a><h3 class="demo-heading">Example </h3><div class="simple-demo"><p>Hello, <!-- -->world<!-- -->!</p></div></div><div class="demo-source clearfix"><h3 class="demo-heading">Source</h3><pre><span style="color:#272">(</span><span style="color:#687868;font-weight:bold">defn</span> <span style="color:#5050c0;font-weight:bold">hello-component</span> <span style="color:#940">[</span>name<span style="color:#940">]</span>
<span style="color:#940">[</span><span style="color:blue">:p</span> <span style="color:green">"Hello, "</span> name <span style="color:green">"!"</span><span style="color:#940">]</span><span style="color:#272">)</span>
<span style="color:#272">(</span><span style="color:#687868;font-weight:bold">defn</span> <span style="color:#5050c0;font-weight:bold">say-hello</span> <span style="color:#940">[</span><span style="color:#940">]</span>
<span style="color:#940">[</span>hello-component <span style="color:green">"world"</span><span style="color:#940">]</span><span style="color:#272">)</span></pre></div></div><p><strong>Note: </strong>In the example above, <code>hello-component</code> might just
as well have been called as a normal Clojure function instead of
as a Reagent component, i.e with parenthesis instead of square
brackets. The only difference would have been performance, since
”real” Reagent components are only re-rendered when their data
have changed. More advanced components though (see below) must
be called with square brackets.</p><p>Here is another example that shows items in a <code>seq</code>:</p><div><div class="demo-example clearfix"><a class="demo-example-hide">hide</a><h3 class="demo-heading">Example </h3><div class="simple-demo"><div>Here is a list:<ul><li>Item <!-- -->0</li><li>Item <!-- -->1</li><li>Item <!-- -->2</li></ul></div></div></div><div class="demo-source clearfix"><h3 class="demo-heading">Source</h3><pre><span style="color:#272">(</span><span style="color:#687868;font-weight:bold">defn</span> <span style="color:#5050c0;font-weight:bold">lister</span> <span style="color:#940">[</span>items<span style="color:#940">]</span>
<span style="color:#940">[</span><span style="color:blue">:ul</span>
<span style="color:#44a">(</span><span style="color:#687868;font-weight:bold">for</span> <span style="color:#272">[</span>item items<span style="color:#272">]</span>
^<span style="color:#272">{</span><span style="color:blue">:key</span> item<span style="color:#272">}</span> <span style="color:#272">[</span><span style="color:blue">:li</span> <span style="color:green">"Item "</span> item<span style="color:#272">]</span><span style="color:#44a">)</span><span style="color:#940">]</span><span style="color:#272">)</span>
<span style="color:#272">(</span><span style="color:#687868;font-weight:bold">defn</span> <span style="color:#5050c0;font-weight:bold">lister-user</span> <span style="color:#940">[</span><span style="color:#940">]</span>
<span style="color:#940">[</span><span style="color:blue">:div</span>
<span style="color:green">"Here is a list:"</span>
<span style="color:#44a">[</span>lister <span style="color:#272">(</span><span style="color:#687868;font-weight:bold">range</span> 3<span style="color:#272">)</span><span style="color:#44a">]</span><span style="color:#940">]</span><span style="color:#272">)</span></pre></div></div><p><strong>Note: </strong>The <code>^{:key item}</code> part above isn’t really necessary
in this simple example, but attaching a unique key to every item
in a dynamically generated list of components is good practice,
and helps React to improve performance for large lists. The key
can be given either (as in this example) as meta-data, or as a <code>:key</code> item in the first argument to a component (if it
is a map). See React’s <a href="https://reactjs.org/docs/lists-and-keys.html#keys">documentation</a>
for more info.</p></div><div class="demo-text"><h2>Managing state in Reagent</h2><p>The easiest way to manage state in Reagent is to use Reagent’s
own version of <code>atom</code>. It works exactly like the one in
clojure.core, except that it keeps track of every time it is
deref’ed. Any component that uses an <code>atom</code> is automagically
re-rendered when its value changes.</p><p>Let’s demonstrate that with a simple example:</p><div><div class="demo-example clearfix"><a class="demo-example-hide">hide</a><h3 class="demo-heading">Example </h3><div class="simple-demo"><div>The atom <code>click-count</code> has value: <!-- -->0<!-- -->. <input type="button" value="Click me!"/></div></div></div><div class="demo-source clearfix"><h3 class="demo-heading">Source</h3><pre><pre><span style="color:#272">(</span><span style="color:#687868;font-weight:bold">ns</span> <span style="color:#5050c0;font-weight:bold">example</span>
<span style="color:#940">(</span><span style="color:blue">:require</span> <span style="color:#44a">[</span>reagent.core <span style="color:blue">:as</span> r<span style="color:#44a">]</span><span style="color:#940">)</span><span style="color:#272">)</span></pre><pre><span style="color:#272">(</span><span style="color:#687868;font-weight:bold">def</span> <span style="color:#5050c0;font-weight:bold">click-count</span> <span style="color:#940">(</span><span style="color:#687868;font-weight:bold">r/atom</span> 0<span style="color:#940">)</span><span style="color:#272">)</span>
<span style="color:#272">(</span><span style="color:#687868;font-weight:bold">defn</span> <span style="color:#5050c0;font-weight:bold">counting-component</span> <span style="color:#940">[</span><span style="color:#940">]</span>
<span style="color:#940">[</span><span style="color:blue">:div</span>
<span style="color:green">"The atom "</span> <span style="color:#44a">[</span><span style="color:blue">:code</span> <span style="color:green">"click-count"</span><span style="color:#44a">]</span> <span style="color:green">" has value: "</span>
@click-count <span style="color:green">". "</span>
<span style="color:#44a">[</span><span style="color:blue">:input</span> <span style="color:#272">{</span><span style="color:blue">:type</span> <span style="color:green">"button"</span> <span style="color:blue">:value</span> <span style="color:green">"Click me!"</span>
<span style="color:blue">:on-click</span> #<span style="color:#940">(</span><span style="color:#687868;font-weight:bold">swap!</span> click-count <span style="color:#687868;font-weight:bold">inc</span><span style="color:#940">)</span><span style="color:#272">}</span><span style="color:#44a">]</span><span style="color:#940">]</span><span style="color:#272">)</span></pre></pre></div></div><p>Sometimes you may want to maintain state locally in a
component. That is easy to do with an <code>atom</code> as well.</p><p>Here is an example of that, where we call <code>setTimeout</code> every time the component is rendered to
update a counter:</p><div><div class="demo-example clearfix"><a class="demo-example-hide">hide</a><h3 class="demo-heading">Example </h3><div class="simple-demo"><div>Seconds Elapsed: <!-- -->0</div></div></div><div class="demo-source clearfix"><h3 class="demo-heading">Source</h3><pre><span style="color:#272">(</span><span style="color:#687868;font-weight:bold">defn</span> <span style="color:#5050c0;font-weight:bold">timer-component</span> <span style="color:#940">[</span><span style="color:#940">]</span>
<span style="color:#940">(</span><span style="color:#687868;font-weight:bold">let</span> <span style="color:#44a">[</span>seconds-elapsed <span style="color:#272">(</span><span style="color:#687868;font-weight:bold">r/atom</span> 0<span style="color:#272">)</span><span style="color:#44a">]</span>
<span style="color:#44a">(</span><span style="color:#687868;font-weight:bold">fn</span> <span style="color:#272">[</span><span style="color:#272">]</span>
<span style="color:#272">(</span><span style="color:#687868;font-weight:bold">js/setTimeout</span> #<span style="color:#940">(</span><span style="color:#687868;font-weight:bold">swap!</span> seconds-elapsed <span style="color:#687868;font-weight:bold">inc</span><span style="color:#940">)</span> 1000<span style="color:#272">)</span>
<span style="color:#272">[</span><span style="color:blue">:div</span>
<span style="color:green">"Seconds Elapsed: "</span> @seconds-elapsed<span style="color:#272">]</span><span style="color:#44a">)</span><span style="color:#940">)</span><span style="color:#272">)</span></pre></div></div><p>The previous example also uses another feature of Reagent: a
component function can return another function, that is used to do
the actual rendering. This function is called with the same
arguments as the first one.</p><p>This allows you to perform some setup of newly created
components without resorting to React’s lifecycle events.</p><p>By simply passing an <code>atom</code> around you can share
state management between components, like this:</p><div><div class="demo-example clearfix"><a class="demo-example-hide">hide</a><h3 class="demo-heading">Example </h3><div class="simple-demo"><div><p>The value is now: <!-- -->foo</p><p>Change it here: <input type="text" value="foo"/></p></div></div></div><div class="demo-source clearfix"><h3 class="demo-heading">Source</h3><pre><pre><span style="color:#272">(</span><span style="color:#687868;font-weight:bold">ns</span> <span style="color:#5050c0;font-weight:bold">example</span>
<span style="color:#940">(</span><span style="color:blue">:require</span> <span style="color:#44a">[</span>reagent.core <span style="color:blue">:as</span> r<span style="color:#44a">]</span><span style="color:#940">)</span><span style="color:#272">)</span></pre><pre><span style="color:#272">(</span><span style="color:#687868;font-weight:bold">defn</span> <span style="color:#5050c0;font-weight:bold">atom-input</span> <span style="color:#940">[</span>value<span style="color:#940">]</span>
<span style="color:#940">[</span><span style="color:blue">:input</span> <span style="color:#44a">{</span><span style="color:blue">:type</span> <span style="color:green">"text"</span>
<span style="color:blue">:value</span> @value
<span style="color:blue">:on-change</span> #<span style="color:#272">(</span><span style="color:#687868;font-weight:bold">reset!</span> value <span style="color:#940">(</span><span style="color:#687868;font-weight:bold">-></span> <span style="color:#687868;font-weight:bold">%</span> .-target .-value<span style="color:#940">)</span><span style="color:#272">)</span><span style="color:#44a">}</span><span style="color:#940">]</span><span style="color:#272">)</span>
<span style="color:#272">(</span><span style="color:#687868;font-weight:bold">defn</span> <span style="color:#5050c0;font-weight:bold">shared-state</span> <span style="color:#940">[</span><span style="color:#940">]</span>
<span style="color:#940">(</span><span style="color:#687868;font-weight:bold">let</span> <span style="color:#44a">[</span>val <span style="color:#272">(</span><span style="color:#687868;font-weight:bold">r/atom</span> <span style="color:green">"foo"</span><span style="color:#272">)</span><span style="color:#44a">]</span>
<span style="color:#44a">(</span><span style="color:#687868;font-weight:bold">fn</span> <span style="color:#272">[</span><span style="color:#272">]</span>
<span style="color:#272">[</span><span style="color:blue">:div</span>
<span style="color:#940">[</span><span style="color:blue">:p</span> <span style="color:green">"The value is now: "</span> @val<span style="color:#940">]</span>
<span style="color:#940">[</span><span style="color:blue">:p</span> <span style="color:green">"Change it here: "</span> <span style="color:#44a">[</span>atom-input val<span style="color:#44a">]</span><span style="color:#940">]</span><span style="color:#272">]</span><span style="color:#44a">)</span><span style="color:#940">)</span><span style="color:#272">)</span></pre></pre></div></div><p><strong>Note: </strong>Component functions can be called with any
arguments – as long as they are immutable. You <em>could</em> use
mutable objects as well, but then you have to make sure that the
component is updated when your data changes. Reagent assumes by
default that two objects are equal if they are the same object.</p></div><div class="demo-text"><h2>Essential API</h2><p>Reagent supports most of React’s API, but there is really only
one entry-point that is necessary for most applications: <code>reagent.dom/render</code>.</p><p>It takes two arguments: a component, and a DOM node. For
example, splashing the very first example all over the page would
look like this:</p><div><div class="demo-source clearfix"><h3 class="demo-heading">Source</h3><pre><pre><span style="color:#272">(</span><span style="color:#687868;font-weight:bold">ns</span> <span style="color:#5050c0;font-weight:bold">example</span>
<span style="color:#940">(</span><span style="color:blue">:require</span> <span style="color:#44a">[</span>reagent.dom <span style="color:blue">:as</span> rdom<span style="color:#44a">]</span><span style="color:#940">)</span><span style="color:#272">)</span></pre><pre><span style="color:#272">(</span><span style="color:#687868;font-weight:bold">defn</span> <span style="color:#5050c0;font-weight:bold">simple-component</span> <span style="color:#940">[</span><span style="color:#940">]</span>
<span style="color:#940">[</span><span style="color:blue">:div</span>
<span style="color:#44a">[</span><span style="color:blue">:p</span> <span style="color:green">"I am a component!"</span><span style="color:#44a">]</span>
<span style="color:#44a">[</span><span style="color:blue">:p.someclass</span>
<span style="color:green">"I have "</span> <span style="color:#272">[</span><span style="color:blue">:strong</span> <span style="color:green">"bold"</span><span style="color:#272">]</span>
<span style="color:#272">[</span><span style="color:blue">:span</span> <span style="color:#940">{</span><span style="color:blue">:style</span> <span style="color:#44a">{</span><span style="color:blue">:color</span> <span style="color:green">"red"</span><span style="color:#44a">}</span><span style="color:#940">}</span> <span style="color:green">" and red "</span><span style="color:#272">]</span> <span style="color:green">"text."</span><span style="color:#44a">]</span><span style="color:#940">]</span><span style="color:#272">)</span>
<span style="color:#272">(</span><span style="color:#687868;font-weight:bold">defn</span> <span style="color:#5050c0;font-weight:bold">render-simple</span> <span style="color:#940">[</span><span style="color:#940">]</span>
<span style="color:#940">(</span><span style="color:#687868;font-weight:bold">rdom/render</span>
<span style="color:#44a">[</span>simple-component<span style="color:#44a">]</span>
<span style="color:#44a">(</span>.-body <span style="color:#687868;font-weight:bold">js/document</span><span style="color:#44a">)</span><span style="color:#940">)</span><span style="color:#272">)</span></pre></pre></div></div></div><div class="demo-text"><h2>Putting it all together</h2><p>Here is a slightly less contrived example: a simple BMI
calculator.</p><p>Data is kept in a single <code>reagent.core/atom</code>: a map
with height, weight and BMI as keys.</p><div><div class="demo-example clearfix"><a class="demo-example-hide">hide</a><h3 class="demo-heading">Example </h3><div class="simple-demo"><div><h3>BMI calculator</h3><div>Height: <!-- -->180<!-- -->cm<input type="range" min="100" max="220" style="width:100%" value="180"/></div><div>Weight: <!-- -->80<!-- -->kg<input type="range" min="30" max="150" style="width:100%" value="80"/></div><div>BMI: <!-- -->24<!-- --> <span style="color:inherit">normal</span><input type="range" min="10" max="50" style="width:100%" value="24.691358024691358"/></div></div></div></div><div class="demo-source clearfix"><h3 class="demo-heading">Source</h3><pre><pre><span style="color:#272">(</span><span style="color:#687868;font-weight:bold">ns</span> <span style="color:#5050c0;font-weight:bold">example</span>
<span style="color:#940">(</span><span style="color:blue">:require</span> <span style="color:#44a">[</span>reagent.core <span style="color:blue">:as</span> r<span style="color:#44a">]</span><span style="color:#940">)</span><span style="color:#272">)</span></pre><pre><span style="color:#272">(</span><span style="color:#687868;font-weight:bold">defn</span> <span style="color:#5050c0;font-weight:bold">calc-bmi</span> <span style="color:#940">[</span><span style="color:#44a">{</span><span style="color:blue">:keys</span> <span style="color:#272">[</span>height weight bmi<span style="color:#272">]</span> <span style="color:blue">:as</span> data<span style="color:#44a">}</span><span style="color:#940">]</span>
<span style="color:#940">(</span><span style="color:#687868;font-weight:bold">let</span> <span style="color:#44a">[</span>h <span style="color:#272">(</span>/ height 100<span style="color:#272">)</span><span style="color:#44a">]</span>
<span style="color:#44a">(</span><span style="color:#687868;font-weight:bold">if</span> <span style="color:#272">(</span><span style="color:#687868;font-weight:bold">nil?</span> bmi<span style="color:#272">)</span>
<span style="color:#272">(</span><span style="color:#687868;font-weight:bold">assoc</span> data <span style="color:blue">:bmi</span> <span style="color:#940">(</span>/ weight <span style="color:#44a">(</span>* h h<span style="color:#44a">)</span><span style="color:#940">)</span><span style="color:#272">)</span>
<span style="color:#272">(</span><span style="color:#687868;font-weight:bold">assoc</span> data <span style="color:blue">:weight</span> <span style="color:#940">(</span>* bmi h h<span style="color:#940">)</span><span style="color:#272">)</span><span style="color:#44a">)</span><span style="color:#940">)</span><span style="color:#272">)</span>
<span style="color:#272">(</span><span style="color:#687868;font-weight:bold">def</span> <span style="color:#5050c0;font-weight:bold">bmi-data</span> <span style="color:#940">(</span><span style="color:#687868;font-weight:bold">r/atom</span> <span style="color:#44a">(</span>calc-bmi <span style="color:#272">{</span><span style="color:blue">:height</span> 180 <span style="color:blue">:weight</span> 80<span style="color:#272">}</span><span style="color:#44a">)</span><span style="color:#940">)</span><span style="color:#272">)</span>
<span style="color:#272">(</span><span style="color:#687868;font-weight:bold">defn</span> <span style="color:#5050c0;font-weight:bold">slider</span> <span style="color:#940">[</span>param value min max invalidates<span style="color:#940">]</span>
<span style="color:#940">[</span><span style="color:blue">:input</span> <span style="color:#44a">{</span><span style="color:blue">:type</span> <span style="color:green">"range"</span> <span style="color:blue">:value</span> value <span style="color:blue">:min</span> min <span style="color:blue">:max</span> max
<span style="color:blue">:style</span> <span style="color:#272">{</span><span style="color:blue">:width</span> <span style="color:green">"100%"</span><span style="color:#272">}</span>
<span style="color:blue">:on-change</span> <span style="color:#272">(</span><span style="color:#687868;font-weight:bold">fn</span> <span style="color:#940">[</span>e<span style="color:#940">]</span>
<span style="color:#940">(</span><span style="color:#687868;font-weight:bold">let</span> <span style="color:#44a">[</span>new-value <span style="color:#272">(</span><span style="color:#687868;font-weight:bold">js/parseInt</span> <span style="color:#940">(</span>.. e -target -value<span style="color:#940">)</span><span style="color:#272">)</span><span style="color:#44a">]</span>
<span style="color:#44a">(</span><span style="color:#687868;font-weight:bold">swap!</span> bmi-data
<span style="color:#272">(</span><span style="color:#687868;font-weight:bold">fn</span> <span style="color:#940">[</span>data<span style="color:#940">]</span>
<span style="color:#940">(</span><span style="color:#687868;font-weight:bold">-></span> data
<span style="color:#44a">(</span><span style="color:#687868;font-weight:bold">assoc</span> param new-value<span style="color:#44a">)</span>
<span style="color:#44a">(</span><span style="color:#687868;font-weight:bold">dissoc</span> invalidates<span style="color:#44a">)</span>
calc-bmi<span style="color:#940">)</span><span style="color:#272">)</span><span style="color:#44a">)</span><span style="color:#940">)</span><span style="color:#272">)</span><span style="color:#44a">}</span><span style="color:#940">]</span><span style="color:#272">)</span>
<span style="color:#272">(</span><span style="color:#687868;font-weight:bold">defn</span> <span style="color:#5050c0;font-weight:bold">bmi-component</span> <span style="color:#940">[</span><span style="color:#940">]</span>
<span style="color:#940">(</span><span style="color:#687868;font-weight:bold">let</span> <span style="color:#44a">[</span><span style="color:#272">{</span><span style="color:blue">:keys</span> <span style="color:#940">[</span>weight height bmi<span style="color:#940">]</span><span style="color:#272">}</span> @bmi-data
<span style="color:#272">[</span>color diagnose<span style="color:#272">]</span> <span style="color:#272">(</span><span style="color:#687868;font-weight:bold">cond</span>
<span style="color:#940">(</span>< bmi 18.5<span style="color:#940">)</span> <span style="color:#940">[</span><span style="color:green">"orange"</span> <span style="color:green">"underweight"</span><span style="color:#940">]</span>
<span style="color:#940">(</span>< bmi 25<span style="color:#940">)</span> <span style="color:#940">[</span><span style="color:green">"inherit"</span> <span style="color:green">"normal"</span><span style="color:#940">]</span>
<span style="color:#940">(</span>< bmi 30<span style="color:#940">)</span> <span style="color:#940">[</span><span style="color:green">"orange"</span> <span style="color:green">"overweight"</span><span style="color:#940">]</span>
<span style="color:blue">:else</span> <span style="color:#940">[</span><span style="color:green">"red"</span> <span style="color:green">"obese"</span><span style="color:#940">]</span><span style="color:#272">)</span><span style="color:#44a">]</span>
<span style="color:#44a">[</span><span style="color:blue">:div</span>
<span style="color:#272">[</span><span style="color:blue">:h3</span> <span style="color:green">"BMI calculator"</span><span style="color:#272">]</span>
<span style="color:#272">[</span><span style="color:blue">:div</span>
<span style="color:green">"Height: "</span> <span style="color:#940">(</span><span style="color:#687868;font-weight:bold">int</span> height<span style="color:#940">)</span> <span style="color:green">"cm"</span>
<span style="color:#940">[</span>slider <span style="color:blue">:height</span> height 100 220 <span style="color:blue">:bmi</span><span style="color:#940">]</span><span style="color:#272">]</span>
<span style="color:#272">[</span><span style="color:blue">:div</span>
<span style="color:green">"Weight: "</span> <span style="color:#940">(</span><span style="color:#687868;font-weight:bold">int</span> weight<span style="color:#940">)</span> <span style="color:green">"kg"</span>
<span style="color:#940">[</span>slider <span style="color:blue">:weight</span> weight 30 150 <span style="color:blue">:bmi</span><span style="color:#940">]</span><span style="color:#272">]</span>
<span style="color:#272">[</span><span style="color:blue">:div</span>
<span style="color:green">"BMI: "</span> <span style="color:#940">(</span><span style="color:#687868;font-weight:bold">int</span> bmi<span style="color:#940">)</span> <span style="color:green">" "</span>
<span style="color:#940">[</span><span style="color:blue">:span</span> <span style="color:#44a">{</span><span style="color:blue">:style</span> <span style="color:#272">{</span><span style="color:blue">:color</span> color<span style="color:#272">}</span><span style="color:#44a">}</span> diagnose<span style="color:#940">]</span>
<span style="color:#940">[</span>slider <span style="color:blue">:bmi</span> bmi 10 50 <span style="color:blue">:weight</span><span style="color:#940">]</span><span style="color:#272">]</span><span style="color:#44a">]</span><span style="color:#940">)</span><span style="color:#272">)</span></pre></pre></div></div></div><div class="demo-text"><h2>Performance</h2><p>React itself is very fast, and so is Reagent. In fact, Reagent
will be even faster than plain React a lot of the time, thanks to
optimizations made possible by ClojureScript.</p><p>Mounted components are only re-rendered when their parameters
have changed. The change could come from a deref’ed <code>atom</code>, the arguments passed to the component or
component state.</p><p>All of these are checked for changes with <code>identical?</code> which is basically only a pointer
comparison, so the overhead is very low. Maps passed as arguments
to components are compared the same way: they are considered equal
if all their entries are identical. This also applies to built-in
React components like <code>:div</code>, <code>:p</code>, etc.</p><p>All this means that you simply won’t have to care about
performance most of the time. Just define your UI however you like
– it will be fast enough.</p><p>There are a couple of situations that you might have to care
about, though. If you give Reagent a big <code>seq</code> of
components to render, you might have to supply all of them with a
unique <code>:key</code> attribute to speed up rendering (see
above). Also note that anonymous functions are not, in general,
equal to each other even if they represent the same code and
closure.</p><p>But again, in general you should just trust that React and
Reagent will be fast enough. This very page is composed of a single
Reagent component with thousands of child components (every single
parenthesis etc in the code examples is a separate component), and
yet the page can be updated many times every second without taxing
the browser the slightest.</p><p>Incidentally, this page also uses another React trick: the
entire page is pre-rendered using Node, and <code>reagent.dom.server/render-to-string</code>. When it is loaded
into the browser, React automatically attaches event-handlers to
the already present DOM tree.</p></div></div><a href="https://github.com/reagent-project/reagent" class="github-badge"><img style="position:absolute;top:0;left:0;border:0" alt="Fork me on GitHub" src="https://s3.amazonaws.com/github/ribbons/forkme_left_orange_ff7600.png"/></a></div></div></div><script>var pageConfig = {"page-path":"/index.html"}</script><script src="js/main.js?2d6018" type="text/javascript"></script></body></html>