React 是一個流行的 Javascript 函式庫，用於建立現實世界的應用程式。要成為熟練的 React 開發人員，了解一些基本的 Javascript 概念非常重要。對許多人來說，學習 React 似乎很困難，但理解這些基本概念可以簡化學習過程。
在本文中，我將介紹每位開發人員在開始 React 之前應該了解的 15 個基本概念。每個概念都透過範例進行解釋，以顯示其重要性。
如果您剛開始使用 React 或即將探索該程式庫，那麼這篇文章適合您。
1.回呼函數
函數是任何程式的建構塊，允許多次呼叫程式碼而無需重複。
一種類型的函數是回調函數。
如果您希望使用者在顯示任何資訊之前點擊瀏覽器中的箭頭，或者希望在從 API 取得資料後立即執行某些程式碼，您可以利用回調的功能。
回調函數在函數或事件發生後執行其任務，並允許控制函數的執行。
它是一個作為參數傳遞給另一個函數的函數，用於指定非同步操作或事件完成後應該發生的情況。
// The callback function
function showText() {
console.log('The written text should show after 2 seconds.');
}
function showAfterDelay(callback, delay) {
setTimeout(callback, delay);
}
showAfterDelay(showText, 2000);
2.箭頭函數
ES6 中引入了箭頭函數，可以讓函數語法寫得更簡潔。箭頭函數因其簡潔而在React中被廣泛使用。
const showText = () => {
console.log('This written text should show after 2 seconds.');
};
const showAfterDelay = (callback, delay) => {
setTimeout(callback, delay);
};
showAfterDelay(showText, 2000);
3.Array.Map() 方法
在 React 中通常不鼓勵更改現有數組，因為這可能會導致不必要的錯誤和效能問題。因此，開發人員採用數組方法。函數式數組方法不會改變原始數組，而是從現有數組傳回一個新數組。
函數式陣列方法之一是 Array.map() 方法。
Array.map() 方法循環遍歷現有陣列並傳回具有相同長度的新陣列。可以對新數組進行更改，而不會對現有數組產生任何影響。
Const BookNumbers = [1,2,3,4]; Const DoubleNumbers = BookNumbers.map((book)=> book *2); Console.log(DoubleNumbers); //Output BookNumbers= [2,4,6,8]
4.Array.Filter() 方法
Array.filter() 方法以有趣且合乎邏輯的方式運作。這些方法可用於根據 true 或 false 條件過濾掉數組中的某些元素。
當一條語句為假時，它會自動被過濾掉；當它為真時，它會保留它，使其成為從陣列中刪除不需要的元素的合適方法。
// The callback function
function showText() {
console.log('The written text should show after 2 seconds.');
}
function showAfterDelay(callback, delay) {
setTimeout(callback, delay);
}
showAfterDelay(showText, 2000);
5.Array.reduce() 方法
顧名思義，array.reduce() 方法將整個陣列減少為單一值。這是對數組元素求和或分組的最佳方法之一。
const showText = () => {
console.log('This written text should show after 2 seconds.');
};
const showAfterDelay = (callback, delay) => {
setTimeout(callback, delay);
};
showAfterDelay(showText, 2000);
6.範本文字
範本文字允許字串包含Javascript變數或任何JavaScript表達式。
它提供了一種在 JavaScript 中使用反引號和帶有大括號 ${}.
Const BookNumbers = [1,2,3,4]; Const DoubleNumbers = BookNumbers.map((book)=> book *2); Console.log(DoubleNumbers); //Output BookNumbers= [2,4,6,8]
7.三元運算子
三元運算子是條件運算符，提供了一個簡單而簡潔的方式來寫 if..else 語句。
React 不直接支援 if..else 語句，因為它不適合 React 中存在的名為 JSX 的語法表達式。
JSX 是 JavaScript 的語法擴展，允許將 Javascript、CSS 和 React 元件嵌入到 HTML 中。
React 語法更多地被認為是一個表達式而不是一個語句，並且三元作為它合適的運算符。
Const BookNumbers = [1,2,3,4]; Const FilteredNumbers = BookNumbers.filter((book) => book % 2 !== 0 ); Console.log(FilteredNumbers); // Output 1,3
8.短路和邏輯運算子
邏輯運算子用於將多個條件組合成一個表達式。 JavaScript 中存在的主要邏輯運算子有：
短路是邏輯運算子中發生的一種行為，在特定條件下，不會計算第二個操作數，因為整個表達式的結果只能由第一個運算元決定。
和（&&）
或 (||)
// The callback function
function showText() {
console.log('The written text should show after 2 seconds.');
}
function showAfterDelay(callback, delay) {
setTimeout(callback, delay);
}
showAfterDelay(showText, 2000);
9.RestSpread 運算子
在實例中，當您想要為現有陣列新增屬性或合併一組現有陣列時，擴充運算子是首選運算子。
擴充運算子 (...) 由 3 個點表示，將陣列擴展為單一元素，並在陣列的開頭使用。它用於：
const showText = () => {
console.log('This written text should show after 2 seconds.');
};
const showAfterDelay = (callback, delay) => {
setTimeout(callback, delay);
};
showAfterDelay(showText, 2000);
Const BookNumbers = [1,2,3,4]; Const DoubleNumbers = BookNumbers.map((book)=> book *2); Console.log(DoubleNumbers); //Output BookNumbers= [2,4,6,8]
Const BookNumbers = [1,2,3,4]; Const FilteredNumbers = BookNumbers.filter((book) => book % 2 !== 0 ); Console.log(FilteredNumbers); // Output 1,3
const BookNumbers = [1, 2, 3, 4]; const NumberSum = BookNumbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); console.log(sum); // Output: 15
剩餘運算子(...) 也用 3 個點表示，但寫在陣列的最後。它用於從解構物件/陣列中收集多個屬性。
Const NameValue = "Ade";
const NumValue = 5;
const TempLit= `I am ${NameValue}, a ${NumValue} year old girl `
10.選購鏈
可選連結以簡單的方式處理 null 或未定義的值。它用於存取鏈中看似為空或未定義的屬性或任何中間屬性。它將自動被短路並呈現為未定義。理想情況下，如果沒有可選鏈，它會回傳錯誤。
在某些情況下，您不確定物件中是否存在所有值，請考慮使用可選鏈接，因為它是一種提供空值和未定義值檢查的語法。
const BookNumbers = 4; const result = (BookNumbers % 2 === 0) ? "Even" : "Odd"; console.log(result); // Output: "Even"
11.解構數組
當必須從數組同時呼叫多個屬性時，程式碼可能會變得很麻煩。透過解構，可以防止這種情況。
解構允許將數組中的值組裝成不同的變數。
解構可用於
在開始 React 之前不應該忽略的一個基本概念是解構。
const idVerify = true; const displayMessage = idVerify && "Identified"; console.log(displayMessage); // Output: "Identified"
12.使用不可變數組
陣列可以在 JavaScript 中發生變化，這意味著可以在陣列中新增、刪除或更新屬性。
然而，在 React 中，不變性通常是首選，以保持狀態完整性並確保 React 可以偵測到變更。要在 React 中使用不可變數組，通常使用映射、過濾器和展開運算子等方法來新增、刪除和更新數組中的項目，而無需更改原始數組。
// The callback function
function showText() {
console.log('The written text should show after 2 seconds.');
}
function showAfterDelay(callback, delay) {
setTimeout(callback, delay);
}
showAfterDelay(showText, 2000);
const showText = () => {
console.log('This written text should show after 2 seconds.');
};
const showAfterDelay = (callback, delay) => {
setTimeout(callback, delay);
};
showAfterDelay(showText, 2000);
Const BookNumbers = [1,2,3,4]; Const DoubleNumbers = BookNumbers.map((book)=> book *2); Console.log(DoubleNumbers); //Output BookNumbers= [2,4,6,8]
13.非同步/等待函數
非同步 JavaScript 控制需要時間才能完成的任務的執行方式。 JavaScript 是一種同步語言，即在單一執行緒中一個接一個地執行程式碼。
在從資料庫取得資料的情況下，在取得完成之前可能需要載入一些程式碼。
透過非同步功能，無需等待操作完成即可執行程式碼，從而提高使用者體驗和整體效能。
在 React 中，您將經常使用應用程式介面 (API)，因此，深入了解此功能的工作原理非常重要。
Const BookNumbers = [1,2,3,4]; Const FilteredNumbers = BookNumbers.filter((book) => book % 2 !== 0 ); Console.log(FilteredNumbers); // Output 1,3
14.承諾
Promises 是指表示非同步操作最終完成或失敗的內建物件。
Promise 存在於以下三種狀態之一：
Promise 在 JavaScript 中扮演著重要的角色，這使得它成為一個需要學習的重要概念。它使您能夠編寫更清晰的程式碼、系統地處理錯誤並提高整體效能。
15.使用 try.catch.finally 處理錯誤
有時在資料取得過程中會彈出錯誤，讓您思考如何尋找或修復這些錯誤。
透過使用關鍵字，可以以更結構化的方式處理資料擷取。
Try..catch..finally 區塊是 JavaScript 中強大的錯誤處理結構，無論是否發生錯誤，它都可以成功處理潛在錯誤並執行特定程式碼。
查找程式碼中的某些錯誤可能會很耗時。透過利用這些塊，事情變得很容易。
const BookNumbers = [1, 2, 3, 4]; const NumberSum = BookNumbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); console.log(sum); // Output: 15
深入了解上面解釋的基本 JavaScript 概念將簡化學習過程，並引導您成為熟練的 React 開發人員。如果您還沒有學習這些概念，請努力學習。歡迎在留言區分享你的建議！
以上是開始 React 之前需要學習的基本 JavaScript 概念的詳細內容。更多資訊請關注PHP中文網其他相關文章！
