React Native之箭头函数和延展操作符（...）

箭头函数

在我们学习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