我们写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. 系统重启后DNS地址默认修改修改引起的一次事故（Tomcat报错：java.net.UnknownHostException）

    事故描述:公司的一个内部业务系统由于程序bug,导致系统崩溃,需要强制重启服务器.系统重启后,赶紧将业务程序启动.随后发现/etc/resolv.conf文件的DNS地址被修改成了默认地址.发现之后, ...

  2. use_frameworks!和#use_frameworks!的区别、解决Swift项目中use_frameworks!冲突的问题

    use_frameworks!和#use_frameworks!的区别 转自:https://www.jianshu.com/p/0ae58a477459 1. 用cocoapods 导入swift ...

  3. 个人博客week2

    1. 是否需要有代码规范 对于是否需要有代码规范,请考虑下列论点并反驳/支持: 这些规范都是官僚制度下产生的浪费大家的编程时间.影响人们开发效率, 浪费时间的东西. 我是个艺术家,手艺人,我有自己的规 ...

  4. Linux内核分析第三章读书笔记

    第三章 进程管理 3.1 进程 进程就是处于执行期的程序 进程就是正在执行的程序代码的实时结果 线程:在进程中活动的对象.每个线程都拥有一个独立的程序计数器.进程栈和一组进程寄存器. 内核调度的对象是 ...

  5. 如何实现基于ssh框架的投票系统的的质量属性

    如何实现基于ssh框架的投票系统的的质量属性: 项目 :网上考试系统 我做的是网上考试系统,因为标准化的考试越来越重要,而通过计算机进行标准化判卷,系统会自动判卷出成绩,组织考试的人不用组织人员打印试 ...

  6. git 的安装及使用

    一.Git的安装和使用 1.1 Linux下版本库的创建 1.1.1 创建一个版本库 repository,在一个合适的地方创建一个空目录: root@zengyue:/# mkdir -p /hom ...

  7. Running kubernetes on windows

    docker-for-desktop minikube GKE cluster(?) docker-for-desktop https://docs.docker.com/docker-for-win ...

  8. oracle11.2.0.1 deferred_segment_creation 造成exp imp 空表无法导出的问题

     oracle11g 新增加了 deferred_segment_creation 的属性在创建的数据库表中,如果表中没有数据,并且这个参数是true的话,并不是直接就在数据文件中的增加相应的segm ...

  9. ubuntu 下搭建redis和php的redis的拓展

    系统环境: 腾讯云服务器, ubuntu16.0.4.4 ,php7.0   一.安装redis服务 sudo apt-get install redis-server 安装好的redis目录在 /e ...

  10. hadoop集群故障排除

    故障一:某个datanode节点无法启动 我是以用户名centos安装和搭建了一个测试用的hadoop集群环境,也配置好了有关的权限,所有者.所属组都配成centos:centos [故障现象] 名称 ...