一、React JSX基础
1、React.js和React Native关系
2、React Native原理
3、借鉴XHTML的一些规则/规范
（1）开始结束标签配对
<组件>ooxx
（2）无内容组件标签写为自封闭形式
<组件/>
（3）自定义属性，字符串应使用双引号，其他值用{}括起来
4、注意事项
（1）必须单一子节点
（2）空值自动忽略
（3）显示和隐藏组件
（4）组件必须大写字母开头
（5）文本必须写在Text组件内
【1】React Native中文网
【2】
（6）注释写法比较特殊
（7）只能嵌入表达式，不能是语句
二、初识React组件化开发
1、class/function都可以是“积木”（组件）
（1）class
class GoodMorning extends Component {
render() {
return(
Good Morning!
);
}
}
（2）function无状态组件
const GoodMorning=()=>{
return (
Good evening
);
}
2、使用props定制“积木”（组件）
（1）class
class GoodMorning extends Component {
static defaultProps={
name: 'someBody',
};
static propTypes={
name：React.propTypes.string, //约定需要的类型
};
render() {
return(
{this.props.name}
);
}
}
（2）function无状态组件
const GoodEvening=(props)=> {
return (
{props.name}
);
}
3、class内成员变量写法
4、动态列表与key
（1）根据数组动态生成多个组件一般使用map方法
注意，箭头函数的返回值（有{}必须写return）
（2）循环生成的组件需要有唯一的key值区分
注意，key值放在循环的直接容器上
5、组件化开发举例一
（1）代码示例：
//第一部分：引入依赖
import React, {Component} from 'react'
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity
} from 'react-native'
//第二部分：定义组件
class App extends Component {
//组件默认自带属性
state = {
likes:0,
}
//编写onPress函数
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,
},
});
//第四部分：注册组件
AppRegistry.registerComponent('App', ()=>App);
（2）总结
【1】万物生长靠太阳，界面变化靠状态state
【2】state的状态修改不能直接修改，必须通过setState方法
【3】setState是异步操作，修改不能马上生效
【4】每setState一次，调用一次render方法
