了解什麼是高階元件,以及在開發React應用程式時它們的用途。
你可能對JavaScript中的高階函式已經很熟悉了。這是指接受函式作為參數和/或回傳函式的函式。
兩個範例是Array.map()
和Array.filter()
。
在React中,我們將此概念擴展到元件,因此我們有了高階元件(HOC),當元件接受元件作為輸入並將元件作為輸出時。
一般來說,高階元件可以讓你創建可組合和可重用的程式碼,並提供更好的封裝性。
我們可以使用高階元件來向元件的狀態或屬性添加方法或屬性,例如Redux儲存。
當你想要增強現有元件、操作狀態或屬性,或者操作它的渲染標記時,你可能會想要使用高階元件。
通常,在高階元件前面加上with
字串是一個常見的慣例(這只是一個慣例,並不是強制性的),所以如果你有一個Button
元件,它的高階元件對應名稱應該叫作withButton
。
讓我們創建一個高階元件。
最簡單的高階元件範例就是不做任何改變地返回元件:
const withElement = Element => () => <Element />
讓我們增加點有用性,將一個額外的屬性(顏色)加到此元素上,除了它原本就有的所有屬性:
const withColor = Element => props => <Element {...props} color="red" />
然後,在元件的JSX中使用這個高階元件:
const Button = () => {
return <button>test</button>
}
const ColoredButton = withColor(Button)
最後,在我們應用程式的JSX中渲染包裝後的按鈕元件:
function App() {
return (
<div className="App">
<h1>Hello</h1>
<ColoredButton />
</div>
)
}
雖然這只是一個非常簡單的範例,但希望你能掌握高階元件的概念,並將這些概念應用於更複雜的情境中。