学完JavaScript后，就可以进下一步，学习React的开发了，学习Reac需要掌握几个知识点，JSX语法、组件、状态，生命周期。
React语法基础
关于React的语法，可以参考React 入门实例教程，基本可以对几个基础语法点进行理解，不过文章面对的是React.js，具体语法有一点点区别。下面的案例，基本语法点保持一致，但是面对的是ReactNative。
编写的时候，如果想方便，也可以在在线模拟器上进行练习。
显示一个组件
// demo1.js
// 导入依赖包
import React, { Component } from 'react'
import {
AppRegistry,
Text,
View,
} from 'react-native'
// 定义一个组件
export default class App extends Component{
render() {
return (
<View>
<Text>Hello World!</Text>
</View>
)
}
}
// JS运行所有React Native应用的入口。应用的根组件应当通过AppRegistry.registerComponent方法注册自己，然后原生系统才可以加载应用的代码包
AppRegistry.registerComponent('App', () => App)
JSX语法
通过JSX语法，可以使得HTML和JavaScript语法混写，如果想写HTML语法，就使用<>，如果使用JavaScript语法，则使用{}。
JSX不是一种标记语言，实质是调用React.createElement函数，所以在开发中使用其时，要在头部定义import React from 'react';。
// demo2.js
export default class App extends Component{
render() {
let name = "yuan"
return (
<View>
<Text>Hello {name}!</Text>
</View>
)
}
}
语法规则
标签首字母必须大写
-
开始和结束标签配对
<组件>内容</组件> // 如果无内容的组件，标签应写成自封闭形式 <组件/> -
必须为单一子节点，如果有多个节点，最外层可以用
<View></View>嵌套起来// 错误做法 return ( <View> <Text>Hello World!</Text> </View> <View> <Text>Hello World!</Text> </View> ) // 正确做法 return ( <View> <View> <Text>Hello World!</Text> </View> <View> <Text>Hello World!</Text> </View> </View> )
注释
在JSX代码内，注释只能使用{/* 注释内容 */}
// demo3.js
export default class App extends Component{
render() {
let name = "yuan"
// JSX外的注释
return (
<View>
{/*JSX的注释*/}
<Text>Hello {name}!</Text>
</View>
)
}
}
组件
在React Native开发中，一个个布局可以通过创建组件的方式搭建起来，然后通过return返回一个在页面上展示的React元素。定义一个组件有两种方式，一种是通过function，称为函数定义组件，功能比较简单的组件可以采用该方法。另外一种是通过继承class，称为类定义组件。可以把组件类似认为，在Android开发中，在java类中创建自定义View，然后把View添加到原有布局中。
// demo4.js
// 函数定义组件，采用箭头函数
const HelloWorld = () => {
return (
<Text>Hello world!</Text>
);
}
// 类定义组件，与上面的效果一致
class HelloWorld extends Component{
render() {
return (
<Text>Hello World!</Text>
)
}
}
组件属性props
每次在使用的时候，不可能组件内容都一样，所以，需要可以在使用的时候，传入不同的值，改变组件里面的内容，那么就可以使用关键字props。
// demo5.js
// 函数定义组件，属性需要传递进去
const HelloWorld = (props) => {
return (
<Text>Hello {props.name}!</Text>
);
}
// 类定义组件，属性通过this.props获取，与上面的效果一致
class HelloWorld extends Component{
render() {
return (
<Text>Hello {this.props.name}!</Text>
)
}
}
class App extends Component{
render() {
return (
<View>
<HelloWorld name="yuan"/>
</View>
)
};
}
自定义属性，字符串应使用双引号，其他值用{}括起来，布尔值可省略，默认为true。
<Person age={30} sex="male" married/>
类定义组件属性
class HelloWorld extends Component{
// 如果组件没有设置该属性，则会使用默认值
static defaultProps = {
name:"yuan",
};
// 约定组件属性所需要的类型(为字符串)，如果类型不符合，编译的时候会报错
static propTypes = {
name: React.PropTypes.string,
};
render() {
return (
<Text>Hello {this.props.name}!</Text>
)
}
}
变量作用域
- 函数内的局部变量，只能函数内读写，函数运行完后销毁（闭包除外）
-
class内的成员变量，在单个class的实例内读写，实例销毁时一并销毁
- 使用时不要忘记this.
-
class内的静态成员变量，在所有class的实例内共享，不会自动销毁
- 其他模块可通过此class访问（类public
-
class外的变量，在所有class的实例内共享（公有），不会自动销毁
- 除非明确export，否则其他模块不可访问（类private）
状态state
上面讲到了不同的属性值，可以用props，但是其值一经指定，在组件的生命周期中则不再改变。 对于需要改变的数据，我们就需要使用state。
// demo6.js
// 定义一个文字按钮的组件
class LikeButton extends Component{
// 设置默认状态值为false，同时也声明为boolean类型
state = {
liked : false
};
// 定义一个函数，响应点击事件，改变state的值，方法名可以任意
onPress = () => {
this.setState({
liked: !this.state.liked
})
};
render() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<View>
{/*声明了点击事件执行的方法*/}
<Text onPress={this.onPress}>
You {text} this. Click to toggle.
</Text>
</View>
)
};
}
export default class App extends Component{
render() {
return (
<View>
<LikeButton/>
</View>
)
}
}
state的变化，必须通过setState()方法，不能直接赋值修改
-
setState是异常操作，修改不会马上生效
onPress = () => { console.log(this.state.liked) this.setState({ liked: !this.state.liked }); console.log(this.state.liked) }; // 结果的输出，两次都保持一样，执行setState()后，该值不会立马生效，还是保持原来的状态值 setState被执行后，会触发render，对界面重新渲染，所以，不要再renser，对数据进行改变，避免会调用到setState，导致死循环。
组件的生命周期
组件的生命周期，可以分为三个状态：
- Mounting：已插入真实 DOM
- Updating：正在被重新渲染
- Unmounting：已移出真实 DOM
React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数：
- componentWillMount()
- componentDidMount()
- componentWillUpdate(object nextProps, object nextState)
- componentDidUpdate(object prevProps, object prevState)
- componentWillUnmount()
此外，React 还提供两种特殊状态的处理函数：
- componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
- shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用
各种组件处理函数的流程图如下
实例代码
// dmeo7.js
class TextOpacity extends Component{
state = {
opacity : 1.0
};
componentDidMount() {
this.timer = setInterval(() => {
let opacity = this.state.opacity;
opacity -= 0.05;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
},100);
}
// 卸载后清空时钟
comnponentWillUnmount() {
clearInterval(this.timer)
}
render() {
return (
<Text style={{opacity:this.state.opacity}}>
Hello world
</Text>
)
}
}
export default class App extends Component{
render() {
return (
<View>
<TextOpacity/>
</View>
)
}
}
上面代码在TextOpacity组件加载以后，默认设置透明度为1，然后通过 componentDidMount 方法设置一个定时器，每隔100毫秒，就重新通过setState设置组件的透明度，从而引发重新渲染调用render。
参考资料
