React 初學者的 6 個重要 JavaScript 概念
作為最流行的前端庫，每個人都想學習 React。ReactJS 本質上是 JavaScript。但這並不意味著您必須學習 JavaScript 中的所有內容才能遷移到 ReactJS。了解基本的 JavaScript 概念將幫助您更輕鬆地掌握 React 概念，並最終提高您處理項目的能力。
讓我們概述在轉向 ReactJS 之前你應該了解的關於 JavaScript 的基本概念。
1. 箭頭函數
箭頭函數在 React 中被廣泛使用。從 16.8 版開始，React 從基於類的組件轉移到函數式組件。箭頭函數允許您使用更短的語法創建函數。
讓我們在以下示例中說明這一點：
常規功能
function greeting() {
return 'hello'
}
console.log(greeting()) //hello
箭頭函數
let greeting = () => 'hello'
console.log(greeting()) //hello
上面的兩個函數具有相同的輸出，儘管語法不同。箭頭函數看起來比常規函數更短、更清晰。通常，React 組件具有以下結構：
import React from 'react'
const Book = () => {
return (
<div>Book</div>
)
}
export default Book
箭頭函數沒有名字。如果您想命名它，請將其分配給一個變量。常規函數和箭頭函數之間的區別不僅僅是語法。在Mozilla開發人員文檔中了解有關箭頭功能的更多信息。
2.解構
解構用於從復雜的數據結構中獲取數據。在 JavaScript 中，數組和對象可以存儲很多值。您可以操縱這些值並在應用程序的不同部分使用它們。
要獲得這些值，您必須解構變量。根據您處理的數據結構，您可以使用點 (.) 表示法或括號表示法。例如：
const student = {
'name': 'Mary',
'address': 'South Park, Bethlehem',
'age': 15
}
解構：
console.log(student.name) // output Mary
在上面的示例中，點符號訪問鍵“name”的值。在 ReactJS 中，您將使用解構概念來獲取和共享應用程序中的值。解構有助於避免重複並使您的代碼更具可讀性。
3.數組方法
在處理 React 項目時，你會多次遇到數組。數組是數據的集合。您將數據存儲在數組中，以便在需要時可以重用它們。
數組方法主要用於操作、檢索和顯示數據。一些常用的數組方法是map()、filter()和reduce()。您必須熟悉數組方法才能了解何時應用每個方法。
例如，map()方法迭代數組中的所有項。它作用於數組的每個元素以創建一個新數組。
const numbers = [9, 16, 25, 36];
const squaredArr = numbers.map(Math.sqrt) // 3,4,5,6
你會在 ReactJS 中大量使用數組方法。您將使用它們將數組轉換為字符串、連接、添加項目以及從其他數組中刪除項目。
4. 簡短的條件
條件語句是 JavaScript 用來在代碼中做出決定的語句。短條件包括 &&（和）、II（或）和三元運算符。這些是較短的條件表達式和 if/else 語句。
以下示例顯示如何使用三元運算符。
帶有 if/else 語句的代碼：
function openingTime(day) {
if (day == SUNDAY) {
return 12;
}
else {
return 9;
}
}
三元運算符的代碼：
function openingTime(day) {
return day == SUNDAY? 12: 9;
}
了解不同類型的條件，特別關注短條件。這些在 React 中被廣泛使用。
5. 模板字面量
模板文字使用反引號 (“) 來定義字符串。模板文字允許您操作字符串數據，使它們更加動態。標記的模板文字允許您在字符串中執行操作。這些是較短的條件表達式和 if/else 語句。
例如：
let firstName = "Jane";
let lastName = "Doe";
let text = `Welcome ${firstName}, ${lastName}!`; // Welcome Jane Doe!
6. 傳播運營商
Spread 運算符 (…) 將一個對像或數組的值複製到另一個對像或數組中。它的語法由三個點組成，後跟變量名。例如（…姓名）。它合併了兩個數組或對象的屬性。
以下示例說明如何使用擴展運算符將一個變量的值複製到另一個變量。
const names = ['Mary', 'Jane'];
const groupMembers = ['Fred',. ..names, 'Angela']; // ["Fred", "Mary", "Jane", "Angela"]
您可以使用擴展運算符執行許多操作。這些包括複製數組的內容、將一個數組插入另一個數組、訪問嵌套數組以及將數組作為參數傳遞。你可以在 ReactJS 中使用展開運算符來處理組件中的狀態變化。
為什麼要學習 ReactJS？
ReactJS 流行是有充分理由的。它的學習曲線短、可靠，並且可以快速呈現到 DOM。它支持獨立組件並具有出色的調試工具。
ReactJS 合併了來自 ECMAScript 6 (ES6) 的新 JavaScript 概念。學習 JavaScript 中的基本概念將使在 ReactJS 中開發項目變得更加容易。
最重要的是，ReactJS 有一個很棒的社區，不斷發布新的更新。如果你想學習 JavaScript 庫，ReactJS 是一個不錯的選擇。Next.js 框架補充了 ReactJS 的局限性。兩者的結合使 ReactJS 成為一個強大的前端庫。
發佈留言