随着前端发展越来越快，JavaScript 这门语言也在不断的更新，从2015年开始，几乎每年都有一个新版本。新语言借鉴了类似 C#,Java 这些高级语言的特征，大大方便了我们编写和维护代码。因此我们需要尽快熟悉这些新特性，把它们应用到我们的项目中。如果你的项目中在使用 React 框架，恭喜你，你现在就可以在你的项目中运用ES6的新特性。如何在项目中，恰当的运用ES6这些新特性，这也是本篇文章要给大家介绍的。

React简介

关于 React 大家肯定不陌生吧，目前是三大主流前端框架之一，发展迅速。其背后是 出自Facebook 这样世界级公司的杰作。我们可以用此框架创建功能丰富的交互站点。其最大的特点方便我们动态创建可重用的组件，并且其应用领域十分广泛，比如在客户端、服务端、移动端甚至可以创建 VR 应用。

目前主流的应用站点，为了构建丰富的交互，我们需要不断的操作网页中的DOM元素。随着操作越来越多，就会严重影响站点应用的性能，为了解决这个问题，React 引入了虚拟DOM（DOM directly） 这项技术，将这些操作变化放到内存中进行运算，有结果了在一次性返回进行 DOM 的渲染，由于是在内存里操作，因此比传统的DOM速度更快。

相比其它 JavaScript 框架（如Angular，Vue 或 Backbone），React的学习曲线很平缓，在比较短的时间就能入门，并且其可以使用现代的 ES6 语法进行编写，并且不需要学习太多的设计模式，比如依赖注入或模板系统这些概念（例如 Angular），这样就大大降低了学习的难度。

目前除了Facebook，还有哪些世界级的公司在使用呢？Airbnb，微软，Netflix，迪士尼，Dropbox，Twitter，PayPal，Salesforce，特斯拉和优步等公司都在积极使用，在这系列文章里，笔者将给大家分享，如何用这些大公司的最佳实践来构建 React 应用程序。

在React项目中，运用 ES6+ 的新特征

在 React 的简介中，我介绍过了，React 项目中我们可以使用 JavaScript 的最新语法（ES6，ES7和ES8）。如果你想掌握和运用Reat, 你应该掌握这些新语法，这样你才构建更好的React项目。接下来，我将和大家分享，在 React 项目中运用ES6+，你至少需要掌握的一些最基本的语法和概念。

let 和 const 的用法

1、在ES6中，官方推荐使用 let 和 const 声明变量，你可以使用let声明块级的作用域，使用 const 来定义常量。let 和 var 的区别，除了块级作用域，还有一个更重要的就是 let 不能声明全局变量，但是 var 却可以, 为了防止意外，我们应该在 React项目中避免使用 var。关于全局变量的理解，我们可以看下面这个例子：

2、关于块级作用域的理解，我们可以通过一个循环的例子进行理解，我们分别用 var 和 let 声明变量，首先我们来看用 var 声明变量的例子，示例如下：

3、如果使用同样的方法，我们用 let 替换 var, 将会发生什么呢？示例如下：

4、我们可以使用 const 定义常量，常量的意思就是不可以改变其值，示例如下：

5、如果我们使用 const 的方式声明数组，但是我们可以对数组进行操作，进行添加、修改、删除，示例如下：

6、我们可以使用 const 用法，声明对象，然后对其进行添加、修改、删除，示例如下：

关于 let 和 const 的详细用法，笔者以前的文章有过详细介绍，欢迎大家点击这两篇文章进行详细了解：

展开语法（Spread syntax）

1、展开语法用"..."进行表示，展开语法将可迭代的对象拆分成独立的值（语法层面展开）。在 React 项目中，我们可以将一个值很容易的添加到另外一个数组中，类似push方法，例如我们有一个待办事项的列表，我们需要添加一个新的待办事项，我们需要调用 setState 方法来添加新的待办事项内容，我们可以这样这么使用：

2、此外我们可以在 JSX 中使用展开语法（props应用）：

3、我们还可以使用展开语法表示剩余参数，比如一个函数需要传入过多不确认的参数，我们可以筛选出除了给定的固定参数之外的剩余参数，示例如下：

关于展开语法的特性，笔者以前的文章有过介绍，欢迎大家点击这篇文章进行详细了解：

解构赋值（destructuring assignment）

