反应多个高阶组件

Question

我刚刚发现在我的反应项目中使用HOC的惊人好处.

我的问题是在组件上调用多个HOC函数是否有任何性能损失？

例

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

这当然只有render一个组件,但是看看我的反应开发工具,我可以看到输出的HOC组件三层深.这是否需要警惕,或者是否有更好的方法来调用组件上的多个HOC？

Answer 1

你的语法相当于做：

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

性能影响将来自这些 HOC 的实现方式。您可能必须查看它们中的每一个。

例子：

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

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

Answer 2

我不会用那个。当您查看组件时，理解 props 从哪里来是很复杂的MyComponent。使用这种模式还有更多的缺点。无论如何，如果您决定使用HOCs，请以正确的方式使用它，例如

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;
}

建议不要使用HOCsi，而是查看render propsReact 模式。Use a Render Prop!Michael Jackson（反应路由器创建者）的一篇文章对此进行了很好的解释。

希望这是有道理的。