ReactJS中的箭頭函式是什麼？

React是一個流行的JavaScript庫，用於構建使用者介面元件。React的一個特性是它允許你使用箭頭函式來定義React元件。

自從ES6箭頭函式語法釋出以來，你現在可以使用標準JavaScript函式和箭頭函式語法來建立元件。

讓我們討論一下箭頭函式是什麼，以及為什麼你應該在你的ReactJS程式碼中使用它們：

關於箭頭函式

箭頭函式是ES6的新特性，在ReactJS 16中引入。它允許開發者建立一個具有詞法“this”繫結且沒有引數的函式。

箭頭函式提供了一種壓縮簡短的函式表示式版本，比常規JavaScript函式需要更少的按鍵次數，可以用作類元件和函式元件以及React中事件處理程式中函式的更簡單的替代方案。

箭頭函式總是匿名的，這意味著在定義它們時不需要使用關鍵字“function”。它們也沒有自己的this值，這意味著箭頭函式內部的this將引用它建立的位置，而不是從其呼叫位置。

常規JavaScript函式和箭頭函式的第三個區別是，傳遞給箭頭函式的所有引數都必須預先定義，因為不需要像常規JavaScript函式那樣為它們分配預設值。

箭頭函式的語法

箭頭函式表示式是一個JavaScript表示式，其語法比function關鍵字更短。它設計用於你想要建立一個單行匿名函式表示式的情況，例如在事件處理程式中。

示例

它可以用作以下內容的更簡潔的替代方案：

let handleClick = function(parameter) {
   return something
};
handleClick();

輸出

上述函式的箭頭函式表示式語法如下：

let handleClick = (parameter) => { something };

箭頭函式表示式始終只有一個引數，緊跟在=>標記之後，然後是一個表示式或語句（在括號內），使用引數跟隨返回值。

它們具有詞法作用域，並且不像傳統函式那樣擁有自己的this上下文或arguments物件。

即使單引數函式不需要括號，如果函式接受多個或更少的引數，仍然需要括號。

何時使用箭頭函式？

箭頭函式非常適合提高效能並使宣告式程式碼更具可讀性。

雖然它們並不總是最佳選擇，但它們確實具有一些值得考慮的優點。

為了回答“何時使用它們？”這個問題，以下是一些場景：

  • 當你需要將this繫結到方法時

  • 當你想要在一個元件的props上呼叫一個方法時

  • 當你想要使用回撥函式時

為什麼你應該在React中使用箭頭函式？

React是一個開源的、宣告式的JavaScript庫，用於建立使用者介面，它使你能夠使用稱為“元件”的小型獨立程式碼塊來構建複雜的UI。

箭頭函式是使React程式碼更簡潔易讀的眾多特性之一。如果使用得當，它們可以幫助你的程式碼更具宣告性且更容易理解。它們是一種簡潔的編寫函式的方式，這些函式沒有自己的this、arguments或new.target。這意味著它們不適合用作物件或類中的方法。

在ReactJS中使用箭頭函式有幾個好處。

  • 首先，它們比傳統的函式表示式更容易編寫和理解。這可以使你的程式碼更具可讀性，更容易除錯。

  • 其次，箭頭函式不會建立新的作用域，因此它們可以在ReactJS中使用而不會汙染全域性作用域。

  • 最後，箭頭函式可以用作其他函式的引數，這可以使你的程式碼更靈活、更具表現力。

如果你還沒有在ReactJS中使用箭頭函式，那麼你應該考慮這樣做。

箭頭函式的用例

在ReactJS中，箭頭函式有一些不同的用例。

  • 一種是定義將作為props傳遞給子元件的函式。當父元件需要將回調函式傳遞給子元件時，經常會看到這種情況。

  • 另一個用例是定義在render方法內部的行內函數。當需要將函式作為引數傳遞給另一個函式時，經常會看到這種情況。

  • 它們還允許使用三元運算子，當需要處理多個條件時，可以使用三元運算子代替switch語句或if-else塊。

  • 由於React提供了一些內建的Hooks，例如useState，你可以像這裡提到的那樣在處理事件時使用箭頭函式語法：

示例

import React, { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
   <div>
      <p>You clicked {count} times</p>
      <button onClick={()=> setCount(count + 1)}>Click me</button>
   </div>
   );
}

優點與缺點

讓我們來看看React.js中箭頭函式的優缺點，以便你可以做出明智的決定，是否在自己的專案中使用它們。

它們比傳統的函式定義具有許多優點，例如：

  • 比傳統的函式定義更簡潔。

  • 可以隱式返回值，這意味著你不需要使用return關鍵字。

  • 從其封閉作用域詞法繫結this的值，這意味著你不需要使用bind關鍵字。

是的，箭頭函式將非常有助於編寫簡潔的JavaScript程式碼。但這並不意味著它們是萬能的，它們可能並不適合所有情況。在某些情況下，它們會使你的程式碼效能降低，也可能使除錯變得更加困難。

例如，它們適用於單行表示式，但是如果你需要多行函式，當在一個函式內巢狀另一個函式時，可能會出現問題。你始終可以使用匿名自執行函式（也稱為IIFE），它將與箭頭函式具有相同的作用，但具有更多組織程式碼的選項。

其他一些缺點包括：

  • 不適合需要繫結到例項的方法，例如render方法。

  • 不能用作建構函式。

最終，由你決定箭頭函式的優點是否超過潛在的缺點。

總結

總的來說，箭頭函式是函式表示式的良好且有效的替代品，並提供了一種簡潔的方式來處理React JS中的區域性變數和引數。

但是，重要的是要記住，它們並不總是最佳選擇——在某些情況下，常規函式可能更合適。

更新於：2022年11月7日

19K+ 次瀏覽

啟動你的職業生涯

透過完成課程獲得認證

開始
廣告
© . All rights reserved.