javascript - react 多个高阶组件

Question

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

我的问题是在一个组件上调用多个 HOC 函数会影响性能吗？

示例

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

这当然只会渲染一个组件，但是看看我的 react 开发工具，我可以看到输出的 HOC 组件有三个层次。这是需要警惕的事情还是有更好的方法在组件上调用多个 HOC？

Answer 1

你的语法相当于做:

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

性能影响将取决于这些 HOC 的实现方式。您可能必须逐一查看。

例子:

• Theme Provider HOC 通常在 React 上下文中存储一堆颜色和变量。因此，在您的应用程序的最根部使用一个就足够了。
• 可以想象您的 LabelProvider 只是在您的组件之前添加一个额外的跨度，在这种情况下几乎没有什么可担心的
• 像 redux 这样的 StateProvider 通常会在它们下面的组件中注入(inject) props，因此您别无选择，只能在需要状态对象时使用它们。

总而言之，没有硬性规定。您的主要关注点应该是了解这些 HOC 的作用，并尝试限制不必要的应用重新渲染。