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

更新日期: 2018-07-09阅读量: 1722标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

ES6箭头函数(Arrow Functions)

箭头函数中的 this 指向的是定义时的对象,而不是使用时的对象;由于 箭头函数没有自己的this指针,通过 call() 或 apply() 方法调用一个函数时,只能传递参数,他们的第一个参数会被忽略

ES6新特性:JavaScript中内置的延迟对象Promise

利用Promise是解决JS异步执行时候回调函数嵌套回调函数的问题, 更简洁地控制函数执行流程;通过new实例化Promise, 构造函数需要两个参数

ES6新特性:JavaScript中的Reflect对象

Reflect这个对象在我的node(v4.4.3)中还没有实现, babel(6.7.7)也没有实现 ,新版本的chrome是支持的, ff比较早就支持Proxy和Reflect了,要让node支持Reflect可以安装harmony-reflect ;

ES6中的解构赋值

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

ES6新特性:JavaScript中Set和WeakSet类型的数据结构

ES6提供了新的数据结构Set,Set对象不是数组, 可以用来保存对象或者基本类型, 所有保存的值都是唯一的, chrome浏览器>38和FF>13,以及nodeJS,对Set支持良好, 以下的一些代码,都可以拷贝到控制台直接运行哦;

ES6的7个实用技巧

ES6的7个实用技巧包括:1交换元素,2 调试,3 单条语句,4 数组拼接,5 制作副本,6 命名参数,7 Async/Await结合数组解构

九个超级实用的 ES6 特性

展开操作符顾名思义,用于对象或数组之前的展开操作符(…),将一个结构展开为列表。剩余参数将剩余的参数收入数列。JavaScript 的特性是参数数目很灵活

ES6+js原生注意点

Symbol属性私有化,数据保护,let不支持变量声明预解析(先声明后使用),支持块作用域,const不支持变量声明预解析(先声明后使用),不允许重复声明(暂存死区),事件委托,解构赋值

ES6、7、8常用新特性总结(超实用)

ES6常用新特性:let && const、解构赋值、箭头函数、 ...操作符、 iterable类型、类、ES7常用新特性:Array.prototype.includes、Exponentiation Operator(求幂运算)、Object.values/Object.entries

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

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

点击更多...

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