反應高階組件

找出什麼是高階組件以及在編寫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的要點。

免費下載我的反應手冊