摘要：高階組件和高階函數(shù)高階組件是編程中的常見(jiàn)模式。您可以將上面例子中的高階函數(shù)用函數(shù)的方式來(lái)重新整理如你所見(jiàn)，這就像是一個(gè)高階函數(shù)，這個(gè)函數(shù)接受一個(gè)函數(shù)，返回一個(gè)新的元素。函數(shù)式編程范例旨在避免在應(yīng)用程序中使用狀態(tài)。

原文：The functional side of React
作者：Andrea Chiarelli
譯者：博軒

React 是現(xiàn)在最流行的 JavaScript 庫(kù)之一。使用 React 可以非常輕松地創(chuàng)建 Web 用戶交互界面。 它的成功有很多因素，但也許其中一個(gè)因素是清晰有效的編程方法。

在 React 的世界中，UI 是由一個(gè)一個(gè)組件所組成的。組件可以組合在一起以創(chuàng)建其他組件， 應(yīng)用本身就是一個(gè)包含了所有組件的一個(gè)大組件。開(kāi)發(fā)者使用 React 會(huì)很容易聯(lián)想到：面向?qū)ο缶幊?。因?yàn)槎x組件的語(yǔ)法本身，就會(huì)給人這種感覺(jué)：

class HelloReact extends Component {
  render() {
    return (
Hello React!
);
  }
}

然鵝，在面向?qū)ο蟮牡谋硐笾拢?strong>React 隱藏了一種函數(shù)式的特質(zhì)。讓我們看看這些特質(zhì)都是什么？

React 組件的一大特征是是包含了 render() 方法。沒(méi)有包含 render() 方法的組件不是 React 組件。render() 方法總會(huì)返回一個(gè) React 元素，這種行為就像是組件的一種特征一樣。換句話說(shuō)，React 會(huì)要求任何組件必須有輸出。組件是根據(jù)輸入來(lái)返回輸出的，這樣來(lái)考慮組件的話，就會(huì)讓你感覺(jué)組件更像一個(gè)函數(shù)，而不是一個(gè)對(duì)象。

實(shí)際上，您不僅可以將 React 組件視為函數(shù)。 您還可以用函數(shù)來(lái)實(shí)現(xiàn)組件。 以下代碼展示了如何使用函數(shù)實(shí)現(xiàn)上面定義的組件：

const HelloReact = () => 
Hello React!
;

如您所見(jiàn)，它是一種實(shí)現(xiàn)組件的簡(jiǎn)單而緊湊的方法。

此外，您可以將參數(shù)傳遞給函數(shù)：

const Hello = (props) => 
Hello {props.name}!
;

在上面的示例中，您傳遞了 props 參數(shù)，這里的 props 對(duì)象用于將數(shù)據(jù)從一個(gè)組件傳遞到另一個(gè)組件。

如你所知，props 是不可改變的，你可以閱讀他們，但你無(wú)法改變它們。這也正是 React 組件的函數(shù)特性之一。props 是組件的輸入?yún)?shù)，因此給予其不可變性可以避免副作用。實(shí)際上，這也是函數(shù)式編程的基本原則之一：函數(shù)不能更改輸入?yún)?shù)。

譯注：純函數(shù)的介紹，推薦看下這個(gè) - 函數(shù)式編程 - wiki，以及我之前翻譯過(guò)的 【譯】JavaScript 中的函數(shù)式編程原理

關(guān)于 React，它的另一個(gè)特性就是單項(xiàng)數(shù)據(jù)流。這意味著在組件的層次結(jié)構(gòu)中，數(shù)據(jù)必須從較高的組件流向較低的組件，反之亦然。如果我們將組件視為對(duì)象，這個(gè)觀點(diǎn)就會(huì)顯得有些牽強(qiáng)。相反，如果我們從函數(shù)的角度去考慮組件，就會(huì)顯得很自然。

考慮一下下面的代碼：

class App extends Component {
  render() {
    return ()
  };
}

class Hello extends Component {
  render() {
    return (
Hello {props.name}!
);
  }
}

例子中有兩個(gè)組件：App 組件使用 Hello 組件來(lái)展示 “Hello React!” 。同時(shí)，例子中也隱式的定義了組件之間的層次結(jié)構(gòu)。但是乍一看，無(wú)法通過(guò) name 屬性來(lái)來(lái)看清楚數(shù)據(jù)的流向。

現(xiàn)在，讓我們來(lái)看看使用函數(shù)修改之后的代碼：

const App = () => ;
const Hello = (props) => 
Hello {props.name}!
;

通過(guò)上面組件的層級(jí)結(jié)構(gòu)可以清楚的看出，不過(guò)是 App() 和 Hello()，兩個(gè)函數(shù)的組合。你也可以將其視為下面的內(nèi)容：

