渲染道具vs HOC？

提问者：小点点

我试图从头开始学习React，并对概念有深入的了解！

今天我在搜索HOC，渲染道具和两者之间的区别。我已经检查了渲染时间。我写了一个console.log（渲染）到渲染检查渲染时间在浏览器控制台。

HOC：当我使用HOC编写一个可用组件时，我看到在每次为HOC和使用HOC的组件渲染道具时都会发生更改。

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

那么，使用渲染道具而不是HOC组件是否有好处？或者说HOC组件是可用且强大的？

谢啦

共1个答案

匿名用户

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

高阶组件是可组合的。筑巢很容易

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

子函数作为一个函数是一种不好的可组合性模式，嵌套看起来很像回调地狱，因为它们需要在jsx块中执行

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

另一方面，渲染道具设置简单，样板文件少，在大多数情况下更容易推理。

钩子带来了两个世界的精华

钩子是可组合的，可以很容易地嵌套，并且很容易解释原因，毕竟它们只是普通的老式函数

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

    return [customProps, theme]
}

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

但是再次强调：没有最好的模式。这只是你打算在哪里使用它的问题。