箭头函数

在我们学习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.propsreturn (<Text>{/*{this.props.name + '-' + this.props.age + '-' + this.props.sex}*/}{name+'-'+age+'-'+sex}</Text>)}
}module.exports = RN_Spread_Operator

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

react组件中箭头函数的使用
文章目录 1概念 2this指向三.箭头函数不能改变this指向四.箭头函数的调用(这边以React组件举例) 1概念箭头函数是匿名函数的另一种表达形式,简化写法. // 普通函数 const ...
React Native入门基础使用总结
1.router: react-native-router-flux 基于react-navigation/native 二次封装 2.字体图标:react-native-vector-icons(推 ...
React Native之函数作为参数传递给另外一个函数去调用
1 用法我们一般喜欢把js里面的函数作为参数传递给另外一个函数,然后再调用这个函数,有点像C语言里面的函数指针 2 代码测试写了一个函数,2个参数分别是函数,然后更具数据决定调用哪个函数 /*** ...
React Native之(var和let区别 )(简单解构)(map对象遍历)(可变顺序参数和不可以变顺序参数函数)
1 var和let区别 let左右范围在块里面,var定义的变量可提升,用let声明的变量不可以声明2次 2 简单解构 let [a, b, c] = [1, 2, 3]; 3 map对象遍历 co ...
android 回退函数,详解React Native监听Android回退按键与程序化退出应用
详解React Native监听Android回退按键与程序化退出应用发布时间:2020-09-29 09:25:52 来源:脚本之家阅读:137 作者:lqh 详解React Native监听A ...
[react] 在React中什么时候使用箭头函数更方便呢？
[react] 在React中什么时候使用箭头函数更方便呢? 合成事件当中使用箭头函数比较方便注意点在于当事件作为props传递给子组件时,会造成额外的性能损耗个人简介我是歌谣,欢迎和大家一起交 ...
react 绑定箭头函数_为什么箭头函数和React渲染中的绑定有问题
react 绑定箭头函数 (提示:这会使shouldComponentUpdate和PureComponent变得胡思乱想) ((Hint: It makes shouldComponentUpda ...
在React的render方法中使用箭头函数
在 React 组件中绑定点击事件通常的做法使用 class 属性. class Foo extends Component {handleClick = () => {console.log( ...
React Native随笔 2--重要函数
生命周期 React Native每个组件从创建到最后从DOM中移除,都有相关的方法被执行,这些方法我们可以植入相关逻辑,例如:拦截不必要的render方法执行以提高性能! 首先有哪些方法呢? //组 ...

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

箭头函数

延展操作符

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

最新文章

热门文章