学习 React 之前先了解一下 JS 中的运算符和对象解构

什么是 React 和 JSX？

REACT是一个用于创建用户界面的开源 JavaScript库。它在 Web 开发者中广受欢迎，用于创建 Web 应用程序。此外，React 还可用于通过 React Native创建跨平台应用程序。

JSX是JavaScript 语法扩展的缩写。React 使用一种称为JavaScript XML（JSX）的特殊语法。HTML/XML 在代码编译之前会被转换为 JavaScript 。通过使用 JSX，你可以依赖 JavaScript 语法来实现逻辑。

为什么要先学习 JavaScript 再学习 React？

预先了解JavaScript概念有助于你顺利学习 React，避免任何障碍。学习 React 后，我​​得出结论：React 的核心就是 JavaScript。它涵盖了 JavaScript ES6 的特性和语法、三元运算符、语言的简写版本，以及 JavaScript内置函数（map、reduce、filter）以及诸如可组合性、可复用性或高阶函数等通用概念。

如果您熟悉一些 JavaScript 基础知识，那么 React 学习将会非常顺利，并且您可以更加专注于利用 React 本身的功能。

变量和运算符

变量

var、const和let是用于声明变量的关键字。让我们看看它们彼此之间有何不同，以及何时使用哪个？的
作用域var是声明变量的函数。和的作用域是声明变量的块。（块作用域是指循环、迭代内的代码）letconst

var没有被广泛使用，因为let和const更具体，使用分配的变量const是只读的，这意味着一旦使用初始化它们const，就不能重新分配它们。let当您想在将来重新分配变量时使用，例如在 for 循环中增加迭代器，const通常用于保持 JavaScript 变量不变。

运算符

JavaScript 运算符分为两类，即一元运算符（仅接受一个操作数）和二元运算符（接受两个操作数）。

1. 二元运算符：以下是不同类型的二元运算符：
   • 算术运算符（+、-、*、/+、−、∗、/）
   • 赋值运算符（=、+=、-=、*=）
   • 逻辑运算符（$&&、||、!$）
   • 比较运算符（<、>、==、!=<、>、==、!=）
   • 逗号运算符（，）：逗号运算符从左到右评估每个操作数并返回最右边操作数的值。
   • 位运算符（&、|、^）和条件运算符（? :?:）
2. 一元运算符：它只需要一个操作数并执行特定的运算。以下是一些一元运算符：
   • Increment Operators：++，--
   • typeof：返回给定操作数的类型
   • delete：删除对象、对象的属性或数组中的实例
   • void：指定表达式不返回任何内容

There is one special operator which takes three operands and perform as a conditional statement.

三元运算符/条件运算符
三元运算符接受三个操作数，并根据某些条件返回一个值。它是 if 语句的替代形式。它有多种用途，也用于 REACT！
语法：

condition ? expression_1 : expression_2;

如果条件为真，则返回expression_1，否则返回expression_2。

对象解构

对于 Web 开发者来说，经常需要从组件的state 或 props中访问大量的属性。对象解构使得从对象的属性创建变量变得容易，而不必将它们逐个赋值给变量。

JavaScript对象解构是一种语法，它可以从数组中提取值，或从对象中提取属性，并将它们分配给变量。

解构示例：

// no destructuring
const post = this.state.post;
const article = this.state.article;

// destructuring
const { post, article } = this.state;

解构也适用于JavaScript 数组。另一个很棒的特性是剩余解构。它通常用于拆分对象的一部分，但将剩余的属性保留在另一个对象中。
例如：

// rest destructuring
const { users, ...rest } = this.state;

在此处了解有关对象解构的 更多信息。

感谢阅读

希望这值得你花时间学习。我将会创建一系列学习 React 所需的 JavaScript 基础知识。

如果你愿意的话可以关注我:)。

github
LinkedIn
Twitter