react native 中 ... 操作符的主要用途

延展操作符(Spread operator)

这个 … 操作符(也被叫做延展操作符 - spread operator)已经被 ES6 数组 支持。它允许传递数组或者类数组直接做为函数的参数而不用通过apply。

var people=['Wayou','John','Sherlock'];
//sayHello函数本来接收三个单独的参数人妖,人二和人三
function sayHello(people1,people2,people3){
	console.log(`Hello ${people1},${people2},${people3}`);
}
//但是我们将一个数组以拓展参数的形式传递,它能很好地映射到每个单独的参数
sayHello(...people);//输出:Hello Wayou,John,Sherlock
//而在以前,如果需要传递数组当参数,我们需要使用函数的apply方法
sayHello.apply(null,people);//输出:Hello Wayou,John,Sherlock

而在 React中,延展操作符一般用于属性的批量赋值上。在JSX中,可以使用…运算符,表示将一个对象的键值对与ReactElement的props属性合并。

var props = {};
  props.foo = x;
  props.bar = y;
  var component = <Component {...props} />;

//等价于
var props = {};
  props.foo = x;
  props.bar = y;
  var component = <Component foo={x} bar={y} />;
时间: 2024-10-28 11:59:39

react native 中 ... 操作符的主要用途的相关文章

如何在React Native中写一个自定义模块

前言 在 React Native 项目中可以看到 node_modules 文件夹,这是存放 node 模块的地方,Node.js 的包管理器 npm 是全球最大的开源库生态系统.提到npm,一般指两层含义:一是 Node.js 开放式模块登记和管理系统,另一种是 Node.js 默认的模块管理器,是一个命令行软件,用来安装和管理 node 模块.本文旨在探讨如何在 React Native 中写一个自定义的 npm 模块(类似于插件),并上传到 npm 上供他人使用. npm 使用介绍 np

React Native中的Android原生模块

当使用 React Native 开发 Android 应用时,你可能需要使用没有被 React Native 封装的模块.但你可以使用 Java 编写原生模块,然后选择性的暴露公共接口到 React Native.一起来试一下! 我们要写一个什么东西 在写这篇文章时,React Native 包含了 ImagePickerIOS 组件,但是在 Android 平台上却没有对应的 ImagePicker 组件.我们接下来就要为 Android 构建一个简单的.和 ImagePickerIOS 大

如何在 React Native 中写一个自定义模块

前言 在 React Native 项目中可以看到 node_modules 文件夹,这是存放 node 模块的地方,Node.js 的包管理器 npm 是全球最大的开源库生态系统.提到npm,一般指两层含义:一是 Node.js 开放式模块登记和管理系统,另一种是 Node.js 默认的模块管理器,是一个命令行软件,用来安装和管理 node 模块.本文旨在探讨如何在 React Native 中写一个自定义的 npm 模块(类似于插件),并上传到 npm 上供他人使用. npm 使用介绍 np

React Native中Android物理back键按两次返回键即退出应用

前言 本文主要给大家介绍了关于React Native中Android物理back键按两次返回键就会退出应用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 话不多说,直接上图: 测试代码 第16~22行 设置事件监听以及移除事件监听. componentWillMount(){ BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid); } componentWillUnmount()

React Native中ScrollView性能探究

1 基本使用 ScrollView 是 React Native(后面简称:RN) 中最常见的组件之一.理解 ScrollView 的原理,有利于写出高性能的 RN 应用. ScrollView 的基本使用也非常简单,如下: <ScrollView>      <Child1 />    <Child2 />    ...  </ScrollView>   它和 View 组件一样,可以包含一个或者多个子组件.对子组件的布局可以是垂直或者水平的,通过属性 h

React Native中pointerEvent属性

在React Native界面开发中, 如果使用绝对定位布局,在代码运行时的某个时刻有可能会遮盖住它的下方的某个组件.这是因为绝对定位只是说这个组件的位置由它父组件的边框决定. 绝对定位的组件可以被认为会覆盖在它前面布局(JSX代码顺序)的组件的上方. 如果被遮盖住的组件需要处理触摸事件.比如我们在一个地图组件上覆盖了一个图像组件用来显示信息,又不想让这个图像组件影响用户手指拖动地图的操作,这时就需要使用图像组件从View组件继承得到的pointerEvents属性来解决这个问题. **poin

从零学React Native之06flexbox布局

前面我们接触了好多React Native代码, 并没有介绍RN中的组件具体是如何布局的,这一篇文章,重点介绍下flexbox布局. 什么是flexbox布局 React中引入了flexbox概念,flexbox是属于web前端领域CSS的一种布局方案,是2009年W3C提出了一种新的布局方案,可以简便.完整.响应式地实现各种页面布局.你可以简单的理解为flexbox是CSS领域类似Android中 LinearLayout的一种布局,但是要比 LinearLayout要强大的多. React

三步将 React Native 项目运行在 Web 浏览器上面

React Native 的出现,让前端工程师拥有了使用 JavaScript 编写原生 APP 的能力.相比之前的 Web app 来说,对于性能和用户体验提升了非常多. 但是 React Native 的代码只兼容两个平台(iOS 和 Android),并没有兼容 Web 端访问.这里是因为 Facebook 开发人员认为 Web 端天生兼容性就巨麻烦,而且平台差异性是注定存在而且也要保留的,所以 React Native 的目标是 Learn once, write anywhere,而不

React Native在特赞的应用与实践

作者:苑永志 作者介绍:现任特赞大前端负责人.技术涉猎比较广泛,曾在大麦网担任高级Java研发工程师:后以前端工程师身份加入特赞,基于React技术栈构建开发前端项目,并使用React Native开发特赞移动APP:目前正在使用Node.js开发和维护特赞服务网关,希望Node.js能够在更轻量级的微服务架构中发挥重要作用. 一.需求缘起 特赞是在2016年末才开始着手APP开发的.记得那是距离过年还有一个月的时候,产品突然提出一个需求:咱们做一个iOS应用吧,快过年了,给设计师一个新年礼物.