forked from reagent-project/reagent
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
148 lines (136 loc) · 86.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
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>Reagent: 给 ClojureScript 的极简的 React</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
<link rel='stylesheet' href='assets/demo.css?1448548628907'>
</head>
<body>
<div data-reactid=".1w3qzz253pc" data-react-checksum="1056449869"><div class="nav" data-reactid=".1w3qzz253pc.0"><ul class="nav" data-reactid=".1w3qzz253pc.0.0"><li class="brand" data-reactid=".1w3qzz253pc.0.0.0"><a href="index.html" data-reactid=".1w3qzz253pc.0.0.0.0">Reagent:</a></li><li data-reactid=".1w3qzz253pc.0.0.1"><a href="index.html" data-reactid=".1w3qzz253pc.0.0.1.0">Intro</a></li><li data-reactid=".1w3qzz253pc.0.0.2"><a href="news/index.html" data-reactid=".1w3qzz253pc.0.0.2.0">News</a></li><li data-reactid=".1w3qzz253pc.0.0.3"><a href="https://github.com/holmsand/reagent" data-reactid=".1w3qzz253pc.0.0.3.0">GitHub</a></li></ul></div><div class="reagent-demo" data-reactid=".1w3qzz253pc.1"><div data-reactid=".1w3qzz253pc.1.0"></div><h1 data-reactid=".1w3qzz253pc.1.1">Reagent: 给 ClojureScript 的极简的 React</h1><div class="demo-text" data-reactid=".1w3qzz253pc.1.2"><h2 data-reactid=".1w3qzz253pc.1.2.0">介绍一下 Reagent</h2><p data-reactid=".1w3qzz253pc.1.2.1"><a href="https://github.com/holmsand/reagent" data-reactid=".1w3qzz253pc.1.2.1.0">Reagent</a><span data-reactid=".1w3qzz253pc.1.2.1.1"> 在
</span><a href="https://github.com/clojure/clojurescript" data-reactid=".1w3qzz253pc.1.2.1.2">ClojureScript</a><span data-reactid=".1w3qzz253pc.1.2.1.3"> 和 </span><a href="http://facebook.github.io/react/" data-reactid=".1w3qzz253pc.1.2.1.4">React</a><span data-reactid=".1w3qzz253pc.1.2.1.5"> 提供了精简的接口. 它帮助你快速地定义 React 组件,
它单纯使用的是 ClojureScript 函数和数据类型,
能够用类似 </span><a href="https://github.com/weavejester/hiccup" data-reactid=".1w3qzz253pc.1.2.1.6">Hiccup</a><span data-reactid=".1w3qzz253pc.1.2.1.7"> 的语法来描述组件.</span></p><p data-reactid=".1w3qzz253pc.1.2.2">Reagent 的目标是实现快速定义任意复杂的界面, 而只依靠很少的基本概念,
同时默认的性能足够好, 不需要额外去操心.</p><p data-reactid=".1w3qzz253pc.1.2.3">一个非常基础的 Reagent 组件看起是这样: </p><div data-reactid=".1w3qzz253pc.1.2.4"><div class="demo-example clearfix" data-reactid=".1w3qzz253pc.1.2.4.0"><a class="demo-example-hide" data-reactid=".1w3qzz253pc.1.2.4.0.0">hide</a><h3 class="demo-heading" data-reactid=".1w3qzz253pc.1.2.4.0.1">Example </h3><div class="simple-demo" data-reactid=".1w3qzz253pc.1.2.4.0.2"><div data-reactid=".1w3qzz253pc.1.2.4.0.2.0"><p data-reactid=".1w3qzz253pc.1.2.4.0.2.0.0">我是一个组件!</p><p class="someclass" data-reactid=".1w3qzz253pc.1.2.4.0.2.0.1"><span data-reactid=".1w3qzz253pc.1.2.4.0.2.0.1.0">我有 </span><strong data-reactid=".1w3qzz253pc.1.2.4.0.2.0.1.1">粗体</strong><span style="color:red;" data-reactid=".1w3qzz253pc.1.2.4.0.2.0.1.2"> 和红色 </span><span data-reactid=".1w3qzz253pc.1.2.4.0.2.0.1.3">的字.</span></p></div></div></div><div class="demo-source clearfix" data-reactid=".1w3qzz253pc.1.2.4.1"><h3 class="demo-heading" data-reactid=".1w3qzz253pc.1.2.4.1.0">Source</h3><pre data-reactid=".1w3qzz253pc.1.2.4.1.1"><pre data-reactid=".1w3qzz253pc.1.2.4.1.1.0"><span style="color:#272;" data-reactid=".1w3qzz253pc.1.2.4.1.1.0.0">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.2.4.1.1.0.1">defn</span><span data-reactid=".1w3qzz253pc.1.2.4.1.1.0.2"> </span><span style="color:#55c;font-weight:bold;" data-reactid=".1w3qzz253pc.1.2.4.1.1.0.3">simple-component</span><span data-reactid=".1w3qzz253pc.1.2.4.1.1.0.4"> </span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.2.4.1.1.0.5">[</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.2.4.1.1.0.6">]</span><span data-reactid=".1w3qzz253pc.1.2.4.1.1.0.7">
</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.2.4.1.1.0.8">[</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.2.4.1.1.0.9">:div</span><span data-reactid=".1w3qzz253pc.1.2.4.1.1.0.a">
</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.2.4.1.1.0.b">[</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.2.4.1.1.0.c">:p</span><span data-reactid=".1w3qzz253pc.1.2.4.1.1.0.d"> </span><span style="color:green;" data-reactid=".1w3qzz253pc.1.2.4.1.1.0.e">"我是一个组件!"</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.2.4.1.1.0.f">]</span><span data-reactid=".1w3qzz253pc.1.2.4.1.1.0.g">
</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.2.4.1.1.0.h">[</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.2.4.1.1.0.i">:p.someclass</span><span data-reactid=".1w3qzz253pc.1.2.4.1.1.0.j">
</span><span style="color:green;" data-reactid=".1w3qzz253pc.1.2.4.1.1.0.k">"我有 "</span><span data-reactid=".1w3qzz253pc.1.2.4.1.1.0.l"> </span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.2.4.1.1.0.m">[</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.2.4.1.1.0.n">:strong</span><span data-reactid=".1w3qzz253pc.1.2.4.1.1.0.o"> </span><span style="color:green;" data-reactid=".1w3qzz253pc.1.2.4.1.1.0.p">"粗体"</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.2.4.1.1.0.q">]</span><span data-reactid=".1w3qzz253pc.1.2.4.1.1.0.r">
</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.2.4.1.1.0.s">[</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.2.4.1.1.0.t">:span</span><span data-reactid=".1w3qzz253pc.1.2.4.1.1.0.u"> </span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.2.4.1.1.0.v">{</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.2.4.1.1.0.w">:style</span><span data-reactid=".1w3qzz253pc.1.2.4.1.1.0.x"> </span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.2.4.1.1.0.y">{</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.2.4.1.1.0.z">:color</span><span data-reactid=".1w3qzz253pc.1.2.4.1.1.0.10"> </span><span style="color:green;" data-reactid=".1w3qzz253pc.1.2.4.1.1.0.11">"red"</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.2.4.1.1.0.12">}</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.2.4.1.1.0.13">}</span><span data-reactid=".1w3qzz253pc.1.2.4.1.1.0.14"> </span><span style="color:green;" data-reactid=".1w3qzz253pc.1.2.4.1.1.0.15">" 和红色 "</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.2.4.1.1.0.16">]</span><span data-reactid=".1w3qzz253pc.1.2.4.1.1.0.17"> </span><span style="color:green;" data-reactid=".1w3qzz253pc.1.2.4.1.1.0.18">"的字."</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.2.4.1.1.0.19">]</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.2.4.1.1.0.1a">]</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.2.4.1.1.0.1b">)</span></pre></pre></div></div><p data-reactid=".1w3qzz253pc.1.2.5">你可以把其他组件作为积木来创造新的组件, 比如:</p><div data-reactid=".1w3qzz253pc.1.2.6"><div class="demo-example clearfix" data-reactid=".1w3qzz253pc.1.2.6.0"><a class="demo-example-hide" data-reactid=".1w3qzz253pc.1.2.6.0.0">hide</a><h3 class="demo-heading" data-reactid=".1w3qzz253pc.1.2.6.0.1">Example </h3><div class="simple-demo" data-reactid=".1w3qzz253pc.1.2.6.0.2"><div data-reactid=".1w3qzz253pc.1.2.6.0.2.0"><p data-reactid=".1w3qzz253pc.1.2.6.0.2.0.0">我包含包含了 simple-component.</p><div data-reactid=".1w3qzz253pc.1.2.6.0.2.0.1"><p data-reactid=".1w3qzz253pc.1.2.6.0.2.0.1.0">我是一个组件!</p><p class="someclass" data-reactid=".1w3qzz253pc.1.2.6.0.2.0.1.1"><span data-reactid=".1w3qzz253pc.1.2.6.0.2.0.1.1.0">我有 </span><strong data-reactid=".1w3qzz253pc.1.2.6.0.2.0.1.1.1">粗体</strong><span style="color:red;" data-reactid=".1w3qzz253pc.1.2.6.0.2.0.1.1.2"> 和红色 </span><span data-reactid=".1w3qzz253pc.1.2.6.0.2.0.1.1.3">的字.</span></p></div></div></div></div><div class="demo-source clearfix" data-reactid=".1w3qzz253pc.1.2.6.1"><h3 class="demo-heading" data-reactid=".1w3qzz253pc.1.2.6.1.0">Source</h3><pre data-reactid=".1w3qzz253pc.1.2.6.1.1"><pre data-reactid=".1w3qzz253pc.1.2.6.1.1.0"><span style="color:#272;" data-reactid=".1w3qzz253pc.1.2.6.1.1.0.0">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.2.6.1.1.0.1">defn</span><span data-reactid=".1w3qzz253pc.1.2.6.1.1.0.2"> </span><span style="color:#55c;font-weight:bold;" data-reactid=".1w3qzz253pc.1.2.6.1.1.0.3">simple-parent</span><span data-reactid=".1w3qzz253pc.1.2.6.1.1.0.4"> </span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.2.6.1.1.0.5">[</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.2.6.1.1.0.6">]</span><span data-reactid=".1w3qzz253pc.1.2.6.1.1.0.7">
</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.2.6.1.1.0.8">[</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.2.6.1.1.0.9">:div</span><span data-reactid=".1w3qzz253pc.1.2.6.1.1.0.a">
</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.2.6.1.1.0.b">[</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.2.6.1.1.0.c">:p</span><span data-reactid=".1w3qzz253pc.1.2.6.1.1.0.d"> </span><span style="color:green;" data-reactid=".1w3qzz253pc.1.2.6.1.1.0.e">"我包含包含了 simple-component."</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.2.6.1.1.0.f">]</span><span data-reactid=".1w3qzz253pc.1.2.6.1.1.0.g">
</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.2.6.1.1.0.h">[</span><span data-reactid=".1w3qzz253pc.1.2.6.1.1.0.i">simple-component</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.2.6.1.1.0.j">]</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.2.6.1.1.0.k">]</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.2.6.1.1.0.l">)</span></pre></pre></div></div><p data-reactid=".1w3qzz253pc.1.2.7">数据通过 Clojure 原本就有的基本数据类型传递到子组件, 比如:</p><div data-reactid=".1w3qzz253pc.1.2.8"><div class="demo-example clearfix" data-reactid=".1w3qzz253pc.1.2.8.0"><a class="demo-example-hide" data-reactid=".1w3qzz253pc.1.2.8.0.0">hide</a><h3 class="demo-heading" data-reactid=".1w3qzz253pc.1.2.8.0.1">Example </h3><div class="simple-demo" data-reactid=".1w3qzz253pc.1.2.8.0.2"><p data-reactid=".1w3qzz253pc.1.2.8.0.2.0"><span data-reactid=".1w3qzz253pc.1.2.8.0.2.0.0">你好, </span><span data-reactid=".1w3qzz253pc.1.2.8.0.2.0.1">世界</span><span data-reactid=".1w3qzz253pc.1.2.8.0.2.0.2">!</span></p></div></div><div class="demo-source clearfix" data-reactid=".1w3qzz253pc.1.2.8.1"><h3 class="demo-heading" data-reactid=".1w3qzz253pc.1.2.8.1.0">Source</h3><pre data-reactid=".1w3qzz253pc.1.2.8.1.1"><pre data-reactid=".1w3qzz253pc.1.2.8.1.1.0"><span style="color:#272;" data-reactid=".1w3qzz253pc.1.2.8.1.1.0.0">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.2.8.1.1.0.1">defn</span><span data-reactid=".1w3qzz253pc.1.2.8.1.1.0.2"> </span><span style="color:#55c;font-weight:bold;" data-reactid=".1w3qzz253pc.1.2.8.1.1.0.3">hello-component</span><span data-reactid=".1w3qzz253pc.1.2.8.1.1.0.4"> </span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.2.8.1.1.0.5">[</span><span data-reactid=".1w3qzz253pc.1.2.8.1.1.0.6">name</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.2.8.1.1.0.7">]</span><span data-reactid=".1w3qzz253pc.1.2.8.1.1.0.8">
</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.2.8.1.1.0.9">[</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.2.8.1.1.0.a">:p</span><span data-reactid=".1w3qzz253pc.1.2.8.1.1.0.b"> </span><span style="color:green;" data-reactid=".1w3qzz253pc.1.2.8.1.1.0.c">"你好, "</span><span data-reactid=".1w3qzz253pc.1.2.8.1.1.0.d"> </span><span data-reactid=".1w3qzz253pc.1.2.8.1.1.0.e">name</span><span data-reactid=".1w3qzz253pc.1.2.8.1.1.0.f"> </span><span style="color:green;" data-reactid=".1w3qzz253pc.1.2.8.1.1.0.g">"!"</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.2.8.1.1.0.h">]</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.2.8.1.1.0.i">)</span><span data-reactid=".1w3qzz253pc.1.2.8.1.1.0.j">
</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.2.8.1.1.0.k">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.2.8.1.1.0.l">defn</span><span data-reactid=".1w3qzz253pc.1.2.8.1.1.0.m"> </span><span style="color:#55c;font-weight:bold;" data-reactid=".1w3qzz253pc.1.2.8.1.1.0.n">say-hello</span><span data-reactid=".1w3qzz253pc.1.2.8.1.1.0.o"> </span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.2.8.1.1.0.p">[</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.2.8.1.1.0.q">]</span><span data-reactid=".1w3qzz253pc.1.2.8.1.1.0.r">
</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.2.8.1.1.0.s">[</span><span data-reactid=".1w3qzz253pc.1.2.8.1.1.0.t">hello-component</span><span data-reactid=".1w3qzz253pc.1.2.8.1.1.0.u"> </span><span style="color:green;" data-reactid=".1w3qzz253pc.1.2.8.1.1.0.v">"世界"</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.2.8.1.1.0.w">]</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.2.8.1.1.0.x">)</span></pre></pre></div></div><p data-reactid=".1w3qzz253pc.1.2.9"><strong data-reactid=".1w3qzz253pc.1.2.9.0">注意: </strong><span data-reactid=".1w3qzz253pc.1.2.9.1">在上面的例子, </span><code data-reactid=".1w3qzz253pc.1.2.9.2">hello-component</code><span data-reactid=".1w3qzz253pc.1.2.9.3"> 大概可以同时被认为是普通的
Clojure 函数, 而不是一个特殊的 Reagent 组件, 或者说, 可以写成圆括号而不使用花括号.
唯一的差别会是性能, 因为`真正`的 Reagent 组件只会在数据改变时重新渲染.
更加复杂的组件(见下文)必须使用方括号来调用.</span></p><p data-reactid=".1w3qzz253pc.1.2.a"><span data-reactid=".1w3qzz253pc.1.2.a.0">这是另一个例子, 把列表元素显示为 </span><code data-reactid=".1w3qzz253pc.1.2.a.1">seq</code><span data-reactid=".1w3qzz253pc.1.2.a.2">:</span></p><div data-reactid=".1w3qzz253pc.1.2.b"><div class="demo-example clearfix" data-reactid=".1w3qzz253pc.1.2.b.0"><a class="demo-example-hide" data-reactid=".1w3qzz253pc.1.2.b.0.0">hide</a><h3 class="demo-heading" data-reactid=".1w3qzz253pc.1.2.b.0.1">Example </h3><div class="simple-demo" data-reactid=".1w3qzz253pc.1.2.b.0.2"><div data-reactid=".1w3qzz253pc.1.2.b.0.2.0"><span data-reactid=".1w3qzz253pc.1.2.b.0.2.0.0">这是个列表:</span><ul data-reactid=".1w3qzz253pc.1.2.b.0.2.0.1"><li data-reactid=".1w3qzz253pc.1.2.b.0.2.0.1.$0"><span data-reactid=".1w3qzz253pc.1.2.b.0.2.0.1.$0.0">Item </span><span data-reactid=".1w3qzz253pc.1.2.b.0.2.0.1.$0.1">0</span></li><li data-reactid=".1w3qzz253pc.1.2.b.0.2.0.1.$1"><span data-reactid=".1w3qzz253pc.1.2.b.0.2.0.1.$1.0">Item </span><span data-reactid=".1w3qzz253pc.1.2.b.0.2.0.1.$1.1">1</span></li><li data-reactid=".1w3qzz253pc.1.2.b.0.2.0.1.$2"><span data-reactid=".1w3qzz253pc.1.2.b.0.2.0.1.$2.0">Item </span><span data-reactid=".1w3qzz253pc.1.2.b.0.2.0.1.$2.1">2</span></li></ul></div></div></div><div class="demo-source clearfix" data-reactid=".1w3qzz253pc.1.2.b.1"><h3 class="demo-heading" data-reactid=".1w3qzz253pc.1.2.b.1.0">Source</h3><pre data-reactid=".1w3qzz253pc.1.2.b.1.1"><pre data-reactid=".1w3qzz253pc.1.2.b.1.1.0"><span style="color:#272;" data-reactid=".1w3qzz253pc.1.2.b.1.1.0.0">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.2.b.1.1.0.1">defn</span><span data-reactid=".1w3qzz253pc.1.2.b.1.1.0.2"> </span><span style="color:#55c;font-weight:bold;" data-reactid=".1w3qzz253pc.1.2.b.1.1.0.3">lister</span><span data-reactid=".1w3qzz253pc.1.2.b.1.1.0.4"> </span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.2.b.1.1.0.5">[</span><span data-reactid=".1w3qzz253pc.1.2.b.1.1.0.6">items</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.2.b.1.1.0.7">]</span><span data-reactid=".1w3qzz253pc.1.2.b.1.1.0.8">
</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.2.b.1.1.0.9">[</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.2.b.1.1.0.a">:ul</span><span data-reactid=".1w3qzz253pc.1.2.b.1.1.0.b">
</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.2.b.1.1.0.c">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.2.b.1.1.0.d">for</span><span data-reactid=".1w3qzz253pc.1.2.b.1.1.0.e"> </span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.2.b.1.1.0.f">[</span><span data-reactid=".1w3qzz253pc.1.2.b.1.1.0.g">item</span><span data-reactid=".1w3qzz253pc.1.2.b.1.1.0.h"> </span><span data-reactid=".1w3qzz253pc.1.2.b.1.1.0.i">items</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.2.b.1.1.0.j">]</span><span data-reactid=".1w3qzz253pc.1.2.b.1.1.0.k">
</span><span data-reactid=".1w3qzz253pc.1.2.b.1.1.0.l">^</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.2.b.1.1.0.m">{</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.2.b.1.1.0.n">:key</span><span data-reactid=".1w3qzz253pc.1.2.b.1.1.0.o"> </span><span data-reactid=".1w3qzz253pc.1.2.b.1.1.0.p">item</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.2.b.1.1.0.q">}</span><span data-reactid=".1w3qzz253pc.1.2.b.1.1.0.r"> </span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.2.b.1.1.0.s">[</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.2.b.1.1.0.t">:li</span><span data-reactid=".1w3qzz253pc.1.2.b.1.1.0.u"> </span><span style="color:green;" data-reactid=".1w3qzz253pc.1.2.b.1.1.0.v">"Item "</span><span data-reactid=".1w3qzz253pc.1.2.b.1.1.0.w"> </span><span data-reactid=".1w3qzz253pc.1.2.b.1.1.0.x">item</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.2.b.1.1.0.y">]</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.2.b.1.1.0.z">)</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.2.b.1.1.0.10">]</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.2.b.1.1.0.11">)</span><span data-reactid=".1w3qzz253pc.1.2.b.1.1.0.12">
</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.2.b.1.1.0.13">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.2.b.1.1.0.14">defn</span><span data-reactid=".1w3qzz253pc.1.2.b.1.1.0.15"> </span><span style="color:#55c;font-weight:bold;" data-reactid=".1w3qzz253pc.1.2.b.1.1.0.16">lister-user</span><span data-reactid=".1w3qzz253pc.1.2.b.1.1.0.17"> </span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.2.b.1.1.0.18">[</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.2.b.1.1.0.19">]</span><span data-reactid=".1w3qzz253pc.1.2.b.1.1.0.1a">
</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.2.b.1.1.0.1b">[</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.2.b.1.1.0.1c">:div</span><span data-reactid=".1w3qzz253pc.1.2.b.1.1.0.1d">
</span><span style="color:green;" data-reactid=".1w3qzz253pc.1.2.b.1.1.0.1e">"这是个列表:"</span><span data-reactid=".1w3qzz253pc.1.2.b.1.1.0.1f">
</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.2.b.1.1.0.1g">[</span><span data-reactid=".1w3qzz253pc.1.2.b.1.1.0.1h">lister</span><span data-reactid=".1w3qzz253pc.1.2.b.1.1.0.1i"> </span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.2.b.1.1.0.1j">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.2.b.1.1.0.1k">range</span><span data-reactid=".1w3qzz253pc.1.2.b.1.1.0.1l"> </span><span data-reactid=".1w3qzz253pc.1.2.b.1.1.0.1m">3</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.2.b.1.1.0.1n">)</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.2.b.1.1.0.1o">]</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.2.b.1.1.0.1p">]</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.2.b.1.1.0.1q">)</span></pre></pre></div></div><p data-reactid=".1w3qzz253pc.1.2.c"><strong data-reactid=".1w3qzz253pc.1.2.c.0">Note: </strong><span data-reactid=".1w3qzz253pc.1.2.c.1">上面的 </span><code data-reactid=".1w3qzz253pc.1.2.c.2">^{:key item}</code><span data-reactid=".1w3qzz253pc.1.2.c.3"> 在这个简单的例子里并不是非常必要,
不过在列表的每个动态生成的组件上附加一个唯一的 key 是一个好的实践,
能够帮助 React 提升大列表的性能. key 可以用 meta-data (就像前面这个例子), 或者作为</span><code data-reactid=".1w3qzz253pc.1.2.c.4">:key</code><span data-reactid=".1w3qzz253pc.1.2.c.5"> 元素设置在组件的第一个参数(需要是 map)上.
阅读 React </span><a href="http://facebook.github.io/react/docs/multiple-components.html#dynamic-children" data-reactid=".1w3qzz253pc.1.2.c.6">文档</a><span data-reactid=".1w3qzz253pc.1.2.c.7">了解更多.</span></p></div><div class="demo-text" data-reactid=".1w3qzz253pc.1.3"><h2 data-reactid=".1w3qzz253pc.1.3.0">Reagent 的管理状态</h2><p data-reactid=".1w3qzz253pc.1.3.1"><span data-reactid=".1w3qzz253pc.1.3.1.0">Reagent 管理状态最简单的办法是用 Reagent 自带的版本的</span><code data-reactid=".1w3qzz253pc.1.3.1.1">atom</code><span data-reactid=".1w3qzz253pc.1.3.1.2">. 它和在 clojure.core 里的 atom 运行起来一样,
除了它会记录它的每次 deref(解引用). 每个用了 </span><code data-reactid=".1w3qzz253pc.1.3.1.3">atom</code><span data-reactid=".1w3qzz253pc.1.3.1.4"> 的组件在它的值改变时都会自动重新渲染.</span></p><p data-reactid=".1w3qzz253pc.1.3.2">我们用一个简单的例子演示一下:</p><div data-reactid=".1w3qzz253pc.1.3.3"><div class="demo-example clearfix" data-reactid=".1w3qzz253pc.1.3.3.0"><a class="demo-example-hide" data-reactid=".1w3qzz253pc.1.3.3.0.0">hide</a><h3 class="demo-heading" data-reactid=".1w3qzz253pc.1.3.3.0.1">Example </h3><div class="simple-demo" data-reactid=".1w3qzz253pc.1.3.3.0.2"><div data-reactid=".1w3qzz253pc.1.3.3.0.2.0"><span data-reactid=".1w3qzz253pc.1.3.3.0.2.0.0">这个 atom </span><code data-reactid=".1w3qzz253pc.1.3.3.0.2.0.1">click-count</code><span data-reactid=".1w3qzz253pc.1.3.3.0.2.0.2"> 的值是: </span><span data-reactid=".1w3qzz253pc.1.3.3.0.2.0.3">0</span><span data-reactid=".1w3qzz253pc.1.3.3.0.2.0.4">. </span><input type="button" value="点我!" data-reactid=".1w3qzz253pc.1.3.3.0.2.0.5"></div></div></div><div class="demo-source clearfix" data-reactid=".1w3qzz253pc.1.3.3.1"><h3 class="demo-heading" data-reactid=".1w3qzz253pc.1.3.3.1.0">Source</h3><pre data-reactid=".1w3qzz253pc.1.3.3.1.1"><pre data-reactid=".1w3qzz253pc.1.3.3.1.1.0"><span style="color:#272;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.0">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.1">ns</span><span data-reactid=".1w3qzz253pc.1.3.3.1.1.0.2"> </span><span style="color:#55c;font-weight:bold;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.3">example</span><span data-reactid=".1w3qzz253pc.1.3.3.1.1.0.4">
</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.5">(</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.6">:require</span><span data-reactid=".1w3qzz253pc.1.3.3.1.1.0.7"> </span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.8">[</span><span data-reactid=".1w3qzz253pc.1.3.3.1.1.0.9">reagent.core</span><span data-reactid=".1w3qzz253pc.1.3.3.1.1.0.a"> </span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.b">:as</span><span data-reactid=".1w3qzz253pc.1.3.3.1.1.0.c"> </span><span data-reactid=".1w3qzz253pc.1.3.3.1.1.0.d">reagent</span><span data-reactid=".1w3qzz253pc.1.3.3.1.1.0.e"> </span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.f">:refer</span><span data-reactid=".1w3qzz253pc.1.3.3.1.1.0.g"> </span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.h">[</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.i">atom</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.j">]</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.k">]</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.l">)</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.m">)</span><span data-reactid=".1w3qzz253pc.1.3.3.1.1.0.n">
</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.o">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.p">def</span><span data-reactid=".1w3qzz253pc.1.3.3.1.1.0.q"> </span><span style="color:#55c;font-weight:bold;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.r">click-count</span><span data-reactid=".1w3qzz253pc.1.3.3.1.1.0.s"> </span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.t">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.u">atom</span><span data-reactid=".1w3qzz253pc.1.3.3.1.1.0.v"> </span><span data-reactid=".1w3qzz253pc.1.3.3.1.1.0.w">0</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.x">)</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.y">)</span><span data-reactid=".1w3qzz253pc.1.3.3.1.1.0.z">
</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.10">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.11">defn</span><span data-reactid=".1w3qzz253pc.1.3.3.1.1.0.12"> </span><span style="color:#55c;font-weight:bold;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.13">counting-component</span><span data-reactid=".1w3qzz253pc.1.3.3.1.1.0.14"> </span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.15">[</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.16">]</span><span data-reactid=".1w3qzz253pc.1.3.3.1.1.0.17">
</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.18">[</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.19">:div</span><span data-reactid=".1w3qzz253pc.1.3.3.1.1.0.1a">
</span><span style="color:green;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.1b">"这个 atom "</span><span data-reactid=".1w3qzz253pc.1.3.3.1.1.0.1c"> </span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.1d">[</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.1e">:code</span><span data-reactid=".1w3qzz253pc.1.3.3.1.1.0.1f"> </span><span style="color:green;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.1g">"click-count"</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.1h">]</span><span data-reactid=".1w3qzz253pc.1.3.3.1.1.0.1i"> </span><span style="color:green;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.1j">" 的值是: "</span><span data-reactid=".1w3qzz253pc.1.3.3.1.1.0.1k">
</span><span data-reactid=".1w3qzz253pc.1.3.3.1.1.0.1l">@click-count</span><span data-reactid=".1w3qzz253pc.1.3.3.1.1.0.1m"> </span><span style="color:green;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.1n">". "</span><span data-reactid=".1w3qzz253pc.1.3.3.1.1.0.1o">
</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.1p">[</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.1q">:input</span><span data-reactid=".1w3qzz253pc.1.3.3.1.1.0.1r"> </span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.1s">{</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.1t">:type</span><span data-reactid=".1w3qzz253pc.1.3.3.1.1.0.1u"> </span><span style="color:green;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.1v">"button"</span><span data-reactid=".1w3qzz253pc.1.3.3.1.1.0.1w"> </span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.1x">:value</span><span data-reactid=".1w3qzz253pc.1.3.3.1.1.0.1y"> </span><span style="color:green;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.1z">"点我!"</span><span data-reactid=".1w3qzz253pc.1.3.3.1.1.0.20">
</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.21">:on-click</span><span data-reactid=".1w3qzz253pc.1.3.3.1.1.0.22"> </span><span data-reactid=".1w3qzz253pc.1.3.3.1.1.0.23">#</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.24">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.25">swap!</span><span data-reactid=".1w3qzz253pc.1.3.3.1.1.0.26"> </span><span data-reactid=".1w3qzz253pc.1.3.3.1.1.0.27">click-count</span><span data-reactid=".1w3qzz253pc.1.3.3.1.1.0.28"> </span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.29">inc</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.2a">)</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.2b">}</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.2c">]</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.2d">]</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.3.3.1.1.0.2e">)</span></pre></pre></div></div><p data-reactid=".1w3qzz253pc.1.3.4"><span data-reactid=".1w3qzz253pc.1.3.4.0">有时你要在一个组件局部维护状态.
这种情况用 </span><code data-reactid=".1w3qzz253pc.1.3.4.1">atom</code><span data-reactid=".1w3qzz253pc.1.3.4.2"> 处理起来也容易.</span></p><p data-reactid=".1w3qzz253pc.1.3.5"><span data-reactid=".1w3qzz253pc.1.3.5.0">这是一个例子, 每次调用 </span><code data-reactid=".1w3qzz253pc.1.3.5.1">setTimeout</code><span data-reactid=".1w3qzz253pc.1.3.5.2"> 组件就会被渲染然后更新计数器:</span></p><div data-reactid=".1w3qzz253pc.1.3.6"><div class="demo-example clearfix" data-reactid=".1w3qzz253pc.1.3.6.0"><a class="demo-example-hide" data-reactid=".1w3qzz253pc.1.3.6.0.0">hide</a><h3 class="demo-heading" data-reactid=".1w3qzz253pc.1.3.6.0.1">Example </h3><div class="simple-demo" data-reactid=".1w3qzz253pc.1.3.6.0.2"><div data-reactid=".1w3qzz253pc.1.3.6.0.2.0"><span data-reactid=".1w3qzz253pc.1.3.6.0.2.0.0">时间按秒流逝了: </span><span data-reactid=".1w3qzz253pc.1.3.6.0.2.0.1">0</span></div></div></div><div class="demo-source clearfix" data-reactid=".1w3qzz253pc.1.3.6.1"><h3 class="demo-heading" data-reactid=".1w3qzz253pc.1.3.6.1.0">Source</h3><pre data-reactid=".1w3qzz253pc.1.3.6.1.1"><pre data-reactid=".1w3qzz253pc.1.3.6.1.1.0"><span style="color:#272;" data-reactid=".1w3qzz253pc.1.3.6.1.1.0.0">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.3.6.1.1.0.1">defn</span><span data-reactid=".1w3qzz253pc.1.3.6.1.1.0.2"> </span><span style="color:#55c;font-weight:bold;" data-reactid=".1w3qzz253pc.1.3.6.1.1.0.3">timer-component</span><span data-reactid=".1w3qzz253pc.1.3.6.1.1.0.4"> </span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.3.6.1.1.0.5">[</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.3.6.1.1.0.6">]</span><span data-reactid=".1w3qzz253pc.1.3.6.1.1.0.7">
</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.3.6.1.1.0.8">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.3.6.1.1.0.9">let</span><span data-reactid=".1w3qzz253pc.1.3.6.1.1.0.a"> </span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.3.6.1.1.0.b">[</span><span data-reactid=".1w3qzz253pc.1.3.6.1.1.0.c">seconds-elapsed</span><span data-reactid=".1w3qzz253pc.1.3.6.1.1.0.d"> </span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.3.6.1.1.0.e">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.3.6.1.1.0.f">atom</span><span data-reactid=".1w3qzz253pc.1.3.6.1.1.0.g"> </span><span data-reactid=".1w3qzz253pc.1.3.6.1.1.0.h">0</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.3.6.1.1.0.i">)</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.3.6.1.1.0.j">]</span><span data-reactid=".1w3qzz253pc.1.3.6.1.1.0.k">
</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.3.6.1.1.0.l">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.3.6.1.1.0.m">fn</span><span data-reactid=".1w3qzz253pc.1.3.6.1.1.0.n"> </span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.3.6.1.1.0.o">[</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.3.6.1.1.0.p">]</span><span data-reactid=".1w3qzz253pc.1.3.6.1.1.0.q">
</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.3.6.1.1.0.r">(</span><span data-reactid=".1w3qzz253pc.1.3.6.1.1.0.s">js/setTimeout</span><span data-reactid=".1w3qzz253pc.1.3.6.1.1.0.t"> </span><span data-reactid=".1w3qzz253pc.1.3.6.1.1.0.u">#</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.3.6.1.1.0.v">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.3.6.1.1.0.w">swap!</span><span data-reactid=".1w3qzz253pc.1.3.6.1.1.0.x"> </span><span data-reactid=".1w3qzz253pc.1.3.6.1.1.0.y">seconds-elapsed</span><span data-reactid=".1w3qzz253pc.1.3.6.1.1.0.z"> </span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.3.6.1.1.0.10">inc</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.3.6.1.1.0.11">)</span><span data-reactid=".1w3qzz253pc.1.3.6.1.1.0.12"> </span><span data-reactid=".1w3qzz253pc.1.3.6.1.1.0.13">1000</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.3.6.1.1.0.14">)</span><span data-reactid=".1w3qzz253pc.1.3.6.1.1.0.15">
</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.3.6.1.1.0.16">[</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.3.6.1.1.0.17">:div</span><span data-reactid=".1w3qzz253pc.1.3.6.1.1.0.18">
</span><span style="color:green;" data-reactid=".1w3qzz253pc.1.3.6.1.1.0.19">"时间按秒流逝了: "</span><span data-reactid=".1w3qzz253pc.1.3.6.1.1.0.1a"> </span><span data-reactid=".1w3qzz253pc.1.3.6.1.1.0.1b">@seconds-elapsed</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.3.6.1.1.0.1c">]</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.3.6.1.1.0.1d">)</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.3.6.1.1.0.1e">)</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.3.6.1.1.0.1f">)</span></pre></pre></div></div><p data-reactid=".1w3qzz253pc.1.3.7">前面这个例子也用到了 Reagent 另一个功能:
一个组件的函数可以返回另一个函数, 然后用于实际的渲染当中.
这个函数和第一个函数用相同的参数去调用.</p><p data-reactid=".1w3qzz253pc.1.3.8">这为新创建的组件做初始化提供了方便, 而不用依赖 React 的生命周期事件.</p><p data-reactid=".1w3qzz253pc.1.3.9"><span data-reactid=".1w3qzz253pc.1.3.9.0">通过把 </span><code data-reactid=".1w3qzz253pc.1.3.9.1">atom</code><span data-reactid=".1w3qzz253pc.1.3.9.2"> 进行传递, 你就可以共享组件之间的状态管理, 比如:</span></p><div data-reactid=".1w3qzz253pc.1.3.a"><div class="demo-example clearfix" data-reactid=".1w3qzz253pc.1.3.a.0"><a class="demo-example-hide" data-reactid=".1w3qzz253pc.1.3.a.0.0">hide</a><h3 class="demo-heading" data-reactid=".1w3qzz253pc.1.3.a.0.1">Example </h3><div class="simple-demo" data-reactid=".1w3qzz253pc.1.3.a.0.2"><div data-reactid=".1w3qzz253pc.1.3.a.0.2.0"><p data-reactid=".1w3qzz253pc.1.3.a.0.2.0.0"><span data-reactid=".1w3qzz253pc.1.3.a.0.2.0.0.0">值现在是: </span><span data-reactid=".1w3qzz253pc.1.3.a.0.2.0.0.1">foo</span></p><p data-reactid=".1w3qzz253pc.1.3.a.0.2.0.1"><span data-reactid=".1w3qzz253pc.1.3.a.0.2.0.1.0">从这里修改它: </span><input type="text" value="foo" data-reactid=".1w3qzz253pc.1.3.a.0.2.0.1.1"></p></div></div></div><div class="demo-source clearfix" data-reactid=".1w3qzz253pc.1.3.a.1"><h3 class="demo-heading" data-reactid=".1w3qzz253pc.1.3.a.1.0">Source</h3><pre data-reactid=".1w3qzz253pc.1.3.a.1.1"><pre data-reactid=".1w3qzz253pc.1.3.a.1.1.0"><span style="color:#272;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.0">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.1">ns</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.2"> </span><span style="color:#55c;font-weight:bold;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.3">example</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.4">
</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.5">(</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.6">:require</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.7"> </span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.8">[</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.9">reagent.core</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.a"> </span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.b">:as</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.c"> </span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.d">reagent</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.e"> </span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.f">:refer</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.g"> </span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.h">[</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.i">atom</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.j">]</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.k">]</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.l">)</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.m">)</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.n">
</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.o">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.p">defn</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.q"> </span><span style="color:#55c;font-weight:bold;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.r">atom-input</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.s"> </span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.t">[</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.u">value</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.v">]</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.w">
</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.x">[</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.y">:input</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.z"> </span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.10">{</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.11">:type</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.12"> </span><span style="color:green;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.13">"text"</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.14">
</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.15">:value</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.16"> </span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.17">@value</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.18">
</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.19">:on-change</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.1a"> </span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.1b">#</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.1c">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.1d">reset!</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.1e"> </span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.1f">value</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.1g"> </span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.1h">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.1i">-></span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.1j"> </span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.1k">%</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.1l"> </span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.1m">.-target</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.1n"> </span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.1o">.-value</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.1p">)</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.1q">)</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.1r">}</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.1s">]</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.1t">)</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.1u">
</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.1v">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.1w">defn</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.1x"> </span><span style="color:#55c;font-weight:bold;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.1y">shared-state</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.1z"> </span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.20">[</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.21">]</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.22">
</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.23">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.24">let</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.25"> </span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.26">[</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.27">val</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.28"> </span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.29">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.2a">atom</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.2b"> </span><span style="color:green;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.2c">"foo"</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.2d">)</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.2e">]</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.2f">
</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.2g">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.2h">fn</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.2i"> </span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.2j">[</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.2k">]</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.2l">
</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.2m">[</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.2n">:div</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.2o">
</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.2p">[</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.2q">:p</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.2r"> </span><span style="color:green;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.2s">"值现在是: "</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.2t"> </span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.2u">@val</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.2v">]</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.2w">
</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.2x">[</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.2y">:p</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.2z"> </span><span style="color:green;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.30">"从这里修改它: "</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.31"> </span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.32">[</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.33">atom-input</span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.34"> </span><span data-reactid=".1w3qzz253pc.1.3.a.1.1.0.35">val</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.36">]</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.37">]</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.38">]</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.39">)</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.3a">)</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.3.a.1.1.0.3b">)</span></pre></pre></div></div><p data-reactid=".1w3qzz253pc.1.3.b"><strong data-reactid=".1w3qzz253pc.1.3.b.0">注意: </strong><span data-reactid=".1w3qzz253pc.1.3.b.1">组件函数可以不加参数直接调用, 只要它们是不可变的.
你 </span><strong data-reactid=".1w3qzz253pc.1.3.b.2">也许也可以</strong><span data-reactid=".1w3qzz253pc.1.3.b.3"> 使用可变的对象, 但那样你需要去保证数据改变时组件也改变.
Reagent 默认会假定两个引用相同的对象, 它们就是相等的.</span></p></div><div class="demo-text" data-reactid=".1w3qzz253pc.1.4"><h2 data-reactid=".1w3qzz253pc.1.4.0">基础 API</h2><p data-reactid=".1w3qzz253pc.1.4.1"><span data-reactid=".1w3qzz253pc.1.4.1.0">Reagent 支持大多数 React 的 API, 不过但与绝大多数应用,
真的仅仅一个调用的入口会被必须被用到: </span><code data-reactid=".1w3qzz253pc.1.4.1.1">reagent.core/render-component</code><span data-reactid=".1w3qzz253pc.1.4.1.2">.</span></p><p data-reactid=".1w3qzz253pc.1.4.2">它接收两个参数: 一个组件, 一个 DOM 节点. 比如,
启动整个页面上第一个例子是这样写:</p><div data-reactid=".1w3qzz253pc.1.4.3"><div class="demo-source clearfix" data-reactid=".1w3qzz253pc.1.4.3.0"><h3 class="demo-heading" data-reactid=".1w3qzz253pc.1.4.3.0.0">Source</h3><pre data-reactid=".1w3qzz253pc.1.4.3.0.1"><pre data-reactid=".1w3qzz253pc.1.4.3.0.1.0"><span style="color:#272;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.0">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.1">ns</span><span data-reactid=".1w3qzz253pc.1.4.3.0.1.0.2"> </span><span style="color:#55c;font-weight:bold;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.3">example</span><span data-reactid=".1w3qzz253pc.1.4.3.0.1.0.4">
</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.5">(</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.6">:require</span><span data-reactid=".1w3qzz253pc.1.4.3.0.1.0.7"> </span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.8">[</span><span data-reactid=".1w3qzz253pc.1.4.3.0.1.0.9">reagent.core</span><span data-reactid=".1w3qzz253pc.1.4.3.0.1.0.a"> </span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.b">:as</span><span data-reactid=".1w3qzz253pc.1.4.3.0.1.0.c"> </span><span data-reactid=".1w3qzz253pc.1.4.3.0.1.0.d">reagent</span><span data-reactid=".1w3qzz253pc.1.4.3.0.1.0.e"> </span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.f">:refer</span><span data-reactid=".1w3qzz253pc.1.4.3.0.1.0.g"> </span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.h">[</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.i">atom</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.j">]</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.k">]</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.l">)</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.m">)</span><span data-reactid=".1w3qzz253pc.1.4.3.0.1.0.n">
</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.o">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.p">defn</span><span data-reactid=".1w3qzz253pc.1.4.3.0.1.0.q"> </span><span style="color:#55c;font-weight:bold;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.r">simple-component</span><span data-reactid=".1w3qzz253pc.1.4.3.0.1.0.s"> </span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.t">[</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.u">]</span><span data-reactid=".1w3qzz253pc.1.4.3.0.1.0.v">
</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.w">[</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.x">:div</span><span data-reactid=".1w3qzz253pc.1.4.3.0.1.0.y">
</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.z">[</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.10">:p</span><span data-reactid=".1w3qzz253pc.1.4.3.0.1.0.11"> </span><span style="color:green;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.12">"我是一个组件!"</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.13">]</span><span data-reactid=".1w3qzz253pc.1.4.3.0.1.0.14">
</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.15">[</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.16">:p.someclass</span><span data-reactid=".1w3qzz253pc.1.4.3.0.1.0.17">
</span><span style="color:green;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.18">"我有 "</span><span data-reactid=".1w3qzz253pc.1.4.3.0.1.0.19"> </span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.1a">[</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.1b">:strong</span><span data-reactid=".1w3qzz253pc.1.4.3.0.1.0.1c"> </span><span style="color:green;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.1d">"粗体"</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.1e">]</span><span data-reactid=".1w3qzz253pc.1.4.3.0.1.0.1f">
</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.1g">[</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.1h">:span</span><span data-reactid=".1w3qzz253pc.1.4.3.0.1.0.1i"> </span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.1j">{</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.1k">:style</span><span data-reactid=".1w3qzz253pc.1.4.3.0.1.0.1l"> </span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.1m">{</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.1n">:color</span><span data-reactid=".1w3qzz253pc.1.4.3.0.1.0.1o"> </span><span style="color:green;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.1p">"red"</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.1q">}</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.1r">}</span><span data-reactid=".1w3qzz253pc.1.4.3.0.1.0.1s"> </span><span style="color:green;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.1t">" 和红色 "</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.1u">]</span><span data-reactid=".1w3qzz253pc.1.4.3.0.1.0.1v"> </span><span style="color:green;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.1w">"的字."</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.1x">]</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.1y">]</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.1z">)</span><span data-reactid=".1w3qzz253pc.1.4.3.0.1.0.20">
</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.21">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.22">defn</span><span data-reactid=".1w3qzz253pc.1.4.3.0.1.0.23"> </span><span style="color:#55c;font-weight:bold;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.24">render-simple</span><span data-reactid=".1w3qzz253pc.1.4.3.0.1.0.25"> </span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.26">[</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.27">]</span><span data-reactid=".1w3qzz253pc.1.4.3.0.1.0.28">
</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.29">(</span><span data-reactid=".1w3qzz253pc.1.4.3.0.1.0.2a">reagent/render-component</span><span data-reactid=".1w3qzz253pc.1.4.3.0.1.0.2b"> </span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.2c">[</span><span data-reactid=".1w3qzz253pc.1.4.3.0.1.0.2d">simple-component</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.2e">]</span><span data-reactid=".1w3qzz253pc.1.4.3.0.1.0.2f">
</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.2g">(</span><span data-reactid=".1w3qzz253pc.1.4.3.0.1.0.2h">.-body</span><span data-reactid=".1w3qzz253pc.1.4.3.0.1.0.2i"> </span><span data-reactid=".1w3qzz253pc.1.4.3.0.1.0.2j">js/document</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.2k">)</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.2l">)</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.4.3.0.1.0.2m">)</span></pre></pre></div></div></div><div class="demo-text" data-reactid=".1w3qzz253pc.1.5"><h2 data-reactid=".1w3qzz253pc.1.5.0">集合到一起</h2><p data-reactid=".1w3qzz253pc.1.5.1">这是一个稍微不那么人为设计的例子: 简单的 BMI 计算器.</p><p data-reactid=".1w3qzz253pc.1.5.2"><span data-reactid=".1w3qzz253pc.1.5.2.0">数据储存在单个 </span><code data-reactid=".1w3qzz253pc.1.5.2.1">reagent.core/atom</code><span data-reactid=".1w3qzz253pc.1.5.2.2">: 一个 map,
包含 height, weight 和 BMI 作为 key.</span></p><div data-reactid=".1w3qzz253pc.1.5.3"><div class="demo-example clearfix" data-reactid=".1w3qzz253pc.1.5.3.0"><a class="demo-example-hide" data-reactid=".1w3qzz253pc.1.5.3.0.0">hide</a><h3 class="demo-heading" data-reactid=".1w3qzz253pc.1.5.3.0.1">Example </h3><div class="simple-demo" data-reactid=".1w3qzz253pc.1.5.3.0.2"><div data-reactid=".1w3qzz253pc.1.5.3.0.2.0"><h3 data-reactid=".1w3qzz253pc.1.5.3.0.2.0.0">BMI 计算器</h3><div data-reactid=".1w3qzz253pc.1.5.3.0.2.0.1"><span data-reactid=".1w3qzz253pc.1.5.3.0.2.0.1.0">Height: </span><span data-reactid=".1w3qzz253pc.1.5.3.0.2.0.1.1">180</span><span data-reactid=".1w3qzz253pc.1.5.3.0.2.0.1.2">cm</span><input type="range" value="180" min="100" max="220" style="width:100%;" data-reactid=".1w3qzz253pc.1.5.3.0.2.0.1.3"></div><div data-reactid=".1w3qzz253pc.1.5.3.0.2.0.2"><span data-reactid=".1w3qzz253pc.1.5.3.0.2.0.2.0">Weight: </span><span data-reactid=".1w3qzz253pc.1.5.3.0.2.0.2.1">80</span><span data-reactid=".1w3qzz253pc.1.5.3.0.2.0.2.2">kg</span><input type="range" value="80" min="30" max="150" style="width:100%;" data-reactid=".1w3qzz253pc.1.5.3.0.2.0.2.3"></div><div data-reactid=".1w3qzz253pc.1.5.3.0.2.0.3"><span data-reactid=".1w3qzz253pc.1.5.3.0.2.0.3.0">BMI: </span><span data-reactid=".1w3qzz253pc.1.5.3.0.2.0.3.1">24</span><span data-reactid=".1w3qzz253pc.1.5.3.0.2.0.3.2"> </span><span style="color:inherit;" data-reactid=".1w3qzz253pc.1.5.3.0.2.0.3.3">正常</span><input type="range" value="24.691358024691358" min="10" max="50" style="width:100%;" data-reactid=".1w3qzz253pc.1.5.3.0.2.0.3.4"></div></div></div></div><div class="demo-source clearfix" data-reactid=".1w3qzz253pc.1.5.3.1"><h3 class="demo-heading" data-reactid=".1w3qzz253pc.1.5.3.1.0">Source</h3><pre data-reactid=".1w3qzz253pc.1.5.3.1.1"><pre data-reactid=".1w3qzz253pc.1.5.3.1.1.0"><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.0">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.1">ns</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.2"> </span><span style="color:#55c;font-weight:bold;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.3">example</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.4">
</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.5">(</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.6">:require</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.7"> </span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.8">[</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.9">reagent.core</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.a"> </span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.b">:as</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.c"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.d">reagent</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.e"> </span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.f">:refer</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.g"> </span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.h">[</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.i">atom</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.j">]</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.k">]</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.l">)</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.m">)</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.n">
</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.o">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.p">def</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.q"> </span><span style="color:#55c;font-weight:bold;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.r">bmi-data</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.s"> </span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.t">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.u">atom</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.v"> </span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.w">{</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.x">:height</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.y"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.z">180</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.10"> </span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.11">:weight</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.12"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.13">80</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.14">}</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.15">)</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.16">)</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.17">
</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.18">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.19">defn</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.1a"> </span><span style="color:#55c;font-weight:bold;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.1b">calc-bmi</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.1c"> </span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.1d">[</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.1e">]</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.1f">
</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.1g">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.1h">let</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.1i"> </span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.1j">[</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.1k">{</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.1l">:keys</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.1m"> </span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.1n">[</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.1o">height</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.1p"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.1q">weight</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.1r"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.1s">bmi</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.1t">]</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.1u"> </span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.1v">:as</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.1w"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.1x">data</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.1y">}</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.1z"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.20">@bmi-data</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.21">
</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.22">h</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.23"> </span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.24">(</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.25">/</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.26"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.27">height</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.28"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.29">100</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.2a">)</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.2b">]</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.2c">
</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.2d">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.2e">if</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.2f"> </span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.2g">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.2h">nil?</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.2i"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.2j">bmi</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.2k">)</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.2l">
</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.2m">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.2n">assoc</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.2o"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.2p">data</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.2q"> </span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.2r">:bmi</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.2s"> </span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.2t">(</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.2u">/</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.2v"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.2w">weight</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.2x"> </span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.2y">(</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.2z">*</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.30"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.31">h</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.32"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.33">h</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.34">)</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.35">)</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.36">)</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.37">
</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.38">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.39">assoc</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.3a"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.3b">data</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.3c"> </span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.3d">:weight</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.3e"> </span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.3f">(</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.3g">*</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.3h"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.3i">bmi</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.3j"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.3k">h</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.3l"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.3m">h</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.3n">)</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.3o">)</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.3p">)</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.3q">)</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.3r">)</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.3s">
</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.3t">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.3u">defn</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.3v"> </span><span style="color:#55c;font-weight:bold;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.3w">slider</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.3x"> </span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.3y">[</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.3z">param</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.40"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.41">value</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.42"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.43">min</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.44"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.45">max</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.46">]</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.47">
</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.48">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.49">let</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.4a"> </span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.4b">[</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.4c">reset</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.4d"> </span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.4e">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.4f">case</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.4g"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.4h">param</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.4i"> </span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.4j">:bmi</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.4k"> </span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.4l">:weight</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.4m"> </span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.4n">:bmi</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.4o">)</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.4p">]</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.4q">
</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.4r">[</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.4s">:input</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.4t"> </span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.4u">{</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.4v">:type</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.4w"> </span><span style="color:green;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.4x">"range"</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.4y"> </span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.4z">:value</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.50"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.51">value</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.52"> </span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.53">:min</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.54"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.55">min</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.56"> </span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.57">:max</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.58"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.59">max</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.5a">
</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.5b">:style</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.5c"> </span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.5d">{</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.5e">:width</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.5f"> </span><span style="color:green;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.5g">"100%"</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.5h">}</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.5i">
</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.5j">:on-change</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.5k"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.5l">#</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.5m">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.5n">swap!</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.5o"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.5p">bmi-data</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.5q"> </span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.5r">assoc</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.5s">
</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.5t">param</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.5u"> </span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.5v">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.5w">-></span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.5x"> </span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.5y">%</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.5z"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.60">.-target</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.61"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.62">.-value</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.63">)</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.64">
</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.65">reset</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.66"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.67">nil</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.68">)</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.69">}</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.6a">]</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.6b">)</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.6c">)</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.6d">
</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.6e">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.6f">defn</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.6g"> </span><span style="color:#55c;font-weight:bold;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.6h">bmi-component</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.6i"> </span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.6j">[</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.6k">]</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.6l">
</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.6m">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.6n">let</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.6o"> </span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.6p">[</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.6q">{</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.6r">:keys</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.6s"> </span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.6t">[</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.6u">weight</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.6v"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.6w">height</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.6x"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.6y">bmi</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.6z">]</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.70">}</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.71"> </span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.72">(</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.73">calc-bmi</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.74">)</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.75">
</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.76">[</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.77">color</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.78"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.79">diagnose</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.7a">]</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.7b"> </span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.7c">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.7d">cond</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.7e">
</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.7f">(</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.7g"><</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.7h"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.7i">bmi</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.7j"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.7k">18.5</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.7l">)</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.7m"> </span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.7n">[</span><span style="color:green;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.7o">"orange"</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.7p"> </span><span style="color:green;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.7q">"过轻"</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.7r">]</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.7s">
</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.7t">(</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.7u"><</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.7v"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.7w">bmi</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.7x"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.7y">25</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.7z">)</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.80"> </span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.81">[</span><span style="color:green;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.82">"inherit"</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.83"> </span><span style="color:green;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.84">"正常"</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.85">]</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.86">
</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.87">(</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.88"><</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.89"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.8a">bmi</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.8b"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.8c">30</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.8d">)</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.8e"> </span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.8f">[</span><span style="color:green;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.8g">"orange"</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.8h"> </span><span style="color:green;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.8i">"超重"</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.8j">]</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.8k">
</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.8l">:else</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.8m"> </span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.8n">[</span><span style="color:green;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.8o">"red"</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.8p"> </span><span style="color:green;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.8q">"obese"</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.8r">]</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.8s">)</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.8t">]</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.8u">
</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.8v">[</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.8w">:div</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.8x">
</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.8y">[</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.8z">:h3</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.90"> </span><span style="color:green;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.91">"BMI 计算器"</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.92">]</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.93">
</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.94">[</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.95">:div</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.96">
</span><span style="color:green;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.97">"Height: "</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.98"> </span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.99">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.9a">int</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.9b"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.9c">height</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.9d">)</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.9e"> </span><span style="color:green;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.9f">"cm"</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.9g">
</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.9h">[</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.9i">slider</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.9j"> </span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.9k">:height</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.9l"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.9m">height</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.9n"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.9o">100</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.9p"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.9q">220</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.9r">]</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.9s">]</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.9t">
</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.9u">[</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.9v">:div</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.9w">
</span><span style="color:green;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.9x">"Weight: "</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.9y"> </span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.9z">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.a0">int</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.a1"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.a2">weight</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.a3">)</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.a4"> </span><span style="color:green;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.a5">"kg"</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.a6">
</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.a7">[</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.a8">slider</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.a9"> </span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.aa">:weight</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.ab"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.ac">weight</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.ad"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.ae">30</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.af"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.ag">150</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.ah">]</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.ai">]</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.aj">
</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.ak">[</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.al">:div</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.am">
</span><span style="color:green;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.an">"BMI: "</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.ao"> </span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.ap">(</span><span style="font-weight:bold;color:#687868;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.aq">int</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.ar"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.as">bmi</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.at">)</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.au"> </span><span style="color:green;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.av">" "</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.aw">
</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.ax">[</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.ay">:span</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.az"> </span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.b0">{</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.b1">:style</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.b2"> </span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.b3">{</span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.b4">:color</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.b5"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.b6">color</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.b7">}</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.b8">}</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.b9"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.ba">diagnose</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.bb">]</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.bc">
</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.bd">[</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.be">slider</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.bf"> </span><span style="color:blue;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.bg">:bmi</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.bh"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.bi">bmi</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.bj"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.bk">10</span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.bl"> </span><span data-reactid=".1w3qzz253pc.1.5.3.1.1.0.bm">50</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.bn">]</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.bo">]</span><span style="color:#44a;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.bp">]</span><span style="color:#940;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.bq">)</span><span style="color:#272;" data-reactid=".1w3qzz253pc.1.5.3.1.1.0.br">)</span></pre></pre></div></div></div><div class="demo-text" data-reactid=".1w3qzz253pc.1.6"><h2 data-reactid=".1w3qzz253pc.1.6.0">性能</h2><p data-reactid=".1w3qzz253pc.1.6.1">React 本身很快, 所以 Reagent 也是. 实际上, Reagent
大部分时间会比一般的 React 还要快, 这要感谢 ClojureScript 实现的优化.</p><p data-reactid=".1w3qzz253pc.1.6.2"><span data-reactid=".1w3qzz253pc.1.6.2.0">已经挂载的组件只有在它们的数据改变时才会重新渲染.
这个改变可以来自 deref(解引用)的</span><code data-reactid=".1w3qzz253pc.1.6.2.1">atom</code><span data-reactid=".1w3qzz253pc.1.6.2.2">, 传递给组件的参数, 或者组件状态.</span></p><p data-reactid=".1w3qzz253pc.1.6.3"><span data-reactid=".1w3qzz253pc.1.6.3.0">这里所有的修改的检查都是通过 </span><code data-reactid=".1w3qzz253pc.1.6.3.1">identical?</code><span data-reactid=".1w3qzz253pc.1.6.3.2"> 函数, 仅仅是一次指针的对比, 因而开销非常低.
作为参数传给组件的 Map 也是通过这个办法对比的:
它们所有的 entry 是一致的, 那么它们就是相等的.
这同样适用于内置的 React 组件比如 </span><code data-reactid=".1w3qzz253pc.1.6.3.3">:div</code><span data-reactid=".1w3qzz253pc.1.6.3.4">, </span><code data-reactid=".1w3qzz253pc.1.6.3.5">:p</code><span data-reactid=".1w3qzz253pc.1.6.3.6">, 等等.</span></p><p data-reactid=".1w3qzz253pc.1.6.4">所有这些意味着你可以直接绝大部分时间不去关心性能.
你怎么想就怎么定义你的界面, 它总是会足够快的.</p><p data-reactid=".1w3qzz253pc.1.6.5"><span data-reactid=".1w3qzz253pc.1.6.5.0">尽管如此, 有些场景还是需要留意一下. 如果你让 Reagent 去渲染一个巨大的组件的
</span><code data-reactid=".1w3qzz253pc.1.6.5.1">seq</code><span data-reactid=".1w3qzz253pc.1.6.5.2">, 你需要给每个元素提供对应的 </span><code data-reactid=".1w3qzz253pc.1.6.5.3">:key</code><span data-reactid=".1w3qzz253pc.1.6.5.4"> 属性,
用来提升渲染的性能(见上文). 同时注意匿名函数通常来说不会相等,
即便它们表示的是相同的代码相同的闭包.</span></p><p data-reactid=".1w3qzz253pc.1.6.6">不过再次强调, 通常情况你只需要相信 React 和 Reagent 会足够快.
这个特别的页面是用一个单一的 Reagent 组件, 由上千个子组件组成的,
(代码当中每个圆括号之类的地方都算一个独立的组件),
而且这个页面可以在每秒更新更多次, 而不会给浏览器增加哪怕一点负担.</p><p data-reactid=".1w3qzz253pc.1.6.7"><span data-reactid=".1w3qzz253pc.1.6.7.0">顺带说一下, 这个页面还用到了另一个 React 的花招:
整个页面同时也用 Node 以及 </span><code data-reactid=".1w3qzz253pc.1.6.7.1">reagent/render-component-to-string</code><span data-reactid=".1w3qzz253pc.1.6.7.2"> 做了预渲染.
当它被浏览器加载时, React 在已经需在的 DOM 树上自动加上事件处理器.</span></p></div></div><a href="https://github.com/holmsand/reagent" class="github-badge" data-reactid=".1w3qzz253pc.2"><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" data-reactid=".1w3qzz253pc.2.0"></a></div>
<script type='text/javascript'
src='assets/demo.js?1448548628907'></script>
<script type='text/javascript'>
setTimeout(function() {demo.mountdemo('')}, 200);
</script>
</body>
</html>