【React Native学习笔记二】React基础

一、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方法