首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React中你必须掌握的 10个 JS 概念

前端时空

前端时空

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

前端网红集结号,传递一线全栈技术,带你穿越前端时空。

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

箭头函数

您可能知道,定义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 中使用它们将帮助您动态设置组件属性值或元素属性值。

查看完整文章请关注公众号 前端时空

喜欢我们的小伙伴点击在看、分享、评论哟

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20200320A0M6XL00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券