使用ES6让你的React代码提升到一个新档次

时间: 2018-07-09阅读: 1667标签: es6

ES6使您的代码更具表现力和可读性。而且它与react完美配合!现在您已了解更多基础知识:现在是时候将你的ES6技能提升到一个新的水平! 


嵌套props解构

您已经知道可以通过解构从react组件中的props中提取变量

const { user } = this.props;

但是如果user是一个对象并且你想从this.props.user.id提取到变量_id_呢?

您可以使用嵌套解构:

const { user: { id } } = this.props;

现在你有一个变量_id _是 this.props.user.id 的内容


传下所有props

您已经知道可以将props传递给子组件。

<MyChild shoe={this.props.shoe} cup={this.props.cup}/>

将所有props传递给具有扩展语法的子组件。

<MyChild {...this.props}/>

现在,MyChild可以访问shoe,cup以及父组件可以访问的所有其他props!


props解构

你已经知道你可以用箭头函数来构造props

const MyComponent = ({ shoe, car }) => /* do something */

但是,如果您还想访问props对象呢?

这可能是这样的:

const MyComponent = ({ shoe, car, ...props }) => /* do something */

props现在包含除shoe和car以外的所有props。


作为参数的函数

您已经知道可以将箭头函数作为参数传递给其他函数,例如mapforEach

myList.map((a) => toUpperCase(a))

(您必须自己编写toUpperCase以使此代码可运行)

上面的代码甚至没有使用箭头功能也可以写

myList.map(toUpperCase)

更干净!当您只在箭头函数中使用一个参数并将该参数传递给新函数时,您可以像这样编写它。


列表解构

您已经知道可以对列表进行解构:

const [a, b, c] = list;

获取第一项,其余为两个变量:

const [first, ...rest] = list;


原文链接: blog.jakoblind.no  译文出处


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/914

ES6中的解构赋值

从前我们对变量赋值时,都是通过赋值运算符,右边赋值给左边这样操作的。现在我们通过模式匹配的方式来赋值。左边是解构目标,右边是解构源。

9个常用ES6特性归纳

顾名思义,用于对象或数组之前的展开操作符(…),将一个结构展开为列表。这种写法够优雅,够简洁吧?如果不用展开操作符

es6数据变更同步到视图层

数据变更同步到视图层有一个很重要的东西就是Proxy,Proxy的作用就是可以隐藏真正的对象,而用户去修改它的代理对象.Proxy可以监听数据的变化,例如

es6中const定义的属性是否可以改变_为什么有人说const并非一定为常量

const是用来定义常量的,而且定义的时候必须初始化,且定义后不可以修改。const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。

ES6 Iterators

本文旨在分析理解 Iterators。 Iterators 是 JS中的新方法,可以用来循环任意集合。 在ES6中登场的Iterators。因其可被广泛使用,并且已在多处场景派上用场,

Rest/Spread 属性_探索 ES2018 和 ES2019

Rest/Spread 属性:rest操作符在对象解构中的使用。目前,该操作符仅适用于数组解构和参数定义。spread操作符在对象字面量中的使用。目前,这个操作符只能在数组字面量和函数以及方法调用中使用。

ES6中常用的10个新特性讲解

ECMAScript 6(ES6) 目前基本成为业界标准,它的普及速度比 ES5 要快很多,主要原因是现代浏览器对 ES6 的支持相当迅速,尤其是 Chrome 和 Firefox 浏览器,已经支持 ES6 中绝大多数的特性。

javascript es6是什么?

ES6就是ECMAScript6是新版本JavaScript语言的标准。已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上,推出JavaScript 2.0。ECMAScript6在保证向下兼容的前提下

关于ES6的let和const

var存在的问题可以重复声明,无法限制修改,没有块级作用域 (在全局范围内有效),存在变量提升

在使用es6语法class的时候,babel到底做了什么?

自从有了webpack之后,我们这些jscoder似乎得到了前所未有的解放,箭头函数,对象解构,let,const关键字,以及class、extends等等,webpack会帮我们把这些es6代码转换成浏览器能够识别的es5代码,那么有多少人真正的看过,babel转换之后的代码呢?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!