解构赋值是一种表达式，允许您使用数组或对象，将可迭代对象的值或属性分配给变量。解构赋值能让我们用更简短的语法进行赋值，大大的减少了代码量，快速的给多个变量进行赋值。解构表达式有两种：array和object。接下来我们来看看结构赋值是如何在我们的React项目中运用的，我们可以将组件的属性分配给变量，示例代码如下：

关于解构赋值，笔者以前的文章有过详细介绍，感兴趣的同学可以点击这篇文章进行了解：

箭头函数（Arrow functions）

ES6中，除了let和const新特性，箭头函数是使用频率最高的新特性了。如果你曾经了解如日中天的JavaScript衍生语言CoffeeScript, 就会清楚此特性并非ES6独创。箭头函数顾名思义是使用箭头（=>）定义的函数，属于匿名函数一类。在 React 中的运用也十分频繁，主要利用了箭头函数this穿透性，this指向上一层的作用域中，示例代码如下：

关于箭头函数，笔者以前的文章有过详细介绍，感兴趣的同学可以点击这篇文章进行了解：

模板字符串（Template String）

模板字符串是ES6中非常重要的一个新特性，这个特性使得我们处理相关业务变得更加容易。比如在处理嵌入表达式、多行字符串、字符串中插入变量、字符串格式化等方面的应用。模板字符串使用反钩号（backticks,`），而不是单引号或双引号。在 React 中我们使用这个特性也比较频繁，比如用在 render 方法渲染的场景中，示例如下：

关于模板字符串，笔者以前的文章有过详细介绍，感兴趣的同学可以点击这篇文章进行了解

Map 函数

map() 函数允许我们在数组内按照给定的函数逻辑，进行循环迭代每个元素组成一个新的数组。正式由于这个新的特性，大大的减少了我们的代码量，其在 React 中的场景比较多，如下面示例，我们使用在 render() 方法中加载一个待办事项数组列表，示例如下：

Object.assign()

Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。它至少需要两个对象作为参数，第一个参数是目标对象，后面的参数都是源对象。这个方法主要在 React 中的 Redux 场景中进行运用，每次创建一个Immutable对象，将新的 state 返回给 Reducer。（在后续的文章里将会介绍到 Redux）

关于Object.assign()的用法，笔者以前的文章有过详细介绍，感兴趣的同学可以点击这篇文章进行了解

Class 类

ES6一大亮点，终于把类机制引入了，我们可以摆脱原型链，用类似JAVA那些高级语言一样，愉快的进行面向对象了。虽然说是类，其实 Class 背后实际还是个函数类型但是不存在提升的问题。下面我们来看看，在 React 中我们如何使用类声明一个类组件。

静态方法（Static methods）

静态方法，允许我们不用实例化类就能直接调用，我们通常用来做工具类的函数，方便我们在项目中进行调用。在 React 中我们可以用来在组件里定义 PropTypes 属性类型规则验证，示例如下：

Promise 承诺

使用 Promise 我们终于可以摆脱以前丑陋的嵌套回调语法了，我们可以用写同步代码的习惯实现异步相关的功能。在React中我们经常使用 axios 或 fetch 这些封装好的API 处理请求，但是在服务端渲染方面，会经常用到原生的Promise，在后续的文章里，笔者会有介绍。

关于 Promise 的用法，笔者以前的文章有过详细介绍，感兴趣的同学可以点击这篇文章进行了解

async / await

async/await 是基于 Promise 的，相比 Promise 而言能更加优雅的书写异步回调函数，接下来我们来看一个例子，在 React 中使用 axios 进行请求，示例如下：

关于 async / await 的用法，笔者以前的文章有过详细介绍，感兴趣的同学可以点击这篇文章进行了解

本文主要参考《 React Cookbook 》一书，为笔者读后整理的笔记，并非完全翻译，加有笔者自己的理解部分，如有问题，欢迎留言指正，谢谢大家。

小节

今天的文章就介绍到这里，在接下来的系列文章里，笔者将给大家介绍，React 新版本中有哪些你值得关注的新特性，敬请期待。

React Redux Admin 后台源码

A react-redux powered single page admin dashboard. Used progressive web application pattern, highly optimized for your next react application.

注：有效期三天，需要要抓紧哦！

关注公众号，回复 “ react ” 免费获取