javascript - 渲染 Prop 与 HOC？

Question

我正在尝试从头开始学习 React 并深入了解概念!

今天我在搜索 HOC，Render Props 以及两者之间的区别。我已经检查了两者的渲染时间。我在 render 中写了一个 console.log('rendered') 来检查浏览器控制台中的渲染时间。

HOC:当我使用 HOC 编写一个可用的组件时，我看到在我为 HOC 渲染的 props 和使用 HOC 的组件的每次更改之后。

渲染 Prop :在这种情况下，我已经更改了 Prop ，但只渲染了包装器组件。因为使用 render props 我们只加载一个组件并注入(inject)代码以使用该组件功能!

那么，使用 Render Props 代替 HOC 组件有好处吗？还是 HOC 组件可用且功能强大？

谢谢

Answer 1

HOC、Render Props 和现在的 hooks 都服务于相同的目的:在组件之间共享有状态逻辑 .实际上没有办法判断哪个更好或更差。一切都取决于您的用例。

---

高阶组件 是可组合的。嵌套它们很容易

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

子函数作为一个函数对于可组合性来说是一个糟糕的模式，嵌套看起来很像一个 callback hell ，因为它们需要在 jsx block 中执行

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

---

另一方面，render props 很容易设置，样板文件更少，在大多数情况下更容易推理。

---

Hooks 带来了两全其美的优势

hooks 是可组合的，可以轻松嵌套，并且很容易推理原因毕竟它们只是普通的旧函数

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

  return [customProps, theme]
}

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

但再次强调:没有最佳模式这样的东西。这只是您要在哪里使用它的问题。