反應高階組件

找出什麼是高階組件以及在編寫React應用程序時它們如何有用

您可能熟悉JavaScript中的高階函數。這些是接受函數作為參數和/或返回函數的函數。

這些功能的兩個示例是Array.map()或者Array.filter()

在React中,我們將此概念擴展到組件,因此我們有一個高階成分(HOC)當組件接受一個組件作為輸入並返回一個組件作為其輸出時。

通常,高階組件使您可以創建可組合和可重用的代碼,並且還可以封裝更多的代碼。

我們可以使用HOC將方法或屬性添加到組件的狀態,或者Redux例如存儲。

當您要增強現有組件,對狀態或道具或其渲染標記進行操作時,可能需要使用高階組件。

約定在“高階組件”之前添加一個with字符串(這是一個約定,因此不是強制性的),因此如果您有一個Button組件,其HOC對應項應稱為withButton

讓我們創建一個。

HOC最簡單的示例是返回未更改的組件的示例:

const withElement = Element => () => <Element />

讓我們使它更加有用,並為該元素添加一個屬性,除了它已經附帶的所有道具之外,還包括顏色:

const withColor = Element => props => <Element {...props} color="red" />

我們在組件JSX中使用此HOC:

const Button = () => {
  return <button>test</button>
}

const ColoredButton = withColor(Button)

最後,我們可以在應用程序JSX中呈現WrappedButton組件:

function App() {
  return (
    <div className="App">
      <h1>Hello</h1>
      <ColoredButton />
    </div>
  )
}

這是一個非常簡單的示例,但是希望您可以在將這些概念應用於更複雜的場景之前了解HOC的要點。

免費下載我的反應手冊


更多反應教程: