我们写react组件的过程中会遇到这个

我们知道react中的{}，浏览器会知道说是以js的形式进行解析出来。那么怎么解析...props呢？
这个就涉及到es6中的扩展运算符了，我们先看下面的一些运行结果



上面代码中，array.push(...items)和add(...numbers)这两行，都是函数的调用，它们的都使用了扩展运算符。该运算符将一个数组，变为参数序列。
由于扩展运算符可以展开数组，所以不再需要apply方法，将数组转为函数的参数了。


当然还有一些例子比如


由以上的一些特性其实我们大概也能够猜到react组件中...props的意思，但其实这也复合顶层父组件中的属性，传递给子组件，子子组件的特性。props是一个数据的集合，...props将这个数据的集合进行打散，使用的时候，可以从props中进行取。

spread与react的更多相关文章

  1. [React] Spread Component Props in JSX with React

    You often find duplication between the name of a prop and a variable you will assign to the prop. JS ...

  2. React入门最好的学习实例－TodoList

    前言 React 的核心思想是:封装组件,各个组件维护自己的状态和 UI,当状态变更,自动重新渲染整个组件. 最近前端界闹的沸沸扬扬的技术当属react了,加上项目需要等等原因,自己也决定花些时间来好 ...

  3. React 性能优化总结

    初学者对React可能满怀期待,觉得React可能完爆其它一切框架,甚至不切实际地认为React可能连原生的渲染都能完爆--对框架的狂热确实会出现这样的不切实际的期待.让我们来看看React的官方是怎 ...

  4. React组件属性部类（propTypes）校验

    React组件属性类型(propTypes)校验 Prop 验证 随着应用不断变大,保证组件被正确使用变得非常有用.为此我们引入propTypes.React.PropTypes 提供很多验证器 (v ...

  5. 6周学习计划，攻克JavaScript难关(React/Redux/ES6 etc.)

    作者:余博伦链接:https://zhuanlan.zhihu.com/p/23412169来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 和大家一样,最近我也看了Jo ...

  6. React JSX语法说明

    原文:http://my.oschina.net/leogao0816/blog/379487 什么是JSX? 在用React写组件的时候,通常会用到JSX语法,粗看上去,像是在Javascript代 ...

  7. 【腾讯Bugly干货分享】React移动web极致优化

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/579083d1c9da73584b02587d 最近一个季度,我们都在为手Q家校 ...

  8. spread语法解析与使用

    @[spread, javavscript, es6, react] Spread语法是ES6中的一个新特性,在需要使用多参数(函数参数).多元素(数组迭代)或者多变量(解构赋值)的地方使用sprea ...

  9. React v16-alpha 从virtual dom 到 dom 源码简读

    一.物料准备 1.克隆react源码, github 地址:https://github.com/facebook/react.git 2.安装gulp 3.在react源码根目录下: $npm in ...

随机推荐

  1. TRIO-basic指令--FLEXLINK

    Type: Axis Command Syntax: FLEXLINK(base_dist, excite_dist, link_dist, base_in, base_out, excite_acc ...

  2. Nginx挂载维护页或返回自定义响应信息

    在服务停机升级或者服务暂不可用时,往往希望能够返回给用户更为明确和友好的响应信息.可以通过修改nginx配置文件,达到返回自定义信息的效果.有如下几种配置方式: (1)Nginx接收到的所有请求,都返 ...

  3. ireportdesigner下载页面

    iReport主页:http://community.jaspersoft.com/project/ireport-designer iReport下载地址:http://sourceforge.ne ...

  4. LVS+Keepalived 高可用环境部署记录（主主和主从模式）

    之前的文章介绍了LVS负载均衡-基础知识梳理, 下面记录下LVS+Keepalived高可用环境部署梳理(主主和主从模式)的操作流程: 一.LVS+Keepalived主从热备的高可用环境部署 1)环 ...

  5. Linux内核分析— —构造一个简单的Linux系统MenuOS（20135213林涵锦）

    Linux内核分析— —构造一个简单的Linux系统MenuOS 实验内容 Linux内核的启动过程,从start_kernel到init进程启动 使用实验楼的虚拟机打开shell cd LinuxK ...

  6. javascript数据类型以及类型间的转化函数

    js 有五种基本数据类型,还有个引用类型 1.undefined 类型,只有一个志undefined 当变量未初始化时都会是这个类型. 2.null 类型,也是只有一个值null,null类型的typ ...

  7. Java计算器（结对）

    一:题目简介 我们要做的是一个多功能计算器,Java程序编辑器是:图形界面.线程.流与文件等技术的综合应用. 图形界面的实现:考虑到简单.实用.高效等特点,就选择了Swing来完成实现,在选择组件上, ...

  8. SE Springer小组之《Spring音乐播放器》可行性研究报告一、二（转载）

         此文转载自组员小明处~~ 1 引言 1．1编写目的 <软件工程>课程,我们团队计划开发一个音乐播放器.本文档是基于网络上现有的音乐播放器的特点,团队计划实现的音乐播放器功能和团队 ...

  9. Daily Scrum - 12/15-21

    Meeting Minutes 没有什么实质性进展: 添加/完成了一个新feature,即使用非线性的函数作为速度条的设定: 等待与travis开会,讨论下一步的feature = =: 阅读code ...

  10. Java 一维数组作为参数和返回值

    一维数组作为参数: 传数组的引用 创建数组直接传,本质也是传数组的引用 传null public class Test { //数组作为参数时,可以传递3中形式 public void m1(int[ ...