渲染道具还是特制?

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

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

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

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

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

谢谢


解决方案

HOCRender 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() 
}

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

相关文章