给React初学者的10分钟ES6教程

2018-06-15 admin

原文:The 10 min ES6 course for the beginner React Developer 译者:Jim Xiao

著名的80/20定律可以用来解释React和ES6的关系。因为ES6增加了超过75个新特性,但是根据我自身学习React经验,只使用了不到20%的ES6新特性。

注意: 在这篇文章中,为了避免引起混淆,我把JavaScript近似等同于ECMAScript(ES), 而ES6 = ES5 + 新特性,所以ES6和ES5都相当于JavaScript。他们之间的区别就是支持不同的语法以及ES6新加了一些功能。

当我从Angular 1和纯ES5转到React时,我看了一些教程,当了解到箭头函数和解构语句时,我十分迷惑,不知道哪些语法来自React, 哪些语法来自ES6。

但是在大概一周之后,我基本上确定了,像{name}这样的语法只能写在React中(说明该语法不是来自ES6)。

这并不是一个完整的教程,只是我在React代码中使用ES6的小结。那我们开始吧。

Let和const

在旧版的JavaScript (ES5)中,我们使用关键字var来声明变量, 利用JavaScript变量提升的黑魔法, 我们甚至可以在没有声明变量前,就使用该变量:

// ES5
console.log(myVar); // undefined
var myVar = 10;

这种变量提升可能带来一些难以预见的结果。但是在ES6就不会存在了。通过使用let或者const关键字,你必须先声明变量,才能使用它:

// ES6
console.log(myVar) // ReferenceError: myVar is not defined
let myVar = 10

从下面的结果可以看出,constlet的不同在于,用const声明变量,该变量值是不能更改的,而let可以更改:

// ES6
let x = 10
const y = 20
x = 25 // Ok
y = 30 // TypeError: Assignment to constant variable.

不再使用分号

ES6以及所有相关的工具都很好地支持了自动分号插入。所以,ES6的代码中可以几乎去掉所有的分号, 使代码看起来更加简洁:

//ES5
var theNumber = 10;
console.log(theNumber);

//ES6 - 可以去掉分号
let theNumber = 10
console.log(theNumber)

这并不是一个很大的改动,但确实是让代码看起来更舒服,尤其当你是CoffeeScript代码风格的粉丝。

箭头函数

在ES5语法中,如果声明一个函数,需要这样写:

// ES5
var sum = function(a, b) {
   return a + b
}

在ES6中,你可以通过箭头函数快速声明函数:

// ES6
const sum = (a, b) => {return a + b} 

并且,如果你只需要简单的一行函数,甚至可以去掉return关键字

// ES6
const sum = (a, b) => a + b // 一行箭头函数会自动返回结果

还有非常重要的一点,就是箭头函数的this是绑定了父级作用域的上下文:

function DogWorldContext() {
  this.age = 0

  setInterval(function growUp() {
    this.age++
    console.log(this.age)
  }, 1000)
}
var worldWithStandardFunction = new DogWorldContext()
// 将会每秒打印NaN,因为growUp是普通函数,它有自己this关键字的指向
function DogWorldContext() {
  this.age = 0

  setInterval(()=> {
    this.age++
    console.log(this.age)
  }, 1000)
}
var worldWithArrowFunction = new DogWorldContext()
// 将会每隔1s打印出1,2,3...

箭头函数没有自己的this绑定。该this上下文就是父级作用域的上下文,本例子中,就是DogWorldContext

解构

知名开发者网站Developer.mozillar.org对解构的定义是: 从数组和函数中提取值,并存储为变量。

提取对象的属性值是非常常见的做法。比如下面的代码:

// ES5; this.props.user = {name: "Daniel", age : 32}
alert(this.props.user.name + " " + this.props.user.age);

为了使之更易读, 我们把属性值赋给变量:

// ES5; this.props.user = {name: "Daniel", age : 32}
var name = this.props.user.name;
var age = this.props.user.age;
alert(name + " " + age);

在ES6中,我们可以使用对象解构:

// ES6; this.props.user = {name: "Daniel", age : 32}
const {name} = this.props.user
const {age} = this.props.user
alert(name + " " + age)

我们甚至可以简写为一行:

// ES6; this.props.user = {name: "Daniel", age : 32}
const {name, age} = this.props.user
alert(name + " " + age)

对象字面量

ES6允许我们用更少的代码表示对象键值对。

