higher order components

什麼是組合，為什麼它是React應用中的關鍵概念？ 在程式設計中，組合允許您通過結合小而專注的函數來構建更複雜的功能。 例如，想象使用map()從初始數組創建新的數組，然後使用filter()過濾結果： const list = ['Apple', 'Orange', 'Egg'] list.map(item => item[0]).filter(item => item === 'A') //'A' 在React中，組合使您能夠享受一些很棒的優勢。 您可以創建小而精簡的組件，並使用它們來組合更多的功能。該怎麼做呢？ 創建組件的專用版本 使用外部組件來擴展和專門化一個更通用的組件： const Button = props => { return <button>{props.text}</button> } const SubmitButton = () => { return <Button text="Submit" /> } const LoginButton = () => { return <Button text="Login" /> } 將方法作為props傳遞 組件可以專注於跟蹤點擊事件，例如，當點擊事件發生時，實際發生的事情由容器組件決定： const Button = props => { return <button onClick={props.onClickHandler}>{props.text}</button> } const LoginButton = props => { return <Button text="Login" onClickHandler={props....

了解什麼是高階元件，以及在開發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> ) } 雖然這只是一個非常簡單的範例，但希望你能掌握高階元件的概念，並將這些概念應用於更複雜的情境中。