箭头函数
在我们学习React Native的过程中，我们经常会遇到"=>"这样形式的书写，如下：
import React, {Component} from 'react'
import {AppRegistry, StyleSheet, View, Text, TouchableOpacity} from 'react-native'
class RN_Arrow_Function extends Component {
//定义箭头函数
showMessage = (msg) => {
alert(msg)
}
render() {
return (
<TouchableOpacity>
<Text onPress={() => {
this.showMessage('arrow function')
}}>请点击</Text>
</TouchableOpacity>
)
}
}
module.exports = RN_Arrow_Function
从以上代码中我们可以看到有两处使用了'=>'，在ES6中，我们将使用这种箭头形式定义的函数称之为箭头函数
上面的箭头函数showMessage等同于：
showMessage = function (msg) {
alert(msg)
}
//等同于
showMessage = function (msg) {
return alert(msg)
}
如果箭头函数没有参数或者有多个参数，都使用小括号括起来，如下：
//定义不带参数的箭头函数(不带参数的需要加一个空的圆括号)
showMsgNoParams = () => {
console.log('不带参数的箭头函数')
}
//定义带多个参数的箭头函数(带多个参数使用圆括号将参数括起来,参数之间用逗号隔开)
showMsgMutParams = (param01,param02) => {
alert(param01)
}
//定义只有一个参数的箭头函数（圆括号可加可不加）
showMsgOneParams = param01 => {
alert(param01)
}
如果箭头函数的函数体只有一条语句，则可以省略花括号，如下：
showMsgOneParams = param01 => alert(param01)
如果箭头函数返回的是一个对象，由于花括号被解释为代码块，因此，必须在对象外面加上圆括号，如下：
//返回一个对象
getMsgObj = () => ({
id:1,
name:'VennyChen',
age:24
})
如果箭头函数返回的是一个组件，则只需要写圆括号，如下：
//返回一个组件
getCustomComponent = () => (
<Text>return Component</Text>
)
延展操作符
我们平常在做项目的时候，在传递属性值的时候，通常情况下，我们会这样写：
let student = {
name: 'VennyChen',
age: 24,
sex: '男'
}
/*传统的写法*/
<PropsSpread
name={student.name}
age = {student.age}
sex = {student.sex}>
</PropsSpread>
但是，如果上面PropsSpread组件的属性少则没有什么影响，如果随着项目的需求变化，PropsSpread属性增加到几十个，如果还如上所写，那么不可避免的，代码的维护将会变得越来越困难，因此，在ES6的最新语法中，出现了一种新的延伸操作符...，用来解决随着属性增多变得难以维护的问题，使用方式如下：
let student = {
name: 'VennyChen',
age: 24,
sex: '男'
}
/*使用延展操作符*/
<PropsSpread {...student}>
</PropsSpread>
通过以上两种方式的对比，我们可以看到，使用延展操作符减少了属性的批量赋值，如此，大大提高了代码的可维护性，完整代码如下：
import React, {Component} from 'react'
import {View, Text} from 'react-native'
class RN_Spread_Operator extends Component {
render() {
let student = {
name: 'VennyChen',
age: 24,
sex: '男'
}
return (
/*传统的写法*/
<PropsSpread name={student.name}
age = {student.age}
sex = {student.sex}>
</PropsSpread>
/*等同于*/
/*使用延展操作符*/
/*<PropsSpread {...student}>
</PropsSpread>*/
)
}
}
class PropsSpread extends Component {
render() {
let {name,age,sex} = this.props
return (
<Text>
{/*{this.props.name + '-' + this.props.age + '-' + this.props.sex}*/}
{name+'-'+age+'-'+sex}
</Text>
)
}
}
module.exports = RN_Spread_Operator
