forked from vczero/react-native-lesson
/
第6篇jsx在react-native中的应用.html
256 lines (238 loc) · 5.86 KB
/
第6篇jsx在react-native中的应用.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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<style>
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote {
margin: 0;
padding: 0;
}
body {
font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
font-size: 13px;
line-height: 18px;
color: #737373;
background-color: white;
margin: 10px 13px 10px 13px;
}
table {
margin: 10px 0 15px 0;
border-collapse: collapse;
}
td,th {
border: 1px solid #ddd;
padding: 3px 10px;
}
th {
padding: 5px 10px;
}
a {
color: #0069d6;
}
a:hover {
color: #0050a3;
text-decoration: none;
}
a img {
border: none;
}
p {
margin-bottom: 9px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #404040;
line-height: 36px;
}
h1 {
margin-bottom: 18px;
font-size: 30px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 18px;
}
h4 {
font-size: 16px;
}
h5 {
font-size: 14px;
}
h6 {
font-size: 13px;
}
hr {
margin: 0 0 19px;
border: 0;
border-bottom: 1px solid #ccc;
}
blockquote {
padding: 13px 13px 21px 15px;
margin-bottom: 18px;
font-family:georgia,serif;
font-style: italic;
}
blockquote:before {
content:"\201C";
font-size:40px;
margin-left:-10px;
font-family:georgia,serif;
color:#eee;
}
blockquote p {
font-size: 14px;
font-weight: 300;
line-height: 18px;
margin-bottom: 0;
font-style: italic;
}
code, pre {
font-family: Monaco, Andale Mono, Courier New, monospace;
}
code {
background-color: #fee9cc;
color: rgba(0, 0, 0, 0.75);
padding: 1px 3px;
font-size: 12px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
pre {
display: block;
padding: 14px;
margin: 0 0 18px;
line-height: 16px;
font-size: 11px;
border: 1px solid #d9d9d9;
white-space: pre-wrap;
word-wrap: break-word;
}
pre code {
background-color: #fff;
color:#737373;
font-size: 11px;
padding: 0;
}
sup {
font-size: 0.83em;
vertical-align: super;
line-height: 0;
}
* {
-webkit-print-color-adjust: exact;
}
@media screen and (min-width: 914px) {
body {
width: 854px;
margin:10px auto;
}
}
@media print {
body,code,pre code,h1,h2,h3,h4,h5,h6 {
color: black;
}
table, pre {
page-break-inside: avoid;
}
}
</style>
<title>React-Native入门指南</title>
</head>
<body>
<h1>React-Native入门指南</h1>
<h2>第六篇JSX在React-Native中的应用</h2>
<h3>一、JSX概述</h3>
<pre><code>你一定疑问为什么要用JSX？其实这不是必需，而是建议。只是因为React是作为MVC中的V,是为UI而生，所以，React-Native使用JSX更能像HTML样表达树形结构，其实HTML的超类就是XML,React-Native将这个带到了解放前，不可否认的是JSX相比节省了很多的代码。JSX不是什么新奇的东西，JSX只是对JavaScript进行了拓展，仅此而已。
</code></pre>
<h3>二、语法介绍</h3>
<pre><code>1、类XML UI组件表达，在React-Native中表现为：
render: function() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
</View>
);
}
2、js表达式
在JSX中，表达式需要｛｝包裹，例如：
render: function() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
{0? '第一段': '第二段'}
</Text>
</View>
);
}
上面的代码我们可以看出，style＝｛｝是一个表达式；{0? '第一段': '第二段'}是表达式，最后显示的应该是“第二段”。
3、属性
在HTML中，属性可以是任何值，例如：<div tagid="00_1"></div>,tagid就是属性；同样，在组件上可以使用属性。
建议使用以下方式：
var props = {
tagid: 'GGFSJGFFATQ',
poiname: '东方明珠'
};
return (<View {...props}></View>);
4、如果需要在调用组件的时候动态增加或者覆盖属性，又该如何呢？
很简单：<View {...props} poiname={'虹桥机场'}></View>
5、关于样式
（1）普通内联样式:{{}},第一层｛｝是表达式，第二层｛｝是js对象；
<View style={{fontSize:40, width:80,}}> </View>
（2）调用样式表:{样式类.属性}
<View style={styles.container}></View>
（3）样式表和内联样式共存:{[]}
<View style={[styles.container, {fontSize:40, width:80}]}>
（4）多个样式表:{[样式类1， 样式类2]}
<View style={[styles.container, styles.color]}>
6、属性校验
为了实现强类型语言的效果，我们可以使用propTypes来声明数据属性的合法性校验。例如：
React.createClass({
porpTypes:{
username: React.PropTypes.string,
age: React.propTypes.number,
}
});
7、设定默认属性
React.createClass({
getDefaultProps: function(){
return {
sign: '这个家伙很懒，什么都没留下'
};
}
});
8、组件的生命周期
componentWillMount：组件创建之前
getInitialState：初始化状态
render：渲染视图
componentDidMount：渲染视图完成后
componentWillUnmount：组件被卸载之前
</code></pre>
<h3>三、了解虚拟DOM</h3>
<pre><code>React进行了虚拟DOM的封装，所有的视图的更新都是虚拟DOM做了一个校验（diff）后最小更新。为什么这么做，因为现在机器的内存已经足以支撑这样视图UI的diff计算，用内存计算换取UI渲染效率。
1、我们需要获取组件中真实的dom
React.findDOMNode(component)
2、第二节已经简单说了组件的生命周期（will, did）
组件的生命周期分为3个部分：
Mounting：正在装载组件；
Updating：重新计算渲染组件；
Unmounting：卸载组件
</code></pre>
</body>
</html>