javascript - react 多个高阶成分

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

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

示例

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

当然，这只会render一个组件，但是看着我的react dev工具，我可以看到输出的HOC组件深达三个级别。这是值得警惕的还是在组件上调用多个HOC的更好方法？

最佳答案

我不会用的。当您查看MyComponent组件时，要理解 Prop 的来源很复杂。使用此模式还有很多缺点。无论如何，如果您决定使用HOC，请以正确的方式使用它，例如

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 react模式，而不要使用render props。迈克尔· jackson ( react 路由器的创造者)在 Use a Render Prop! 文章中对此进行了很好的解释。

希望有道理。

关于javascript - react 多个高阶成分，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49606846/