反应多个高阶组件答案

【问题标题】：React Multiple Higher-Order Components反应多个高阶组件
【发布时间】：2018-04-02 07:09:20
【问题描述】：

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

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

示例

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

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

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

你的语法相当于做：

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

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

例子：

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

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

【讨论】：

【解决方案2】：

我不会使用它。当您查看 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;
}

我建议不要使用HOCs，而是查看render props 反应模式。 Michael Jackson（react-router 创建者）在Use a Render Prop! 文章中对此进行了很好的解释。

希望它有意义。

【讨论】：

这不能回答问题。
FWIW 与任何 HOC 相比，使用渲染道具查找组件中的问题要困难得多。