反应多个高阶组件

Question

我只是发现在我的React项目中使用HOC的惊人好处。

我的问题是在组件上调用多个HOC功能的性能吗？

示例

export default withState(withLabel(withTheme(MyComponent)))

这当然只会render一个组件，但是看我的React Dev工具，我可以看到输出的HOC组件三个级别深。这是要警惕的东西还是在组件上调用多个HOC的方法？

Answer 1

您的语法等同于：

<StateProvider>
  <LabelProvider>
    <ThemeProvider>
      <MyComponent />
    </ThemeProvider>
  </LabelProvider>
</StateProvider>

性能命中将来自这些事件的实施方式。您可能必须看一下它们。

示例：

• 主题提供商HOC通常在React上下文中存储许多颜色和变量。因此，仅在应用程序的根部使用一个就足够了。
• 可以想象您的LabelProvider只是在组件之前添加了额外的跨度，在这种情况下，几乎不用担心
• 像redux这样的状态发展器通常在其下方的组件中注入道具，因此您实际上别无选择，只能在需要状态对象时使用它们。

总而言之，没有艰难的规则。您的主要重点应该在于了解这些事事的作用，并试图限制您的应用程序的不必要的重新订阅。

Answer 2

我不会使用它。了解道具的来源是复杂的，当您查看MyComponent组件时。使用这种模式还有更多缺点。无论如何，如果您决定使用HOC S以正确的方式使用它，例如

const withDetails = Component => {
  const C = props => {
    // do something
  }
  // assign display & wrapped names - easier to debug
  C.displayName = `withRouter(${Component.displayName))`
  C.WrappedComponent = Component;
  return C;
}

而不是使用HOC S，建议查看render props React模式。迈克尔·杰克逊(React-Router Creator(的Use a Render Prop!文章中对此进行了很好的解释。

希望这是有道理的。