Redux高階組件與容器組件相同

我試圖圍繞高階組件包裝我的頭，這些與Redux容器組件相同。另外推薦的方式是通過擴展React.Component的類或者在redux站點中沒有的類來編寫更高階的組件（容器組件）。Redux高階組件與容器組件相同

2017-02-17 tmp dev

關於這個問題寫了so much，所以我只想簡單地解釋一下這個概念以及它如何與Redux相關。

您可以將HOC視爲增強器（或「裝飾器」）。它需要一個現有的組件並返回一個新的，改進的組件。常見的任務是：注入道具，組成，改變它呈現的方式等。

它通常作爲一個函數實現：獲取一個組件，產生另一個組件。模式可能會有所不同，取決於您的目標和需求。

你可以擴展包組件：

function hoc(WrappedComponent) { 
    return class HOC extends WrappedComponent { 
     render() { 
      return super.render(); 
     } 
    } 
}

或撰寫的包裹組件：

function hoc(WrappedComponent) { 
    return class HOC extends React.Component { 
     render() { 
      return (<WrappedComponent {...this.props} extraProp={1} />) 
     } 
    } 
}

，如果你想使事情變得簡單，不需要完整的生命週期，您也可以使用無狀態組件：

function hoc(WrappedComponent) { 
    return (props) => (<WrappedComponent {...props} extraProp={1} />); 
}

我建議您閱讀this以獲得更深入的瞭解。現在

，這個概念是不是加上終極版，但終極版不使用它。
connect()實際上是一個HOC，在包裝組件和商店之間進行連線（注入道具並負責重新渲染）。它需要您的表示組件並返回一個連接組件。
容器（「連接」）組件實際上是增強組件。

所以要說清楚：Post是一個組件，我們使用HOC connect()來創建增強組件PostContainer。

來源

2017-02-18 09:16:50

爲了澄清它似乎暗示的答案是，雖然Redux鼓勵容器本身是HOC的，但它不應該阻止你在Redux容器上寫一個HOC，如果它有意義的話 - 是正確的嗎？（這也是我很好奇的） – aug

@aug我認爲容器是HOC的*輸出*會更準確。您絕對可以使用多個HOC來增強組件，無論它是否爲容器。 –

Redux高階組件與容器組件相同

回答

相關問題