JSX語(yǔ)法
JSX：即JavaScript XML——一種在React組建內(nèi)部構(gòu)建標(biāo)簽的類(lèi)XML語(yǔ)法涧黄。（增強(qiáng)React程序組件的可讀性）
React的核心機(jī)制之一就是虛擬DOM：可以在內(nèi)存中創(chuàng)建虛擬DOM元素锌介。React利用虛擬DOM來(lái)減少對(duì)實(shí)際DOM的操作從而提升性能管嬉。
1雇盖、示例
render: function() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
</View>
);
}
2障陶、JS表達(dá)式
- ReactJS中約定自定義的組件標(biāo)簽首字母一定要大寫(xiě)形真，這樣區(qū)別于HTML標(biāo)簽
- 表達(dá)式用{}包起來(lái)幼苛，不要加引號(hào)，加引號(hào)就會(huì)被當(dāng)成字符串恬涧。
- JSX是HTML和JavaScript混寫(xiě)的語(yǔ)法注益，當(dāng)遇到<，JSX就當(dāng)HTML解析溯捆，遇到{就當(dāng)JavaScript解析
3丑搔、關(guān)于樣式
-
普通內(nèi)聯(lián)樣式:{{}},第一層｛｝是表達(dá)式，第二層｛｝是js對(duì)象
<View style={{fontSize:40, width:80,}}> </View> -
調(diào)用樣式表:{樣式類(lèi).屬性}
<View style={styles.container}></View> -
樣式表和內(nèi)聯(lián)樣式共存:{[]}
<View style={[styles.container, {fontSize:40, width:80}]}> -
多個(gè)樣式表:{[樣式類(lèi)1提揍， 樣式類(lèi)2]}
<View style={[styles.container, styles.color]}>
ES6語(yǔ)法
展開(kāi)運(yùn)算符：允許一個(gè)表達(dá)式在某處展開(kāi)啤月。展開(kāi)運(yùn)算符在多個(gè)參數(shù)（用于函數(shù)調(diào)用）或多個(gè)元素（用于數(shù)組字面量）或者多個(gè)變量（用于解構(gòu)賦值）的地方可以使用。
用于函數(shù)調(diào)用
myFunction(...iterableObj);
用于數(shù)組字面量
[...iterableObj, 4, 5, 6]
apply方法能劫持另外一個(gè)對(duì)象的方法劳跃，繼承另外一個(gè)對(duì)象的屬性
function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction.apply(null, args);
這是使用了apply方法來(lái)遍歷的參數(shù)谎仲，但是在ES6下我們還可以像下面這樣寫(xiě)
function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);
數(shù)組字面量
展開(kāi)操作符可以簡(jiǎn)化數(shù)組間的操作如下：
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);
可以將一個(gè)數(shù)組在任何位置插入另一個(gè)數(shù)組：
var arr1 = [3, 4];
var lyrics = [2, ...arr1, 5, 6];
解構(gòu)賦值
解構(gòu)賦值是ES6的特性
let [arg1,arg2,...arg3] = [1, 2, 3, 4];
arg1 //1
arg2 //2
arg3 //['3','4']
解構(gòu)賦值中展開(kāi)運(yùn)算符只能放在最后
let [arg1,...arg2,arg3] = [1, 2, 3, 4]; //報(bào)錯(cuò)
箭頭函數(shù)(Arrow Functions)：箭頭函數(shù)的產(chǎn)生主要有兩個(gè)目的更：簡(jiǎn)潔的語(yǔ)法和與父作用域共享關(guān)鍵字this
簡(jiǎn)潔
x => x * x
相當(dāng)于
function (x) {
return x * x;
}
無(wú)參數(shù)
() => 5
一個(gè)參數(shù)
x => x * x
兩個(gè)參數(shù)
(x, y) => x * y
可變參數(shù)
(x, y, ...rest) => {
var i, sum = x + y;
for (i=0; i<rest.length; i++) {
sum += rest[i];
}
return sum;
}
返回對(duì)象
x => ({ foo: x })
通過(guò)上面的一些格式，我們可以看出函數(shù)體的內(nèi)容和普通的函數(shù)比更簡(jiǎn)潔
this
每個(gè)新定義的函數(shù)都有其自己的 this 值刨仑，我們通過(guò)下面幾段代碼來(lái)看看this的作用域問(wèn)題：
function Person() {
this.age = 0; //this 指向的就是對(duì)象自己
setInterval(function growUp() {
this.age++; // 在非嚴(yán)格模式下郑诺，this指向的是函數(shù)內(nèi)部
}, 1000);
}
可以通過(guò)新增一個(gè)變量來(lái)指向期望的 this 對(duì)象，然后將該變量放到閉包中來(lái)解決杉武。
function Person() {
var that = this;
that.age = 0; //that 指向的就是對(duì)象自己
setInterval(function growUp() {
that.age++; //that指向的是我們期望的指向
}, 1000);
}
用箭頭函數(shù)就可以這么寫(xiě)：
function Person(){
this.age = 0;
setInterval(() => {
this.age++; // |this| 正確地指向了 person 對(duì)象
}, 1000);
}
argument變量
箭頭函數(shù)與普通函數(shù)還有一個(gè)區(qū)別就是辙诞，它沒(méi)有自己的arguments變量
React Native中也用到了ES6的let, const, import, class，所以開(kāi)發(fā)前最好先對(duì)這些基礎(chǔ)知識(shí)有個(gè)了解
