一、React JSX基礎(chǔ)
1、React.js和React Native關(guān)系
2、React Native原理
3、借鑒XHTML的一些規(guī)則/規(guī)范
（1）開(kāi)始結(jié)束標(biāo)簽配對(duì)
<組件>ooxx
（2）無(wú)內(nèi)容組件標(biāo)簽寫(xiě)為自封閉形式
<組件/>
（3）自定義屬性，字符串應(yīng)使用雙引號(hào)，其他值用{}括起來(lái)
4、注意事項(xiàng)
（1）必須單一子節(jié)點(diǎn)
（2）空值自動(dòng)忽略
（3）顯示和隱藏組件
（4）組件必須大寫(xiě)字母開(kāi)頭
（5）文本必須寫(xiě)在Text組件內(nèi)
【1】React Native中文網(wǎng)
【2】
（6）注釋寫(xiě)法比較特殊
（7）只能嵌入表達(dá)式，不能是語(yǔ)句
二、初識(shí)React組件化開(kāi)發(fā)
1、class/function都可以是“積木”（組件）
（1）class
class GoodMorning extends Component {
render() {
return(
Good Morning!
);
}
}
（2）function無(wú)狀態(tài)組件
const GoodMorning=()=>{
return (
Good evening
);
}
2、使用props定制“積木”（組件）
（1）class
class GoodMorning extends Component {
static defaultProps={
name: 'someBody',
};
static propTypes={
name：React.propTypes.string, ?//約定需要的類(lèi)型
};
render() {
return(
{this.props.name}
);
}
}
（2）function無(wú)狀態(tài)組件
const GoodEvening=(props)=> {
return (
{props.name}
);
}
3、class內(nèi)成員變量寫(xiě)法
4、動(dòng)態(tài)列表與key
（1）根據(jù)數(shù)組動(dòng)態(tài)生成多個(gè)組件一般使用map方法
注意，箭頭函數(shù)的返回值（有{}必須寫(xiě)return）
（2）循環(huán)生成的組件需要有唯一的key值區(qū)分
注意，key值放在循環(huán)的直接容器上
5、組件化開(kāi)發(fā)舉例一
（1）代碼示例：
//第一部分：引入依賴(lài)
import React, {Component} from 'react'
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity
} from 'react-native'
//第二部分：定義組件
class App extends Component {
//組件默認(rèn)自帶屬性
state = {
likes:0,
}
//編寫(xiě)onPress函數(shù)
onPress = ()=>{
const {likes}=this.state;
this.setState({
likes: likes+1i
});
}
//渲染
render() {
return(
{this.state.likes}
);
}
}
//第三部分：樣式表
const styles = StyleSheet.create ({
container: {
flex:1,
justifyContent: 'center',
alignItems:'center',
backgroundColor: '#f5fcff',
},
welcome: {
fontSize:20,
textAlign: 'center'
margin:10,
},
});
//第四部分：注冊(cè)組件
AppRegistry.registerComponent('App', ()=>App);
（2）總結(jié)
【1】萬(wàn)物生長(zhǎng)靠太陽(yáng)，界面變化靠狀態(tài)state
【2】state的狀態(tài)修改不能直接修改，必須通過(guò)setState方法
【3】setState是異步操作，修改不能馬上生效
【4】每setState一次，調(diào)用一次render方法
