渲染道具还是特制？ [英] Render Props vs HOC?

问题描述

我正在努力从头开始学习反应，并对概念有深入的了解！

今天我搜索了一些特别的、渲染道具以及两者之间的区别。我已经检查了两者的渲染时间。我在Render中写入了console.log('rendered')以检查浏览器控制台中的呈现时间。

HOC：当我使用HOC编写可用的组件时，我看到每次为HOC呈现的道具和使用HOC的组件的道具都发生了变化。

渲染道具：在本例中，我更改了道具，但只渲染了包装器组件。因为使用渲染道具时，我们只加载一个组件并注入代码来使用该组件功能！

那么，使用渲染道具而不是临时组件是否有好处呢？或临时组件是否可用且功能强大？

谢谢

推荐答案

HOC、Render Props和现在的hooks都有相同的用途：在组件之间共享状态逻辑。实际上，没有办法区分哪个更好，哪个更差。一切都取决于您的用例。

---

High Order Components是可合成的。很容易嵌套它们

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

子函数是一种不利于可组合性的模式，嵌套看起来很像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() 
}

再说一遍：不存在最佳模式。这只是一个你要在哪里使用它的问题。

这篇关于渲染道具还是特制？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！