摘要：和類在開(kāi)始時(shí)遇到類組件，只是需要有關(guān)類的基礎(chǔ)。畢竟，中的條件呈現(xiàn)僅再次顯示大多數(shù)是而不是特定的任何內(nèi)容。

在我的研討會(huì)期間，更多的材料是關(guān)于JavaScript而不是React。其中大部分歸結(jié)為JavaScript ES6以及功能和語(yǔ)法，但也包括三元運(yùn)算符，語(yǔ)言中的簡(jiǎn)寫(xiě)版本，此對(duì)象，JavaScript內(nèi)置函數(shù)（map，reduce，filter）或更常識(shí)性的概念，如：可組合性，可重用性，不變性或高階函數(shù)。這些是基礎(chǔ)知識(shí)，在開(kāi)始使用React之前你不需要掌握這些基礎(chǔ)知識(shí)，但在學(xué)習(xí)或?qū)嵺`它時(shí)肯定會(huì)出現(xiàn)這些基礎(chǔ)知識(shí)。

以下演練是我嘗試為您提供一個(gè)幾乎廣泛但簡(jiǎn)明的列表，其中列出了所有不同的JavaScript功能，以補(bǔ)充您的React應(yīng)用程序。如果您有任何其他不在列表中的內(nèi)容，只需對(duì)本文發(fā)表評(píng)論，我會(huì)及時(shí)更新。

從JavaScript中學(xué)習(xí)React

React 和 JavaScript Classes

React中的箭頭函數(shù)

作為React中的組件的fuuction

React類組件語(yǔ)法

在React中的Map, Reduce 和 Filter

React中的var，let和const

React中的三元運(yùn)算符

React中的Import 和 Export

React中的庫(kù)

React中的高階函數(shù)

React中的解構(gòu)和傳播運(yùn)算符

There is more JavaScript than React

當(dāng)你進(jìn)入React的世界時(shí)，通常是使用用于啟動(dòng)React項(xiàng)目的 create-react-app。設(shè)置項(xiàng)目后，您將遇到以下React類組件：

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";

class App extends Component {
  render() {
    return (
      

        

          
          
Welcome to React
        
        

          To get started, edit src/App.js and save to reload.
        
      
    );
  }
}

export default App;

可以說(shuō)，React類組件可能不是最好的起點(diǎn)。新手有許多東西需要消化，不一定是React：類語(yǔ)句，類方法和繼承。導(dǎo)入語(yǔ)句也只是在學(xué)習(xí)React時(shí)增加了復(fù)雜性。盡管主要焦點(diǎn)應(yīng)該是JSX（React的語(yǔ)法），但通常所有的事情都需要解釋。這篇文章應(yīng)該揭示所有的東西，大部分是JavaScript，而不用擔(dān)心React。

在開(kāi)始時(shí)遇到React類組件，只是需要有關(guān)JavaScript類的基礎(chǔ)。JavaScript類在語(yǔ)言中是相當(dāng)新的。以前，只有JavaScript的原型鏈也可以用于繼承。JavaScript類在原型繼承之上構(gòu)建，使整個(gè)事物更簡(jiǎn)單。

定義React組件的一種方法是使用JavaScript類。為了理解JavaScript類，您可以花一些時(shí)間在沒(méi)有React的情況下學(xué)習(xí)它們。

class Developer {
  constructor(firstname, lastname) {
    this.firstname = firstname;
    this.lastname = lastname;
  }

  getName() {
    return this.firstname + " " + this.lastname;
  }
}

var me = new Developer("Robin", "Wieruch");

console.log(me.getName());

類描述了一個(gè)實(shí)體，該實(shí)體用作創(chuàng)建該實(shí)體實(shí)例的藍(lán)圖。一旦使用new語(yǔ)句創(chuàng)建了類的實(shí)例，就會(huì)調(diào)用該類的構(gòu)造函數(shù)，該實(shí)例化該類的實(shí)例。因此，類可以具有通常位于其構(gòu)造函數(shù)中的屬性。此外，類方法（例如getName（））用于讀取（或?qū)懭耄?shí)例的數(shù)據(jù)。類的實(shí)例在類中表示為此對(duì)象，但實(shí)例外部?jī)H指定給JavaScript變量。

通常，類用于面向?qū)ο缶幊讨械睦^承。它們?cè)贘avaScript中用于相同的，而extends語(yǔ)句可用于從另一個(gè)類繼承一個(gè)類。具有extends語(yǔ)句的更專業(yè)的類繼承了更通用類的所有功能，但可以向其添加其專用功能。

class Developer {
  constructor(firstname, lastname) {
    this.firstname = firstname;
    this.lastname = lastname;
  }

  getName() {
    return this.firstname + " " + this.lastname;
  }
}

class ReactDeveloper extends Developer {
  getJob() {
    return "React Developer";
  }
}

var me = new ReactDeveloper("Robin", "Wieruch");

console.log(me.getName());
console.log(me.getJob());

基本上，它只需要完全理解React類組件。 JavaScript類用于定義React組件，但正如您所看到的，React組件只是一個(gè)React組件，因?yàn)樗^承了從React包導(dǎo)入的React Component類的所有功能。

import React, { Component } from "react";

class App extends Component {
  render() {
    return (
      

        
Welcome to React
      
    );
  }
}

export default App;

這就是為什么render（）方法在React類組件中是必需的：來(lái)自導(dǎo)入的React包的React組件指示您使用它在瀏覽器中顯示某些內(nèi)容。此外，如果不從React組件擴(kuò)展，您將無(wú)法使用其他生命周期方法 （包括render（）方法）。例如，不存在componentDidMount（）生命周期方法，因?yàn)樵摻M件將是vanilla JavaScript類的實(shí)例。并且不僅生命周期方法會(huì)消失，React的API方法（例如用于本地狀態(tài)管理的this.setState（））也不可用。

但是，正如您所看到的，使用JavaScript類有利于使用您的專業(yè)行為擴(kuò)展通用類。因此，您可以引入自己的類方法或?qū)傩浴?/p>

import React, { Component } from "react";

class App extends Component {
  getGreeting() {
    return "Welcome to React";
  }

  render() {
    return (
      

        
{this.getGreeting()}
      
    );
  }
}

export default App;

現(xiàn)在您知道為什么React使用JavaScript類來(lái)定義React類組件。當(dāng)您需要訪問(wèn)React的API（生命周期方法，this.state和this.setState（））時(shí)，可以使用它們。在下文中，您將看到如何以不同的方式定義React組件，而不使用JavaScript類，因?yàn)槟赡懿恍枰冀K使用類方法，生命周期方法和狀態(tài)。

畢竟，JavaScript類歡迎使用React中的繼承，這對(duì)于React來(lái)說(shuō)不是一個(gè)理想的結(jié)果，因?yàn)镽eact更喜歡組合而不是繼承。因此，您應(yīng)該為您的React組件擴(kuò)展的唯一類應(yīng)該是官方的React組件。

在教關(guān)于React時(shí)，我很早就解釋了JavaScript arrow functions。它是ES6的語(yǔ)法之一，它推動(dòng)了JavaScript在函數(shù)式編程中的發(fā)展。

// JavaScript ES5 function
function getGreeting() {
  return "Welcome to JavaScript";
}

// JavaScript ES6 arrow function with body
const getGreeting = () => {
  return "Welcome to JavaScript";
}

// JavaScript ES6 arrow function without body and implicit return
const getGreeting = () =>
  "Welcome to JavaScript";

JavaScript箭頭函數(shù)通常用在React應(yīng)用程序中，以保持代碼簡(jiǎn)潔和可讀。嘗試從JavaScript ES5到ES6功能重構(gòu)我的功能。在某些時(shí)候，當(dāng)JavaScript ES5函數(shù)和JavaScript ES6函數(shù)之間的差異很明顯時(shí)，我堅(jiān)持使用JavaScript ES6的方式來(lái)實(shí)現(xiàn)箭頭函數(shù)。但是，我總是看到React新手的太多不同的語(yǔ)法可能會(huì)讓人不知所措。因此，我嘗試在使用它們?cè)赗eact中全部使用之前，使JavaScript函數(shù)的不同特性變得清晰。在以下部分中，您將了解如何在React中常用JavaScript箭頭函數(shù)。

React使用不同的編程范例，因?yàn)镴avaScript是一種多方面的編程語(yǔ)言。在面向?qū)ο缶幊痰臅r(shí)候，React的類組件是利用JavaScript類這一種方式（React組件API的繼承，類方法和類屬性，如this.state）。另一方面，React（及其生態(tài)系統(tǒng)）中使用了很多的函數(shù)式編程的概念。例如，React的功能無(wú)狀態(tài)組件是另一種在React中定義組件的方法。在React無(wú)狀態(tài)組件就引發(fā)了一個(gè)新的思考：組件如何像函數(shù)一樣使用？

function (props) {
  return view;
}

它是一個(gè)接收輸入（例如props）并返回顯示的HTML元素（視圖）的函數(shù)（函數(shù)）。它不需要管理任何狀態(tài)（無(wú)狀態(tài)），也不需要了解任何方法（類方法，生命周期方法）。該函數(shù)只需要使用React組件中render（）方法的呈現(xiàn)機(jī)制。那是在引入無(wú)狀態(tài)組件的時(shí)候。

function Greeting(props) {
  return 
{props.greeting}
;
}

無(wú)狀態(tài)組件是在React中定義組件的首選方法。它們具有較少的樣板，降低了復(fù)雜性，并且比React類組件更易于維護(hù)。但是，就目前而言，兩者都有自己存在的意義。

以前，文章提到了JavaScript箭頭函數(shù)以及它們?nèi)绾胃倪M(jìn)您的React代碼。讓我們將這些函數(shù)應(yīng)用于您的無(wú)狀態(tài)組件。
來(lái)看看Greeting組分別使用ES5和ES6不同的寫(xiě)法：

// JavaScript ES5 function
function Greeting(props) {
  return 
{props.greeting}
;
}

// JavaScript ES6 arrow function
const Greeting = (props) => {
  return 
{props.greeting}
;
}

// JavaScript ES6 arrow function without body and implicit return
const Greeting = (props) =>
  
{props.greeting}

JavaScript箭頭函數(shù)是在React中保持無(wú)狀態(tài)組件簡(jiǎn)潔的好方法。當(dāng)更多的時(shí)候沒(méi)有計(jì)算，因此可以省略函數(shù)體和return語(yǔ)句。

React定義組件的方式隨著時(shí)間的推移而演變。在早期階段，React.createClass（）方法是創(chuàng)建React類組件的默認(rèn)方式。如今，它已不再使用，因?yàn)殡S著JavaScript ES6的興起，更多的是使用ES6的方法來(lái)創(chuàng)建React類組件。

然而，JavaScript不斷發(fā)展，因此JavaScript愛(ài)好者一直在尋找新的做事方式。這就是為什么你會(huì)經(jīng)常發(fā)現(xiàn)React類組件的不同語(yǔ)法。使用狀態(tài)和類方法定義React類組件的一種方法如下：

class Counter extends Component {
  constructor(props) {
    super(props);

    this.state = {
      counter: 0,
    };

    this.onIncrement = this.onIncrement.bind(this);
    this.onDecrement = this.onDecrement.bind(this);
  }

  onIncrement() {
    this.setState(state => ({ counter: state.counter + 1 }));
  }

  onDecrement() {
    this.setState(state => ({ counter: state.counter - 1 }));
  }

  render() {
    return (
      

        
{this.state.counter}

        Increment
        Decrement
      
    );
  }
}

但是，當(dāng)實(shí)現(xiàn)大量的React類組件時(shí)，構(gòu)造函數(shù)中的class方法的綁定 以及首先具有構(gòu)造函數(shù)變?yōu)榉爆嵉膶?shí)現(xiàn)細(xì)節(jié)。幸運(yùn)的是，有一個(gè)簡(jiǎn)短的語(yǔ)法來(lái)擺脫這兩個(gè)煩惱：

class Counter extends Component {
  state = {
    counter: 0,
  };

  onIncrement = () => {
    this.setState(state => ({ counter: state.counter + 1 }));
  }

  onDecrement = () => {
    this.setState(state => ({ counter: state.counter - 1 }));
  }

  render() {
    return (
      

        
{this.state.counter}

        Increment
        Decrement
      
    );
  }
}

通過(guò)使用JavaScript箭頭函數(shù)，您可以自動(dòng)綁定類方法，而無(wú)需在構(gòu)造函數(shù)中綁定它們。通過(guò)將狀態(tài)直接定義為類屬性，也可以在不使用props時(shí)省略構(gòu)造函數(shù)。 （注意：請(qǐng)注意，類屬性 尚未使用JavaScript語(yǔ)言。）因此，您可以說(shuō)這種定義React類組件的方式比其他版本更簡(jiǎn)潔。

模板文字是JavaScript ES6附帶的另一種JavaScript語(yǔ)言特定功能。值得一提的是，因?yàn)楫?dāng)JavaScript和React的新手看到它們時(shí)，它們也會(huì)讓人感到困惑。以下是你正在用的連接字符串的語(yǔ)法：

function getGreeting(what) {
  return "Welcome to " + what;
}

const greeting = getGreeting("JavaScript");
console.log(greeting);
// Welcome to JavaScript

模板文字可以用于相同的文字文字，稱為字符串插值：

function getGreeting(what) {
  return Welcome to ${what};
}

您只需使用 ` ` 和${}表示法來(lái)插入JavaScript原語(yǔ)。但是，字符串文字不僅用于字符串插值，還用于JavaScript中的多行字符串：

function getGreeting(what) {
  return 
    Welcome
    to
    ${what}
  ;
}

基本上，這就是如何在多行上格式化更大的文本塊。最近在JavaScript中引入了GraphQL也可以看出它 。

為React新手教授JSX語(yǔ)法的最佳方法是什么？通常我首先在render（）方法中定義一個(gè)變量，并在返回塊中將其用作HTML中的JavaScript。

import React, { Component } from "react";

class App extends Component {
  render() {
    var greeting = "Welcome to React";
    return (
      

        
{greeting}
      
    );
  }
}

export default App;

您只需使用花括號(hào)來(lái)獲取HTML格式的JavaScript。從渲染字符串到復(fù)雜對(duì)象并沒(méi)有什么不同。

import React, { Component } from "react";

class App extends Component {
  render() {
    var user = { name: "Robin" };
    return (
      

        
{user.name}
      
    );
  }
}

export default App;

通常接下來(lái)的問(wèn)題是：如何呈現(xiàn)一個(gè)項(xiàng)目列表？在我看來(lái)，這是解釋React最好的部分之一。沒(méi)有特定于React的API，例如HTML標(biāo)記上的自定義屬性，使您可以在React中呈現(xiàn)多個(gè)項(xiàng)目。您可以使用純JavaScript來(lái)迭代項(xiàng)目列表并返回每個(gè)項(xiàng)目的HTML。

import React, { Component } from "react";

class App extends Component {
  render() {
    var users = [
      { name: "Robin" },
      { name: "Markus" },
    ];

    return (
      

        {users.map(function (user) {
          return 
{user.name}
;
        })}
      
    );
  }
}

export default App;

之前使用過(guò)JavaScript箭頭函數(shù)，你可以擺脫箭頭函數(shù)體和return語(yǔ)句，使你的渲染輸出更加簡(jiǎn)潔。

import React, { Component } from "react";

class App extends Component {
  render() {
    var users = [
      { name: "Robin" },
      { name: "Markus" },
    ];

    return (
      

        {users.map(user => 
{user.name}
)}
      
    );
  }
}

export default App;

很快，每個(gè)React開(kāi)發(fā)人員都習(xí)慣了數(shù)組的內(nèi)置JavaScript map（）方法。映射數(shù)組并返回每個(gè)項(xiàng)的渲染輸出非常有意義。這同樣適用于自定義的情況，其中filter（）或reduce（）更有意義，而不是為每個(gè)映射項(xiàng)呈現(xiàn)輸出。

import React, { Component } from "react";

class App extends Component {
  render() {
    var users = [
      { name: "Robin", isDeveloper: true },
      { name: "Markus", isDeveloper: false },
    ];

    return (
      

        {users
          .filter(user => user.isDeveloper)
          .map(user => 
{user.name}
)
        }
      
    );
  }
}

export default App;

通常，這就是React開(kāi)發(fā)人員如何習(xí)慣這些JavaScript內(nèi)置函數(shù)，而不必使用React特定的API。它只是HTML中的JavaScript。

使用var，let和const的不同變量聲明對(duì)于React的新手來(lái)說(shuō)可能會(huì)造成混淆，即使它們不是React特定的。也許是因?yàn)楫?dāng)React變得流行時(shí)引入了JavaScript ES6。總的來(lái)說(shuō)，我嘗試在我的工作室中盡早介紹let和const。它只是從在React組件中與const交換var開(kāi)始：

import React, { Component } from "react";

class App extends Component {
  render() {
    const users = [
      { name: "Robin" },
      { name: "Markus" },
    ];

    return (
      

        {users.map(user => 
{user.name}
)}
      
    );
  }
}

export default App;

然后我給出了使用哪個(gè)變量聲明的經(jīng)驗(yàn)法則：

（1）不要使用var，因?yàn)閘et和const更具體

（2）默認(rèn)為const，因?yàn)樗荒苤匦路峙浠蛑匦侣暶?/p>

（3）重新賦值變量時(shí)使用let

雖然let通常用于for循環(huán)來(lái)遞增迭代器，但const通常用于保持JavaScript變量不變。盡管在使用const時(shí)可以更改對(duì)象和數(shù)組的內(nèi)部屬性，但變量聲明顯示了保持變量不變的意圖。

如果要在render中的JSX中使用if-else語(yǔ)句，可以使用JavaScripts三元運(yùn)算符來(lái)執(zhí)行此操作：

import React, { Component } from "react";

class App extends Component {
  render() {
    const users = [
      { name: "Robin" },
      { name: "Markus" },
    ];

    const showUsers = false;

    if (!showUsers) {
      return null;
    }

    return (
      

        {users.map(user => 
{user.name}
)}
      
    );
  }
}

export default App;

import React, { Component } from "react";

class App extends Component {
  render() {
    const users = [
      { name: "Robin" },
      { name: "Markus" },
    ];

    const showUsers = false;

    return (
      

        {
          showUsers ? (
            

              {users.map(user => 
{user.name}
)}
            
          ) : (
            null
          )
        }
      
    );
  }
}

export default App;

另一種方法是，如果你只返回條件渲染的一邊，則使用&&運(yùn)算符：

import React, { Component } from "react";

class App extends Component {
  render() {
    const users = [
      { name: "Robin" },
      { name: "Markus" },
    ];

    const showUsers = false;

    return (
      

        {
          showUsers && (
            

              {users.map(user => 
{user.name}
)}
            
          )
        }
      
    );
  }
}

export default App;

我不會(huì)詳細(xì)說(shuō)明為什么會(huì)這樣，但如果你很好奇，你可以在這里了解它和條件渲染的其他技術(shù)：React中的所有條件渲染。畢竟，React中的條件呈現(xiàn)僅再次顯示大多數(shù)React是JavaScript而不是React特定的任何內(nèi)容。

幸運(yùn)的是，JavaScript社區(qū)確定了使用JavaScript ES6的import 和 export。

但是，對(duì)于React和JavaScript ES6來(lái)說(shuō)，這些導(dǎo)入和導(dǎo)出語(yǔ)句只是另一個(gè)需要在開(kāi)始使用第一個(gè)React應(yīng)用程序時(shí)需要解釋的主題。很早就有了CSS，SVG或其他JavaScript文件的第一次導(dǎo)入。 create-react-app項(xiàng)目已經(jīng)從那些import語(yǔ)句開(kāi)始：

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";

class App extends Component {
  render() {
    return (
      

        

          
          
Welcome to React
        
        

          To get started, edit src/App.js and save to reload.
        
      
    );
  }
}

export default App;

這對(duì)初學(xué)者項(xiàng)目來(lái)說(shuō)非常棒，因?yàn)樗鼮槟峁┝艘粋€(gè)全面的體驗(yàn)，可以導(dǎo)入和導(dǎo)出其他文件。 App組件也會(huì)在 _src/index.js_文件中導(dǎo)入。但是，在React中執(zhí)行第一步時(shí)，我會(huì)嘗試在開(kāi)始時(shí)避免這些導(dǎo)入。相反，我嘗試專注于JSX和React組件。只有在將另一個(gè)文件中的第一個(gè)React組件或JavaScript函數(shù)分離時(shí)才會(huì)引入導(dǎo)入和導(dǎo)出語(yǔ)句。

那么這些導(dǎo)入和導(dǎo)出語(yǔ)句如何工作呢？假設(shè)您要在一個(gè)文件中導(dǎo)出以下變量：

const firstname = "Robin";
const lastname = "Wieruch";

export { firstname, lastname };

然后，您可以使用第一個(gè)文件的相對(duì)路徑將它們導(dǎo)入到另一個(gè)文件中：

import { firstname, lastname } from "./file1.js";

console.log(firstname);
// output: Robin

因此，它不一定是關(guān)于 importing/exporting 組件或函數(shù)，而是關(guān)于共享可分配給變量的所有東西（省略CSS或SVG導(dǎo)入/導(dǎo)出，但只談JS）。您還可以將另一個(gè)文件中的所有導(dǎo)出變量作為一個(gè)對(duì)象導(dǎo)入：

import * as person from "./file1.js";

console.log(person.firstname);
// output: Robin

importing可以有別名。您可能會(huì)從具有相同命名導(dǎo)出的多個(gè)文件中導(dǎo)入功能。這就是你可以使用別名的原因：

import { firstname as username } from "./file1.js";

console.log(username);
// output: Robin

以前的所有案例都被命名為進(jìn)口和出口。但是也存在默認(rèn)聲明。它可以用于一些用例：

導(dǎo)出和導(dǎo)入單個(gè)功能

突出顯示模塊的導(dǎo)出API的主要功能

具有后備導(dǎo)入功能

const robin = {
  firstname: "Robin",
  lastname: "Wieruch",
};

export default robin;

您可以省略導(dǎo)入的大括號(hào)以導(dǎo)入默認(rèn)導(dǎo)出：

import developer from "./file1.js";

console.log(developer);
// output: { firstname: "Robin", lastname: "Wieruch" }

此外，導(dǎo)入名稱可能與導(dǎo)出的默認(rèn)名稱不同。您還可以將它與命名的export和import語(yǔ)句一起使用：

const firstname = "Robin";
const lastname = "Wieruch";

const person = {
  firstname,
  lastname,
};

export {
  firstname,
  lastname,
};

export default person;

并在另一個(gè)文件中導(dǎo)入默認(rèn)導(dǎo)出或命名導(dǎo)出：

import developer, { firstname, lastname } from "./file1.js";

console.log(developer);
// output: { firstname: "Robin", lastname: "Wieruch" }
console.log(firstname, lastname);
// output: Robin Wieruch

您還可以節(jié)省額外的行并直接為命名導(dǎo)出導(dǎo)出變量：

export const firstname = "Robin";
export const lastname = "Wieruch";

這些是ES6模塊的主要功能。它們可以幫助您組織代碼，維護(hù)代碼和設(shè)計(jì)可重用的模塊API。您還可以導(dǎo)出和導(dǎo)入功能以測(cè)試它們。

React只是應(yīng)用程序的視圖層。 React提供了一些內(nèi)部狀態(tài)管理，但除此之外，它只是一個(gè)為您的瀏覽器呈現(xiàn)HTML的組件庫(kù)。其他所有內(nèi)容都可以從API（例如瀏覽器API，DOM API），JavaScript功能或外部庫(kù)中添加。選擇合適的庫(kù)來(lái)補(bǔ)充React應(yīng)用程序并不總是很簡(jiǎn)單，但是一旦您對(duì)不同的選項(xiàng)有了很好的概述，就可以選擇最適合您的技術(shù)堆棧的庫(kù)。

例如，可以使用本機(jī)fetch API在React中獲取數(shù)據(jù)：

import React, { Component } from "react";

class App extends Component {
  state = {
    data: null,
  };

  componentDidMount() {
    fetch("https://api.mydomain.com")
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

  render() {
    ...
  }
}

export default App;

但是你可以使用另一個(gè)庫(kù)來(lái)獲取React中的數(shù)據(jù)。 Axios是React應(yīng)用程序的一個(gè)流行選擇：

import React, { Component } from "react";
import axios from "axios";

class App extends Component {
  state = {
    data: null,
  };

  componentDidMount() {
    axios.get("https://api.mydomain.com")
      .then(data => this.setState({ data }));
  }

  render() {
    ...
  }
}

export default App;

因此，一旦您了解了需要解決的問(wèn)題，React廣泛而創(chuàng)新的生態(tài)系統(tǒng)應(yīng)該為您提供大量解決方案 。這又不是關(guān)于React，而是了解所有可用于補(bǔ)充應(yīng)用程序的不同JavaScript庫(kù)。

高階函數(shù)是一個(gè)很好的編程概念，特別是在轉(zhuǎn)向函數(shù)式編程時(shí)。在React中，了解這類函數(shù)是完全有意義的，因?yàn)樵谀承r(shí)候你必須處理高階組件，這些組件在首先了解高階函數(shù)時(shí)可以得到最好的解釋。

可以在早期的React中展示高階函數(shù)，而不會(huì)引入更高階的組件。例如，假設(shè)可以根據(jù)輸入字段的值過(guò)濾呈現(xiàn)的用戶列表。

import React, { Component } from "react";

class App extends Component {
  state = {
    query: "",
  };

  onChange = event => {
    this.setState({ query: event.target.value });
  }

  render() {
    const users = [
      { name: "Robin" },
      { name: "Markus" },
    ];

    return (
      

        

          {users
            .filter(user => this.state.query === user.name)
            .map(user => 
{user.name}
)
          }
        

        
      
    );
  }
}

export default App;

并不總是希望提取函數(shù)，因?yàn)樗梢栽黾硬槐匾膹?fù)雜性，但另一方面，它可以為JavaScript帶來(lái)有益的學(xué)習(xí)效果。此外，通過(guò)提取函數(shù)，您可以將其與React組件隔離開(kāi)來(lái)進(jìn)行測(cè)試。因此，讓我們使用提供給內(nèi)置過(guò)濾器功能的功能來(lái)展示它。

import React, { Component } from "react";

function doFilter(user) {
  return this.state.query === user.name;
}

class App extends Component {
  ...

  render() {
    const users = [
      { name: "Robin" },
      { name: "Markus" },
    ];

    return (
      

        

          {users
            .filter(doFilter)
            .map(user => 
{user.name}
)
          }
        

        
      
    );
  }
}

export default App;

之前的實(shí)現(xiàn)不起作用，因?yàn)閐oFilter（）函數(shù)需要從狀態(tài)知道查詢屬性。因此，您可以通過(guò)將其包含在另一個(gè)導(dǎo)致更高階函數(shù)的函數(shù)中來(lái)將其傳遞給函數(shù)。

import React, { Component } from "react";

function doFilter(query) {
  return function (user) {
    return this.state.query === user.name;
  }
}

class App extends Component {
  ...

  render() {
    const users = [
      { name: "Robin" },
      { name: "Markus" },
    ];

    return (
      

        

          {users
            .filter(doFilter(this.state.query))
            .map(user => 
{user.name}
)
          }
        

        
      
    );
  }
}

export default App;

基本上，高階函數(shù)是返回函數(shù)的函數(shù)。通過(guò)使用JavaScript ES6箭頭函數(shù)，您可以使更高階的函數(shù)更簡(jiǎn)潔。此外，這種速記版本使得將功能組合成功能更具吸引力。

const doFilter = query => user =>
  this.state.query === user.name;

現(xiàn)在可以從文件中導(dǎo)出doFilter（）函數(shù)，并將其作為純（高階）函數(shù)多帶帶測(cè)試。在了解了高階函數(shù)之后，建立了所有基礎(chǔ)知識(shí)，以便更多地了解React的高階組件。

將這些函數(shù)提取到React組件之外的（高階）函數(shù)中也可以有利于多帶帶測(cè)試React的本地狀態(tài)管理。

export const doIncrement = state =>
  ({ counter: state.counter + 1 });

export const doDecrement = state =>
  ({ counter: state.counter - 1 });

class Counter extends Component {
  state = {
    counter: 0,
  };

  onIncrement = () => {
    this.setState(doIncrement);
  }

  onDecrement = () => {
    this.setState(doDecrement);
  }

  render() {
    return (
      

        
{this.state.counter}

        Increment
        Decrement
      
    );
  }
}

圍繞代碼庫(kù)移動(dòng)函數(shù)是了解在JavaScript中使用函數(shù)作為拳頭類公民的好處的好方法。將代碼移向函數(shù)式編程時(shí)，它非常強(qiáng)大。

JavaScript中引入的另一種語(yǔ)言特性稱為解構(gòu)。通常情況下，您必須從您state或組件中的props訪問(wèn)大量屬性。您可以在JavaScript中使用解構(gòu)賦值，而不是逐個(gè)將它們分配給變量。

// no destructuring
const users = this.state.users;
const counter = this.state.counter;

// destructuring
const { users, counter } = this.state;

這對(duì)功能無(wú)狀態(tài)組件特別有用，因?yàn)樗鼈兛偸窃诤瘮?shù)簽名中接收props對(duì)象。通常，您不會(huì)使用道具而是使用道具，因此您可以對(duì)功能簽名中已有的內(nèi)容進(jìn)行解構(gòu)。

// no destructuring
function Greeting(props) {
  return 
{props.greeting}
;
}

// destructuring
function Greeting({ greeting }) {
  return 
{greeting}
;
}

解構(gòu)也適用于JavaScript數(shù)組。另一個(gè)很棒的特征是其余的解構(gòu)。它通常用于拆分對(duì)象的一部分，但將剩余屬性保留在另一個(gè)對(duì)象中。

// rest destructuring
const { users, ...rest } = this.state;

之后，可以使用用戶進(jìn)行渲染，例如在React組件中，而在其他地方使用剩余的狀態(tài)。這就是JavaScript擴(kuò)展運(yùn)算符 用于將其余對(duì)象轉(zhuǎn)發(fā)到下一個(gè)組件的位置。在下一節(jié)中，您將看到此運(yùn)算符的運(yùn)行情況。

總之，有很多JavaScript可以在React中使用。雖然React只有一個(gè)API表面區(qū)域，但開(kāi)發(fā)人員必須習(xí)慣JavaScript提供的所有功能。這句話并非沒(méi)有任何理由：“成為React開(kāi)發(fā)人員會(huì)讓你成為更好的JavaScript開(kāi)發(fā)人員”。讓我們通過(guò)重構(gòu)更高階的組件來(lái)回顧一下React中JavaScript的一些學(xué)習(xí)方面。

function withLoading(Component) {
  return class WithLoading extends {
    render() {
      const { isLoading, ...props } = this.props;

      if (isLoading) {
        return 
Loading
;
      }

      return ;
    }
  }
  };
}

當(dāng)isLoading prop設(shè)置為true時(shí)，此高階組件僅用于顯示條件加載指示符。否則它呈現(xiàn)輸入組件。您已經(jīng)可以看到（休息）解構(gòu)和傳播運(yùn)算符。后者可以在渲染的Component中看到，因?yàn)閜rops對(duì)象的所有剩余屬性都傳遞給Component。

使高階組件更簡(jiǎn)潔的第一步是將返回的React類組件重構(gòu)為功能無(wú)狀態(tài)組件：

function withLoading(Component) {
  return function ({ isLoading, ...props }) {
    if (isLoading) {
      return 
Loading
;
    }

    return ;
  };
}

您可以看到其余的解構(gòu)也可以在函數(shù)的簽名中使用。接下來(lái)，使用JavaScript ES6箭頭函數(shù)使高階組件更簡(jiǎn)潔：

const withLoading = Component => ({ isLoading, ...props }) => {
  if (isLoading) {
    return 
Loading
;
  }

  return ;
}

添加三元運(yùn)算符可將函數(shù)體縮短為一行代碼。因此可以省略函數(shù)體，并且可以省略return語(yǔ)句。

const withLoading = Component => ({ isLoading, ...props }) =>
  isLoading
    ? 
Loading
    : 

如您所見(jiàn)，高階組件使用各種JavaScript而不是React相關(guān)技術(shù)：箭頭函數(shù)，高階函數(shù)，三元運(yùn)算符，解構(gòu)和擴(kuò)展運(yùn)算符。這就是如何在React應(yīng)用程序中使用JavaScript的功能。

人們經(jīng)常說(shuō)學(xué)習(xí)React的學(xué)習(xí)曲線很陡峭。但是，只有將React留在等式中并將所有JavaScript排除在外。當(dāng)其他Web框架正在執(zhí)行時(shí)，React不會(huì)在頂部添加任何外部抽象層。相反，你必須使用JavaScript。因此，磨練您的JavaScript技能，您將成為一個(gè)偉大的React開(kāi)發(fā)人員。