React 中三个点的目的

1. JavaScript EcmaScript6
2. React 中的三点 ... 运算符
3. React 中的 Rest 参数
4. 在 React 中使用 Spread 运算符来引用数组的所有元素
5. 在 React 中使用 ... 组合数组
6. 在 React 中使用 ... 运算符解压缩 Props 对象的属性名称和值
7. 使用 setState() 方法更新 React 中类组件的状态

如今，React 是构建现代 Web 应用程序的最流行的框架。React 环境包括编译器、转译器和允许你以声明方式编写可重用组件的类似工具。

即使在正式引入该语言之前，相同的工具也允许 React 开发人员使用 JavaScript 的现代特性和语法。

JavaScript EcmaScript6

2015 年，Web 开发人员首次接触到新的主要 JavaScript 修订版，称为 EcmaScript6，简称 ES6。

它引入了许多有用的方法、用于编写函数的新的和改进的语法、新的变量类型以及许多其他很酷的特性。

就目前而言，ES6 是现代 JavaScript，并且大多数 Web 开发人员都应该精通它。

我们可以自信地说 ES6 不是 JavaScript 的最终版本，更多的变化是可以预料的。

我们可以肯定地说，基于当前趋势，JavaScript 会变得更简单。一些运算符和语法将消失，而新的运算符和语法将取而代之。

曾经复杂的表达式，例如解构，将变得简单得多。JavaScript 很可能会继续朝着这个方向发展。

React 中的三点 ... 运算符

ellipsis 运算符的引入是 ES6 最大的、改变游戏规则的特性之一。

三点语法用于多种用途，并且根据使用方式和使用地点的不同而表现不同。

React 中的 Rest 参数

当在带有参数之一的函数中使用时，JavaScript 省略号可以指示该函数将接受无限数量的参数。

让我们看一个例子：

function addition(x, y, ...arguments) {
 sum(x,y); // 15
 sum(arguments); // 20
};
addition(5,10,2,3,7,8)

在这种情况下，参数的顺序受到尊重：5 被接受为 x 参数，10 被接受为 y 参数。

其余的都集中在 arguments 变量中，因为其余运算符在它之前。

在 React 中使用 Spread 运算符来引用数组的所有元素

React 中的三个点也可以表示一个 spread 运算符。开发人员使用它来引用数组的所有元素，将它们作为参数传递给函数，如下例所示：

export default function App() {
  const numbers = [5,10,2,3,7,8]
  console.log(...numbers)
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

numbers 数组中的所有项目将作为单独的参数传递给此 React 组件中的 console.log()。

在上面的例子中，对函数的调用等价于 console.log(5,10,2,3,7,8)。你可以查看 CodeSandBox 上的示例。

在 React 中使用 ... 组合数组

在 JavaScript 中有多种组合数组的方法，使用 spread 运算符。它可能是最容易书写和阅读的。

const yellowFruits = ["peach", "banana", "lemon"]
const greenFruits = ["apple", "kiwi", "lime"]
const fruits = [...yellowFruits, ...greenFruits]
console.log(fruits) // ["peach", "banana", "lemon", "apple", "kiwi", "lime"]

如你所见，spread 运算符组合了两个数组。没有它，两个数组将合并为一个，但 fruits 数组将由两个单独的数组组成。

不是其中的单个数组项。让我们看一个例子：

const yellowFruits = ["peach", "banana", "lemon"]
const greenFruits = ["apple", "kiwi", "lime"]
const fruits = [yellowFruits, greenFruits]
console.log(fruits) // [["peach", "banana", "lemon"], ["apple", "kiwi", "lime"]]

在 React 中使用 ... 运算符解压缩 Props 对象的属性名称和值

最新的 JavaScript 更新 ES2018 引入了 ... 运算符的新用途。它允许你从对象中获取每个键值对。

大多数情况下，React 开发人员使用它来解包 props 对象的属性和值，该对象用于手动将数据从父组件传递给子组件。

例如，假设我们有一个 Container 组件，它从其父组件接收 props 并希望将其传递给它自己的子 CustomText 组件。

你可以使用属性 spread 运算符来解压缩 props 对象的属性名称和值。让我们看一下代码：

 export default function Container(props) {
   return (
     <div className="general">
       <CustomText {...props}></CustomText>
     </div>
   );
 }

让我们想象一下 props 对象看起来像这样：

{
    size: 15,
    font: "Calibri",
    color: "yellow"
}

在这种情况下，使用属性 spread 运算符 ... 将为子组件分配以下属性：

export default function Container(props) {
  return (
    <div className="general">
      <CustomText size={this.props.size} font={this.props.font} color={this.props.color}></CustomText>
    </div>
  );
}

如果 props 对象有 10 个属性，则所有 10 个属性都将添加到 CustomText 组件中。

使用 setState() 方法更新 React 中类组件的状态

为了在 React 中更新类组件的状态，我们使用 setState() 方法。但是，你不能直接更新状态属性的值。

相反，你必须传递整个状态和具有更新值的特定属性。让我们看一个 setState() 方法调用的示例：

this.setState(previousState => {textStyles: {...previousState.textStyles, size:20}})

在这种情况下，我们使用属性 spread 运算符的默认行为来轻松复制所有属性及其先前状态的值。

如果之前的状态已经有 size 属性，新的状态不会包含它两次。size 属性的值将是 20，因为它是在最近的 setState 调用中指定的。