关闭

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

时间: 2018-07-09阅读: 1401标签: 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中的解构赋值

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

ES6的循环和可迭代对象

本文将研究 ES6 的 for ... of 循环。在过去,有两种方法可以遍历 javascript。首先是经典的 for i 循环,它使你可以遍历数组或可索引的且有 length 属性的任何对象。

9个常用ES6特性归纳

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

详解JavaScript模块化开发require.js

js模块化的开发并不是随心所欲的,为了便于他人的使用和交流,需要遵循一定的规范。目前,通行的js模块规范主要有两种:CommonJS和AMD

Js ES6代理的实际用例

元编程是一种强大的技术,使你能够编写可以创建其他程序的程序。ES6借助代理和许多类似功能,使在JavaScript中利用元编程变得更加容易。ES6 Proxy(代理) 有助于重新定义对象的基本操作,从而为各种可能性打开了大门。

ES6迭代器精炼讲解

Iterator 是 ES6 引入的一种新的遍历机制,迭代器有两个核心概念:迭代器是一个统一的接口,它的作用是使各种数据结构可被便捷的访问,它是通过一个键为Symbol.iterator 的方法来实现。

关于ES6的let和const

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

jses6语法:Iterator遍历器 promise async函数

Iterator遍历器他是一种接口,为不同的数据结构体用统一的访问机制,接口部署在数据结构的Symbol.Iterator属性,或者说一个数据结构只要具备Symbol.Iterator属性就认为是可以遍历的

ES6的7个实用技巧

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

ES6中export default 与export区别

export与export default均可用于导出常量、函数、文件、模块等,有什么区别呢?在一个文件或模块中,export、import可以有多个,export default仅有一个

点击更多...

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