【译】React 中你会这 10 个 JavaScript 概念吗？

公众号「前端时空」每日一题活动

回复「1」看面试题 | 回复「2」看答案

前端时空-前端老王（翻译整理）

语雀： www.yuque.com/fest/artice…

都 2020 年了，再不掌握 ES6，说不定就被优化了。

目录

1. 箭头函数
2. 默认参数
3. 模板字符串
4. let 和 const
5. 类
6. 解构
7. 三元运算符
8. 导入/导出模块
9. async / awite
10. 展开运算符 / 不定参数

箭头函数

您可能知道，定义React组件的最简单方法是编写 JavaScript 函数，如如下示例所示。

可是还有另外一种更加简洁的方法来建立 React 函数组件。

「箭头函数」是您在 JavaScript 和 React 应用程序中最常见的函数。

在深刻探讨如何在 React 中使用它们以前，让咱们看看如何使用箭头函数。有多种方式可用于编写箭头函数。咱们将在这里介绍一些常见的内容，以帮助您入门。

介绍了基本语法，让咱们了解如何将箭头函数与 React 一块儿使用。除了如上所述定义 React 组件以外，箭头函数在操做数组以及使用异步回调和 Promise 时也很是有用。

在 React 中，咱们一般必须从服务器获取数据并将其显示给咱们的用户。为了检索此数据，咱们常用 Promise 链式调用。

Promise 链式调用获得简化，易于阅读，而且使用箭头函数更加简洁：

最后，一旦检索到数据，就须要显示它。为了在 React 中渲染数据列表，咱们必须在JSX内部循环。一般使用map / reduce / filter数组方法来实现。

如今，让咱们看看如何使用 ES6 箭头函数实现相同的函数。

默认参数

既然咱们已经了解了箭头函数，那么让咱们来谈谈默认参数。ES6+ 的这一功能使它可以使用默认值初始化函数，即便函数调用不包含相应的参数也是如此。

可是首先，您还记得咱们在 ES6 以前使用过的方法来检查函数中未声明的参数吗？您可能已经看过或使用过如下内容：

为了防止函数崩溃或计算无效 / 错误结果，咱们必须编写额外的代码来测试每一个可选参数和分配的默认值。确实，此技术用于避免咱们的函数内部发生不良影响。没有它，任何未初始化的参数将默认为值 undefined。

所以，这是咱们在ES6以前如何处理默认参数的简短摘要。在 ES6 中定义默认参数要容易得多。

若是将 offset，limit 和 orderBy 传递给函数调用，则它们的值将覆盖函数定义中定义为默认参数的值。无需额外的代码。

⚠️请注意，这 null 被视为有效值。这意味着，若是 null 为其中一个参数传递值，则不会采用该函数定义的默认值。所以，请确保使用 undefined而不是 null 当您但愿使用默认值时使用。

如今，您知道如何在 ES6 中使用默认参数。那么默认参数和 React 呢？

在 React 中，您可使用 defaultProps 属性为组件属性设置默认值。可是，这仅适用于类组件。实际上，React 团队正在弃用 defaultProps 功能组件上的属性，而且将其删除。

别担忧！咱们能够利用默认参数为 React 函数组件的 prop 设置默认值。请查看如下示例。

模板字符串

模板字符串是容许嵌入 JavaScript 表达式的字符串。换句话说，就是在字符串中输出变量 / 表达式的一种方式。

在ES5中，咱们必须使用 + 运算符将多个值链接起来以链接字符串。

在 ES6 中，模板字符串由反引号引发来。要在这些模板中插入表达式，咱们可使用${表达式}。

模板字符串使这种替换更具可读性。在 React 中使用它们将帮助您动态设置组件属性值或元素属性值。

let 和 const

在 ES5 中，声明变量的惟一方法是使用 var 关键字。ES6 引入了两种使用 const 和 let。

主要区别：

var   

1. 函数做用域  

2. 在声明变量以前访问变量时 undefined

let   

1. 块做用域   

2. 在声明以前访问变量时 ReferenceError

const  

1. 块做用域  

2. 在声明以前访问变量时，ReferenceError

3. 没法从新分配

4. 声明时应初始化

在 React 应用程序中，const 用于声明 React 组件。

最佳实践是默认使用 const,只在确实须要改变变量的值时使用 let。

类

ES6 引入了 JavaScript 类。如 MDN 网站文档所述，类主要是语法糖，而不是 JavaScript 现有的基于原型的继承。有些属性值得一提，由于它们与使用常规函数编写的类不太相同。

继承,这不是特定于 JavaScript 的东西，而是面向对象编程中的常见概念。

简而言之，这是将一个类建立为另外一个类的子级的能力。子类将从其父类的属性继承（实际上，这比您所使用的 OOP 语言要复杂得多）。

在 ES6 中，extends 关键字继承另外一个的类。

在 React 应用程序中，您还可使用 ES6 类来定义组件。要定义一个 React 组件类，您须要扩展 React.Component 基类，以下所示：

经过建立这样的组件，您将能够访问与 React 组件相关的一堆方法和属性（状态，属性，生命周期方法等）。请查看 React 文档以获取 React.Component 类的详细 API 参考。

