我们写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. MRT与MRTS工具官宣退休，推荐使用HEG

    今天错误的删除搞丢了之前下载的MRT与MRTS工具,浏览Modis官网下载时发现找不到了,后来在其官网上发现了这则通知,原来早已停止更新的MRT这次彻底退修了.通知原文如下~~~ The downlo ...

  2. python-小知识点-14

    ''' python2 python3 ''' #python2 print() print 'abc' range() xrange() 生成器 raw_input() #python3 print ...

  3. cf166e 在四面体上寻找路线数 递推，取模

    来源:codeforces                 E. Tetrahedron   You are given a tetrahedron. Let's mark its vertices ...

  4. Week 7 迭代总结

    写在前面: 本次我为团队博客写了一篇总结,深刻总结了我们组发生的问题以及将来要做的事情.有兴趣请移步http://www.cnblogs.com/Buaa-software Week 7 Alpha轮 ...

  5. 【软件工程Ⅱ】作业四 |个人项目-小学四则运算 “软件”之初版(C语言)

    本次作业的要求来自于:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/2186 本次作业代码的github地址:https://gith ...

  6. PAT 1031 查验身份证

    https://pintia.cn/problem-sets/994805260223102976/problems/994805290334011392 一个合法的身份证号码由17位地区.日期编号和 ...

  7. [转帖]看完这篇文章你还敢说你懂JVM吗？

    看完这篇文章你还敢说你懂JVM吗? 在一些物理内存为8g的服务器上,主要运行一个Java服务,系统内存分配如下:Java服务的JVM堆大小设置为6g,一个监控进程占用大约 600m,Linux自身使用 ...

  8. [转帖]关于hostnamectl 命令

    作者:Linux运维 来源:CSDN 原文:https://blog.csdn.net/linuxnews/article/details/51112022 版权声明:本文为博主原创文章,转载请附上博 ...

  9. [转帖] 数据库用优化方案 https://segmentfault.com/a/1190000006158186

    Mysql大表优化方案     当MySQL单表记录数过大时,增删改查性能都会急剧下降,可以参考以下步骤来优化: 单表优化 除非单表数据未来会一直不断上涨,否则不要一开始就考虑拆分,拆分会带来逻辑.部 ...

  10. thread run 和 start 的区别

    run 方法 也可以调用线程启动   但是单线程(为顺序执行) 而start方法 启动的线程为多个线程之间争夺cpu的执行权(为随机的) 摘录于http://www.cnblogs.com/sunfl ...