// ES5
str = "HELLO"
number = 20
obj = {
   str: str,
   number: number
}

在ES6中,上面的代码可以变为:

// ES6
str = "HELLO"
number = 20
obj = { str, number} //  obj = {str: "HELLO", number: 20}

类,构造器和方法

以前的JavaScript没有class这个关键字,为了创建一个简单的Dog类,需要使用构造函数来模拟这个类:

// ES5
function Dog(name, weight){
  this.name = name;
  this.weight = weight;
}

Dog.prototype.speak = function(){
    alert("Woof, woof … my name is: " + this.name);
};

// 用new关键字初始化对象
var dog = new Dog("Spike", 25);

// 调用方法
dog.speak(); // alerts “Woof, woof … my name is: Spike”

你可以通过ES5的构造函数得到一个基本的对象和该对象的方法,但是并没有得到”开箱即用”的类。那么看看ES6的class是怎么做的:

//ES6
class Dog {
   constructor(name, weight) {
      this.name = name
      this.weight = weight
   }
   speak() {
     alert("Woof, woof … my name is: " + this.name)
   }
}
const dog = new Dog("Spike", 25)
dog.speak()

类的继承和React

ES5中可以通过原型链继承的方式实现继承。但是在ES6中,可以通过关键字extends来实现类的继承:

var Greeting = createReactClass({
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
});

ES6 extends的使用可以使得继承意义更加明确:

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

并且值得一提的是,如果你使用extends来定义React的组件,那么可以在类的构造器里面,用简单的this.state =...的声明方式来替代getInitialState()方法。

Filter函数

比如我们有以下的数组:

const numbers = [5,1, 20, 90, 8, 22, 33, 9]

如果想通过上面的数组来创建一个新的数组,而里面的值都是大于10的。在ES5的语法下,你可能需要一个for循环,或者一些相似的操作(比如: jQuery的each())。

现在,我们有了ES6,就可以使用filter函数来遍历数组中的所有值,并且留下那些满足条件的值。

//ES6

const notDigits = numbers.filter( function(value) {return value > 9})
console.log(notDigits) // 打印出 [20,90,22,33]

// 或者使用箭头函数:
const notDigits1 = numbers.filter( (value) =>  {return value > 9}
// 或者使用箭头函数默认返回的形式去掉return关键字:
const notDigits2 = numbers.filter( (value) => value > 9 )

Map函数

Map函数可能是JavaScript最不被人重视的函数之一,即使它在ES5语法就有了。基本上,如果你需要遍历一个数组,你就可以使用map函数。

比如我们有跟上面例子一样的数组:

const numbers = [5,1, 20, 90, 8, 22, 33, 9]

如果想操作数组,就可以使用map函数:

numbers.map( (n) => console.log(n))
// 还可以加第二个参数, index
numbers.map( (n, index) => console.log(n + ' is the ' + index + ' value from the array ') )
// 或者我们想创建新的数组
const double= numbers.map( (n) => n*2 )

你将会在React中经常看到map(), 很多时候它会用来显示一个项目列表:

render() {
    return(
  this.props.items.map( (item, key) =>  <p key={key}>{item}</p>
  )
} 

以上就是我在写React代码中使用最多的ES6特性,可能会有一些偏颇以及带有主观性,但是我绝没有贬低ES6其他新功能实用性的想法。如前所述,还有许多其他ES6在这里没有涉及,但这些概念允许你轻松地从ES5 React升级到新的ES6语法,并了解来自React以及来自新ES6功能的内容。Cheers and happy coding!

原文链接:https://segmentfault.com/a/1190000015288439

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-34081.html

文章标题:给React初学者的10分钟ES6教程

相关文章
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
React.js编程思想
JavaScript框架层出不穷,在很多程序员看来,React.js是创建大型、快速的Web应用的最好方式。这一款由Facebook出品的JS框架,无论是在Facebook还是在Instagram中,它的表现都非常出色。 使用React.j...
2015-11-12
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
破解前端面试(80% 应聘者不及格系列):从 闭包说起
不起眼的开始 招聘前端工程师,尤其是中高级前端工程师,扎实的 JS 基础绝对是必要条件,基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候,我经常会提供下面这段代码,然后让候选人分析它实际运行的结...
2017-06-02
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
AJAX的浏览器支持
AJAX 的要点是 XMLHttpRequest 对象。 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。 IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 Jav...
2015-11-12
回到顶部