解构

在 React 中很是常用解构。这是一个能够与对象以及数组一块儿使用的概念。分解是简化 JavaScript 代码的一种简便方法，由于它使咱们能够在一行中将数据从对象或数组中拉出。

数组解构与对象解构类似，不一样之处在于咱们按照数据在数组中出现的顺序将数据一一拉出。

让咱们直接来看看它在 React 应用程序中的用法。

三元运算符

三元运算符用做 if 语句的简洁方式。典型 if 语句的语法以下：

条件为真，执行第一条语句（在冒号以前:）。条件为假（false，null，NaN，0，""或未定义），执行第二条语句（在冒号以后:）。

虽然有时候代码会很简洁，可是可读性会下降，因此请谨慎使用。

在 React 中，三元运算符使咱们能够在 JSX 中编写更简洁的条件语句。一般使用它来根据条件决定显示或隐藏哪一个组件。

导入 / 导出模块

在 ES6 以前，因为 JavaScript 不支持模块，咱们使用了 RequiredJS 或 CommonJS 之类的库来导入 / 导出模块。您可能以前已经看过，特别是若是您已经使用过 Node.js。

在 ES6 中，咱们能够直接使用 exportand import 语句来处理应用程序中的模块。

这在 React 中很是有用，由于咱们正在将应用程序 UI 划分为组件层次结构。组件在本身的文件中定义，其余组件则须要导入或者导出，例如如下示例：

async / await

您可能熟悉异步编程的概念。在 JavaScript 中，它们是使用异步代码的许多方法（回调，Promise，诸如 bluebird 和 deferred.js 等外部库）。在这里，咱们只是简单的说起 async / await。

async / await 是一种特殊的语法，能够以更温馨的方式处理 Promise。

若是您须要了解 Promise，请查看 MDN 中的详细讲解。

您可能已经注意到，有两个新关键字：async 和 await。

让咱们首先从 async 关键字开始。异步用于定义异步函数，该函数返回隐式 Promise 做为其结果。

请注意，使用异步函数的代码的语法和结构看起来像常规同步函数。

关键字 awai t仅在异步函数中起做用。它使程序等待，直到 Promise 成功并返回其结果。这是一个 Promise 在几秒钟后 resolve 的示例：

与使用相比 Promise.then()，这是得到 Promise resolve 的一种更为优雅的方法，此外，它更易于读写。

⚠️请当心，由于 await 不能在常规函数中使用。若是这样作，则会出现语法错误。

值得一提的是 async / await 是如何处理错误。实际上，若是一个 Promise 可以正常 resolve，它就会返回结果。可是，若是 reject，则会引起错误。您可使用 Promise catch 方法或 try..catch 与常规抛出相同的方式来处理错误。

我将 async / await 包含在此列表中是由于在每一个前端项目中，咱们正在作不少须要异步代码的工做。一个常见的例子是当咱们想经过 API 调用获取数据时。

在 React 中，这就是咱们可使用 promises + async / await 作到的。

展开运算符 / 不定参数

展开运算符和不定参数由三个点表示...。在展开运算符的状况下，它将可迭代扩展为单个元素。对于不定参数，它将其他参数列表收集到一个数组中。

让咱们看一些示例，以了解它们如何工做以及如何使用它们。

展开运算符在 Redux 之类的库中获得了普遍使用，以不变的方式处理应用程序状态。可是，这也常与 React 一块儿使用，以轻松传递全部对象的数据做为单独的属性。这比逐个传递每一个属性要容易。

若是您之前据说过 HOC（高阶组件），则知道您须要将全部属性传递给封装的组件。展开运算符可以为此提供帮助。

文末彩蛋：附上一则招聘信息

关于咱们

1. 工做团队：腾讯云中间件产品中心
2. 工做地点：深圳腾讯大厦
3. 服务业务：腾讯云Serverless平台（SCF）、微服务平台（TSF）、API网关等

工做要求

1. 本科及以上学历，计算机相关专业；2年以上的相关工做经验，能独立完成模块开发和单元测试；
2. 可以熟练运用 HTML五、CSS三、javascript构建高性能的web应用程序,熟悉ES6语法；
3. 熟悉React框架,并有项目经验，或有Vue经验能够接受转React；
4. 有Node.js实践经验；
5. 熟悉前端工程化与模块化开发，掌握webpack；
6. 悉网络协议，熟悉常见安全问题和对策，对Web性能和安全有必定的了解；
7. 工做踏实认真、仔细、责任心强，具有良好的学习能力、自我管理能力、有良好的编码习惯；

联系方式

wescai@tencent.com

                                                          往期精彩文章

                                                    前端响应式你了解多少？

                                 理想主义团队的开源做品之Chameleon跨端框架

                                         一分钟理解 JavaScript 发布订阅模式

                                                      前端首屏耗时测量方法

                                                  大消息，Github 收购 NPM

                                          一道面试题引起关于 js 隐式转换的思考

                                                         喜欢咱们的小伙伴

                                     能够点赞、分享、评论，关注咱们的公众号。