add 6

2026-08-05 06:23:38 +00:00 · 2015-06-16 00:11:04 +08:00
parent 9de4d750ae
commit 8fb0c14766
2 changed files with 353 additions and 0 deletions
@@ -0,0 +1,97 @@
+#React-Native入门指南
+##第六篇JSX在React-Native中的应用
+
+
+
+###一、JSX概述
+	你一定疑问为什么要用JSX？其实这不是必需，而是建议。只是因为React是作为MVC中的V,是为UI而生，所以，React-Native使用JSX更能像HTML样表达树形结构，其实HTML的超类就是XML,React-Native将这个带到了解放前，不可否认的是JSX相比节省了很多的代码。JSX不是什么新奇的东西，JSX只是对JavaScript进行了拓展，仅此而已。
+###二、语法介绍
+	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：组件被卸载之前
+    
+###三、了解虚拟DOM
+	React进行了虚拟DOM的封装，所有的视图的更新都是虚拟DOM做了一个校验（diff）后最小更新。为什么这么做，因为现在机器的内存已经足以支撑这样视图UI的diff计算，用内存计算换取UI渲染效率。
+	
+	1、我们需要获取组件中真实的dom
+	React.findDOMNode(component)
+	
+	2、第二节已经简单说了组件的生命周期（will, did）
+	组件的生命周期分为3个部分：
+	Mounting：正在装载组件；
+	Updating：重新计算渲染组件；
+	Unmounting：卸载组件
+	
+	
+	
+	
+	
+	
+    
@@ -0,0 +1,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 (
+        &lt;View style={styles.container}&gt;
+            &lt;Text style={styles.welcome}&gt;
+                Welcome to React Native!
+            &lt;/Text&gt;
+        &lt;/View&gt;
+    );
+}
+
+2、js表达式
+在JSX中，表达式需要｛｝包裹，例如：
+render: function() {
+    return (
+        &lt;View style={styles.container}&gt;
+            &lt;Text style={styles.welcome}&gt;
+                {0? '第一段': '第二段'}
+            &lt;/Text&gt;
+        &lt;/View&gt;
+    );
+}
+上面的代码我们可以看出，style＝｛｝是一个表达式；{0? '第一段': '第二段'}是表达式，最后显示的应该是“第二段”。
+
+3、属性
+在HTML中，属性可以是任何值，例如：&lt;div tagid="00_1"&gt;&lt;/div&gt;,tagid就是属性；同样，在组件上可以使用属性。
+建议使用以下方式：
+var props = {
+    tagid: 'GGFSJGFFATQ',
+    poiname: '东方明珠'
+};
+return (&lt;View {...props}&gt;&lt;/View&gt;);
+
+4、如果需要在调用组件的时候动态增加或者覆盖属性，又该如何呢？
+很简单：&lt;View {...props} poiname={'虹桥机场'}&gt;&lt;/View&gt;
+
+5、关于样式
+（1）普通内联样式:{{}},第一层｛｝是表达式，第二层｛｝是js对象；
+&lt;View style={{fontSize:40, width:80,}}&gt; &lt;/View&gt;
+（2）调用样式表:{样式类.属性}
+&lt;View style={styles.container}&gt;&lt;/View&gt;
+（3）样式表和内联样式共存:{[]}
+&lt;View style={[styles.container, {fontSize:40, width:80}]}&gt;
+（4）多个样式表:{[样式类1， 样式类2]}
+&lt;View style={[styles.container, styles.color]}&gt;
+
+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>