const App = () => Hello("React");

從上面的例子中就可以很明顯的看出，“React” 文本是怎樣在 App 組件中傳遞的了。

譯注：這里原文例子中使用的是 const App = () => Hello("John"); ，和文章中的 "React" 不相符，所以我改了例子中傳遞的文案，嘿嘿嘿...

在面向?qū)ο蟮木幊谭独校瑢?duì)于類，很容易將繼承視為一種標(biāo)準(zhǔn)。 但是，如果從函數(shù)的角度考慮 React 組件，繼承就會(huì)顯得不那么自然。

例如，假設(shè)您要升級(jí) Hello 組件，以便它還可以顯示 “歡迎消息” 。 您可以將其與 Hello 組件組合來(lái)創(chuàng)建新組件，比如下面的例子：

const HelloAndWelcome = (props) => 
Welcome to React!
;

正如Facebook團(tuán)隊(duì)所宣稱的那樣，真的很少需要繼承。

高階組件是 React 編程中的常見(jiàn)模式。 它允許重用組件邏輯來(lái)創(chuàng)建新組件。 簡(jiǎn)單來(lái)說(shuō)，高階組件是一個(gè)函數(shù)，它將一個(gè)組件作為輸入并返回一個(gè)新組件作為其輸出。 以下是高階組件的示例：

const AddWelcome = (GreetingComponent) => {
  class TheNewComponent extends Component {
    render() {
      return (
        

          
          
Welcome to React!
        
);
      }
    }

  return TheNewComponent;
};

函數(shù) AddWelcome() 接受 GreetingComponent 參數(shù)，并在新組件 TheNewComponent 定義的 render() 方法中使用它。 這個(gè)新組件只是在 GreetingComponent 的輸出后添加一條歡迎消息。 最后，函數(shù) AddWelcome()會(huì)返回新組件。

您可以使用此功能，如以下示例所示：

const HelloAndWelcome = AddWelcome(Hello);

通過(guò)使用 AddWelcome() 包裝 Hello 組件，您將獲得一個(gè)新組件。

您可以將上面例子中的高階函數(shù) AddWelcome() 用函數(shù)的方式來(lái)重新整理：

const AddWelcome = (GreetingComponent) => {
  const TheNewComponent = (props) => 
Welcome to React!
;
  
  return TheNewComponent;
};

如你所見(jiàn)，這就像是一個(gè)高階函數(shù)，這個(gè)函數(shù)接受一個(gè)函數(shù)，返回一個(gè)新的 React 元素。

應(yīng)用程序的狀態(tài)是隨時(shí)間變化的數(shù)據(jù)集。 函數(shù)式編程范例旨在避免在應(yīng)用程序中使用狀態(tài)。 實(shí)際上，應(yīng)用程序狀態(tài)管理是軟件開(kāi)發(fā)中復(fù)雜性的主要來(lái)源之一。 但是，由于你不能沒(méi)有它，至少你應(yīng)該嘗試限制它的使用并使其更易于管理。

React 的開(kāi)發(fā)指南促進(jìn)了無(wú)狀態(tài)組件的創(chuàng)建，即無(wú) state 組件。 這種組件的輸出僅僅取決于傳入的 props。 無(wú)狀態(tài)組件看起來(lái)很像純函數(shù)，實(shí)際上也是如此。

但是，如您所知，在不使用 state 的情況下無(wú)法編寫復(fù)雜的應(yīng)用程序。 訣竅是在應(yīng)用程序的幾個(gè)點(diǎn)上隔離 state ，如果在一個(gè)點(diǎn)上更好。 此策略會(huì)要求開(kāi)發(fā)人員在根組件中使用狀態(tài)提升。 換句話說(shuō)，應(yīng)該在上層節(jié)點(diǎn)中保留狀態(tài)，而其后代應(yīng)該是無(wú)狀態(tài)組件。 這樣，我們可以更好地控制狀態(tài)，因?yàn)樗挥蓡蝹€(gè)根組件管理。

對(duì)于剛開(kāi)始使用 React 的開(kāi)發(fā)者來(lái)說(shuō)，React 并不是像看起來(lái)那樣，它更加適合函數(shù)式編碼的原則，而不是面向?qū)ο蟮脑瓌t。通常，這允許開(kāi)發(fā)者編寫更加正式可驗(yàn)證的代碼，例如使用自動(dòng)化測(cè)試來(lái)測(cè)試應(yīng)用程序。 我建議充分利用 React 的函數(shù)特性來(lái)編寫更易于維護(hù)的代碼。

Andrea Chiarelli 是 Beginning React 的作者。
本文已經(jīng)聯(lián)系原文作者，并授權(quán)翻譯，轉(zhuǎn)載請(qǐng)保留原文鏈接