轉自:http://blog.csdn.net/hello_hwc/article/details/51199384
準備工作
先安裝React Native,然後初始化一個示例工程
react-native init JSReactBasics
- 1
- 1
會生成如下一個目錄
然後,XCode打開JSReactBasics.xcodeproj,運行模擬器會看到如下截圖
本文,示例代碼都是修改的index.ios.js
,每次修改後選擇保存。Command
+ R
就可以動態刷新了。
默認創建的index.ios.js如下
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
//導入一些必要的模塊
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View
} from 'react-native';
//類,這是默認的載入類,繼承自Component,Component類似於Android和iOS中的View
class JSReactBasics extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}
//定義風格
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('JSReactBasics', () => JSReactBasics);
- 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
- 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
什麼是JavaScript?
JS是一個輕量級的,解釋型的講函數視爲一級公民的程序設計語言。他是一種基於原型的多範式動態腳本語言,支持面向對象,命令式編程和函數式編程。
JavaScript的標準是 ECMAScript,React Native的語法是基於ECMAScript 6,簡稱ES6.
Tips:Java和JavaScript語法很像,但是用處完全不同,而且也是兩個幾乎沒關係的東西
關於Java和JS的區分,可以見如下表
JavaScript | Java |
---|---|
面向對象。不區分對象類型。通過原型機制繼承,任何對象的屬性和方法均可以被動態添加。 | 基於類系統。分爲類和實例,通過類層級的定義實現繼承。不能動態增加對象或類的屬性或方法 |
變量類型不需要提前聲明(動態類型)。 | 變量類型必須提前聲明(靜態類型)。 |
不能直接自動寫入硬盤。 | 可以直接自動寫入硬盤 |
JS的基礎知識
聲明
- var 聲明變量,可以在聲明的時候初始化爲一個值
- let 聲明塊範圍局部變量,可以在聲明的時候初始化一個值
- const 聲明一個只讀常量
Tips:JS是大小寫敏感的
變量,常量
- 命名要以數字字母下劃線開頭
例如,在class ReactJSBasics
上添加兩行
var mainText = "來自Leo的博客"
var subText = "歡迎閱讀"
- 1
- 2
- 1
- 2
Tips:JS是一個動態類型語言(dynamically typed language)中,所以變量不需聲明類型,必要的時候自動轉換
然後,讓Text來顯示這個這兩個變量
return (
<View style={styles.container}>
<Text style={styles.welcome}>
{mainText}
</Text>
<Text style={styles.instructions}>
{subText}
</Text>
</View>
);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
然後save,選擇模擬器,Command+R刷新,會看到截圖如下
常量可以看到index.ios.js文件最下面有類似
const styles = StyleSheet.create({....
- 1
- 1
就是一個常量。在聲明的時候,必須初始化
數據結構和類型
六種基本的原型數據類型
- Boolean,布爾值,true或者false
- null,一個表明null的特殊關鍵字,注意JS中大小寫敏感,null和NULL是完全不同的東西
- undefined.變量爲定義的屬性
- Number,數字
- String,字符串
- Symbol ,ES6中新增的,唯一不可變的
以及Object類型
流程控制
- if,else
- switch
- for
- while
- break
- continue
這個各個語言大同小異,不浪費篇幅了,有一點要提一下,JS中的Switch Case中可以是String
有一點要注意,以下值在JS中是會識別爲false
false
undefined
null
0
NaN
空字符串 ("")
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
註釋
// 這是一個單行註釋.
/* 這是一個多行註釋。它可以是任意長度,你可以在這裏隨便寫什麼。 */
- 1
- 2
- 3
- 1
- 2
- 3
Promises
從ES6開始,JS中引入了Promises來處理異步和延遲操作,在React Native的網絡請求中是很常見的。
一個promise有以下幾種狀態
- pending,最初的狀態
- fulfilled,執行失敗
- rejected,執行成功
- settled,執行結束了,失敗(rejected)或者成功(fulfilled)
控制圖如下
函數
函數的定義如下,由function
關鍵字聲明,在()添加輸入,輸入不需要聲明類型
function globalFunction(input){
console.log(input);
}
- 1
- 2
- 3
- 1
- 2
- 3
我們接着上述的工程,添加一個可點擊的TouchableHighLight
在import中,添加一行
TouchableHighlight
- 1
- 1
重新定義變量和類的內容
var mainText = "點擊屏幕任意位置"
function globalFunction(input){
console.log(input);
}
class JSReactBasics extends Component {
render() {
return (
<TouchableHighlight
onPress={() => globalFunction("輸入")}
underlayColor = '#ddd'
style = {styles.container}
>
<Text style={styles.welcome}>{mainText}</Text>
</TouchableHighlight>
);
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
然後,save,command+R刷新,再點擊屏幕任意位置,會發現如下log
這樣的方法是定義在全局的,當在類中定義的時候,不需要funciton關鍵字
通過this.functionName來訪問
var mainText = "點擊屏幕任意位置"
class JSReactBasics extends Component {
render() {
return (
<TouchableHighlight
onPress={() => this.backgorundClicked()}
underlayColor = '#ddd'
style = {styles.container}
>
<Text style={styles.welcome}>{mainText}</Text>
</TouchableHighlight>
);
}
backgorundClicked(){
console.log("類中的方法");
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
箭頭函數(Arrow functions)
沒接觸過JS的同學可能會對
onPress={() => this.backgorundClicked()
- 1
- 1
這一行感到很奇怪,其實這裏onPress是一個函數類型(在JS中,函數本身也是一種類型)。這其實是JS中的箭頭函數,他提供了一種更簡潔的函數表達方式
修改backgorundClicked
,爲如下內容
backgorundClicked(){
var a = [
"Hydrogen",
"Helium",
"Lithium",
"Beryllium"
];
var a2 = a.map(function(s){ return s.length });
var a3 = a.map( (s) => s.length );
console.log(a2);
console.log(a3);
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
然後,save,Commnad+R刷新,可以看到兩個log的內容是一樣的。也就是說,(s)
用來描述參數,=>
後的表示方法的執行體。學過Swift的童鞋,會發現和Swift的必包很像。
數組
可以由以下三種方式創建數組,訪問數組的方式還是通過角標來訪訪問
var a = ["1","2","3","4"];
var b = new Array("1","2","3","4")
var c = Array("1","2","3","4")
console.log(a[1]);
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
數組有一些方便的方法,例如合併,排序,檢索等,可以在MDN上找到
字典Maps
var map = {"key1":"value1","key2":"value2"}
var map = {"key1":"value1","key2":"value2"}
map["key4"] = "value4"
console.log(map["key1"])
console.log(map["key4"])
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
對象
JS中的對象的屬性可以不先聲明,而在運行時候動態添加,例如
var obj = new Object()
obj.name = "1234"
console.log(obj.name);
- 1
- 2
- 3
- 1
- 2
- 3
所以,在React Native中,寫代碼的時候,存儲數據直接this.propertyName =
即可
JavaScript是基於原型的面對象語言
理解這一點,對使用JS開發還是比較重要的。
像Java,Objective C,C++都是基於類的面嚮對象語言,面嚮對象語言有兩個,基於類的面嚮對象語言主要有兩個概念
- 類(class),定義了一組具有某一類特徵的事務。類是抽象的,比如鳥類
- 實例(instance),實體是類的實體話提現,比如一隻鳥
基於原型的面向對象
- 基於原型的面嚮對象語言並不存在這種區別,基於原型的面嚮對象語言所有的都是對象。基於原型的面嚮對象語言有一個概念叫做原型對象,古代有一種東西叫做活字印刷術,那一個個字的模版就是這裏的原型對象。
Tips:React Native引入了基於類的面向對象編程概念,這個在後面講解React基礎的時候來介紹
通過比較Java和JS可以瞭解二者的區分
基於類的(Java) | 基於原型的(JavaScript) |
---|---|
類和實例是不同的事物。 | 所有對象均爲實例。 |
通過類定義來定義類;通過構造器方法來實例化類。 | 通過構造器函數來定義和創建一組對象。 |
通過 new 操作符創建單個對象。 | 相同。 |
通過類定義來定義現存類的子類,從而構建對象的層級結構。 | 指定一個對象作爲原型並且與構造函數一起構建對象的層級結構 |
遵循原型鏈繼承屬性。 | 構造器函數或原型指定初始的屬性集。允許動態地向單個的對象或者整個對象集中添加或移除屬性。 |
什麼是React?
A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES(一個JavaScript的用來創建界面的庫)
Tips:通過名字就可以看出來,ReactNative是基於React來寫的支持編寫原生App的框架
React的基礎知識
React
React是整個React框架的入口
React.Component
Component是React類的基類,類似於iOS的UIView和Android的View,React和React native都定義了很多方便的子類來給開發者使用。
React.createClass
創建一個Component
Component 相關對象方法
render
調用React.createClass
或者讓一個類繼承自class JSReactBasics
extends Component
都是需要提供render
函數的。這個函數返回一個根的視圖,用來渲染實際的Component可視部分,例如例子中的,
render() {
return (
<TouchableHighlight
onPress={() => this.backgorundClicked()}
underlayColor = '#ddd'
style = {styles.container}
>
<Text style={styles.welcome}>{mainText}</Text>
</TouchableHighlight>
);
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
getInitialState()
在Component被加載之前調用一次,這個方法的返回值回被設置爲this.state
Tips:這個方法只能在用React.createClass
創建的時候使用,例如,在我們示例代碼中,加入一個方法
getInitialState(){
return {key:"value"}
}
- 1
- 2
- 3
- 1
- 2
- 3
會提示如下警告
getDefaultProps()
在Class 創建的時候,調用一次,這個方法在調用的時候,任何實例還沒有被創建。還有一點要注意,這個方法返回的任何Object 對象,在各個實例中是共享的,而不是每個實例一個copy。
statics
statics對象,用來定義Components可以調用的靜態方法,例如
var MyComponent = React.createClass({
statics: {
customMethod: function(foo) {
return foo === 'bar';
}
},
render: function() {
}
});
MyComponent.customMethod('bar'); // true
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
生命週期
componentWillMount
在最初的渲染之前調用一次,在React中,設置this.state
會導致重新渲染,但是componentWillMount設置this.state
並不會對導致render調用多次
componentDidMount
在渲染結束後,調用一次
componentWillReceiveProps
在component接收到新的參數前調用,在這個方法中調用this.setState不會觸發二次渲染,第一次渲染的時候不會調用這個方法
shouldComponentUpdate
boolean shouldComponentUpdate(
object nextProps, object nextState
)
- 1
- 2
- 3
- 1
- 2
- 3
在每次重新觸發渲染之前調用,其中nextProps
和nextState
分別對應下一個狀態的參數和狀態對象。可以在這個方法中返回false來取消本次渲染。
例如
shouldComponentUpdate: function(nextProps, nextState) {
return nextProps.id !== this.props.id;
}
- 1
- 2
- 3
- 1
- 2
- 3
componentWillUpdate
在重新渲染之前調用
Warning:這個方法裏不能調用this.setState()否則會陷入死循環
componentDidUpdate
在渲染之後調用
componentWillUnmount
在被刪除之前調用
爲了更好的理解生命週期,我們來用React的風格重寫示例代碼
重寫整個類
var JSReactBasics = React.createClass({
getInitialState(){
console.log("getInitialState");
return {key:"點擊屏幕任意位置"}//設置最初的值
},
componentWillMount(){
console.log("componentWillMount");
},
componentDidMount(){
console.log("componentDidMount");
},
shouldComponentUpdate(nextProps,nextState){
console.log("shouldComponentUpdate");
return true
},
componentWillUpdate(nextProps,nextState){
console.log("componentWillUpdate");
},
componentDidUpdate(prevProps,prevState){
console.log("componentDidUpdate");
},
render() {
return (
<TouchableHighlight
onPress={() => this.backgorundClicked()}
underlayColor = '#ddd'
style = {styles.container}
>
<Text style={styles.welcome}>{this.state.key}</Text>
</TouchableHighlight>
);
},
backgorundClicked(){
this.setState({
key:"設置了新的值"
});
}
});
- 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
- 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
然後,save,Command+R,會看到Log以及效果
2016-04-20 16:06:52.904 [info][tid:com.facebook.react.JavaScript] getInitialState
2016-04-20 16:06:52.904 [info][tid:com.facebook.react.JavaScript] componentWillMount
2016-04-20 16:06:52.909 [info][tid:com.facebook.react.JavaScript] componentDidMount
- 1
- 2
- 3
- 1
- 2
- 3
然後,點擊屏幕任何位置,會看到Log和截圖
2016-04-20 16:08:23.704 [info][tid:com.facebook.react.JavaScript] shouldComponentUpdate
2016-04-20 16:08:23.704 [info][tid:com.facebook.react.JavaScript] componentWillUpdate
2016-04-20 16:08:23.707 [info][tid:com.facebook.react.JavaScript] componentDidUpdate
- 1
- 2
- 3