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 呼叫中指定的。