全文共1610字，預計學習時長8分鐘

圖源：unsplash

想要確定一個人是否掌握React，考考他最新的JavaScript語法就可以了。JavaScript語法對於理解React至關重要，它能讓我們更加容易地閱讀日誌，編寫出更簡潔的React程式碼。

一旦掌握了一些新的JavaScript語法，編寫React程式碼將變得輕而易舉。來看看精通React不可缺少的關鍵概念吧！

箭頭功能

箭頭功能非常重要，它讓功能變得更短，更整潔，並且不必擔心this。現在，React有了hooks API，就可以在任何地方使用箭頭功能了。

例如，可以將箭頭函式與hooks API結合使用，如下所示：

importReact from "react";const App = () => { return <divclassName="App">foo</div>;};export default App;

在上面的程式碼中，使用箭頭函式定義了一個非常簡單的React元件。該程式碼僅顯示靜態文字，但是可以通過動態功能輕鬆地對其進行擴充套件。

你還可以編寫以下程式碼，將hooks新增到應用程式零件中：

importReact, { useState } from "react";const App = () => { const [count, setCount] =useState(0); return ( <div className="App"> <button onClick={() =>setCount(count => count + 1)}>increment</button> <p>{count}</p> </div> );};export default App;

在以上程式碼中，有useState作為hooks，用來更新計數狀態。

在onClick prop.中使用該程式碼。接著傳入了一個箭頭函式，該函式呼叫 setCount 功能。在這個程式碼裡面，還有另一個箭頭功能來更新現有的計數狀態。

圖源：pexels

筆者認為不必使用this。傳統功能或bind函式可以隨時隨地藉助hooks API。hooks API只是變得更簡潔，使用箭頭功能時為我們省去了不少麻煩。

帶箭頭功能hooks API的簡化，使React從基於類的元件過渡到基於函式的元件。

箭頭函式對於操縱陣列非常有用，因為陣列方法通常會在回撥中傳遞，而傳遞迴調的最佳方法是使用箭頭函式。例如，如果要過濾專案並在React中顯示它們，可以使用filter和map，方法如下：

importReact from "react";const users = [ { user: "foo", active: true}, { user: "bar", active: false}, { user: "baz", active: false}];const App = () => { return ( <div className="App"> {users .filter(u => u.active) .map((u, i) => ( <p key={i}>{u.user}</p> ))} </div> );};export default App;

在上面的程式碼中，有user陣列，在應用程式通過呼叫帶箭頭函式的filter，將active設定為 true。然後通過map，在由filter返回的陣列上對映user內部屬性，以在陣列中呈現使用者名稱。接著你就能看到螢幕上顯示“ foo”。

箭頭函式讓程式碼簡短明了，你可以永遠不必在程式碼中寫function這個詞或者處理this這個值。

預設引數

預設引數可以在程式碼中使用預設值，將引數新增到函式中。在React程式碼中，大多使用預設引數以及帶有物件引數的解構語法，它可以將屬性分解為變數並有選擇地使用。

例如，可以將預設引數寫入程式碼，如下所示：

importReact from "react";const Greeting = ({ greeting = "hello", firstName = "jane", lastName = "smith"}) => ( <p> {greeting} {firstName} {lastName} </p>);const App = () => { return <Greetinggreeting="hi" />;};export default App;

以上程式碼定義了Greeting元件，該元件具有以下物件引數：

{ greeting = "hello", firstName = "jane", lastName = "smith"}

由於第一個引數Greeting是個props引數，可以對其進行解構，使之成為變數，而不必重複地寫賦值操作。在上面的程式碼中，設定了Greeting的預設值為'hello' ，firstName 的預設值為 'jane' ，lastName 的預設值為'smith' 。

然後，可以像以上程式碼一樣跳過一些屬性，在螢幕上顯示“ hi jane smith”。這個程式碼比之前分解語法的預設屬性短。例如，在沒有像上面那樣設定預設引數的情況下，React也具有預設屬性，編寫如下：

importReact from "react";const Greeting = ({ greeting, firstName, lastName}) => ( <p> {greeting} {firstName} {lastName} </p>);Greeting.defaultProps = { greeting: "hello", firstName: "jane", lastName: "smith"};const App = () => { return <Greetinggreeting="hi" />;};export default App;

圖源：unsplash

箭頭函式，解構和預設引數是JavaScript功能中最有用的兩個功能，可以看到，React程式碼被大大精簡了，可讀性也增強了。你學會了嘛？

我們一起分享AI學習與發展的乾貨