渲染道具與 HOC？

Question

我正在嘗試從頭開始學習 React 並對概念有深入的了解！

今天我在搜索 HOC、Render Props 以及兩者之間的區別。 我已經檢查了兩者的渲染時間。 我在 render 中寫了一個console.log('rendered')來檢查瀏覽器控制台中的渲染時間。

HOC：當我使用 HOC 編寫一個可用的組件時，我看到在我為 HOC 和使用 HOC 的組件渲染的道具上的每次更改之后。

渲染道具：在這種情況下，我更改了道具，但只渲染了包裝器組件。 因為使用渲染道具我們只加載一個組件並注入代碼以使用該組件功能！

那么，使用 Render Props 代替 HOC 組件有好處嗎？ 還是 HOC 組件可用且功能強大？

謝謝

Answer 1

HOC 、 Render Props和 now hooks都服務於同一個目的：在組件之間共享有狀態的邏輯。 實際上沒有辦法判斷哪個更好或更差。 一切都取決於您的用例。

---

High Order Components是可組合的。 嵌套它們很容易

const withProps = (Component) => connect(mapState, mapDispatch)(<Component foo='bar' />)

作為 function 的子級是可組合性不好的模式，嵌套看起來很像callback地獄，因為它們需要在jsx塊內執行

const Component = () =>{
    return(
         <Consumer>
             {
               props =>(
                   <ThemeConsumer>
                       {
                           theme => <Child {...props} {...theme} />
                       }
                   </ThemeConsumer>              
               )                  
              }
         </Consumer>
     )
}

---

另一方面， render props很容易設置，樣板更少，並且在大多數情況下更容易推理。

---

鈎子帶來兩全其美

hooks是可組合的，可以輕松嵌套，並且很容易推理原因畢竟它們只是普通的舊functions

const useConfig = () =>{
    const customProps = useCustomProps()
    const theme = useContext(ThemeContext)

    return [customProps, theme]
}

const Component = () =>{
    const [props, theme] = useConfig() 
}

但同樣：沒有最好的模式。 這只是你要在哪里使用它的問題。