Question

哪个HOC将包装另一个。包含多个HOC的顺序是否有反应？我创建了多个HOCs withSocket ， withLoadingBar 等等。我应该担心深度丑陋的嵌套，它会对组件的性能产生影响吗？

Answer 1

多个HOC的包装顺序是否有反应？

由于从一个HOC传递到其子组件的props，因此包装HOC的顺序很重要。请考虑以下示例

const mapStateToProps(state, props) {
   console.log(props.match);
   return {
      match: props.match
   }
}

第一种情况：

withRouter(connect(mapStateToProps)(App));

在这种情况下，由于withRouter包裹了connect，因此withRouter ie history, match etc 提供的道具将在连接使用的mapStateToProps中可用。

想想像HOC一样的

const MyComponent = connect(mapStateToProps)(App);
export default withRouter(MyComponent);

其中withRouter可以像

一样实现

const withRouter = (Comp) => {
    return class Something extends React.Component {
      render() {
         return <Comp match={this.context.router.match} />
      }
    }
    ..
}

所以在这种情况下，用Comp包裹的MyComponent ie withRouter会收到匹配道具，在上面的例子中是{{1}包裹的组件}

第二种情况：

connect

在这种情况下，由于connect包装了withRouter，connect(mapStateToProps)(withRouter(App));提供的道具即withRouter 将不会在history, match etc {/ 1}}中使用如果它们不是由父母提供的。

我应该担心深陷难看的巢穴吗？

如果一个HOC提供的道具被另一个人使用，你应该只担心它。假如你在基础组件内直接使用来自HOC的传递道具，你不必担心订单

它会对组件的性能产生影响吗？

使用HOC的顺序不会影响组件性能

检查以下代码框以获取示例

Answer 2

React是关于组合的，在大多数情况下，它根本不应该是性能问题。在您真正意识到性能问题之前不要担心。嵌套HOC也没关系。你唯一需要考虑的是当其中一个HOC消耗道具由另一个HOC注入时。这是例如如果react-router中需要mapStateToProps url params来id选择对象，则需要这种情况。然后，您需要首先应用connect() HOC，然后才应用withRouter() HOC来访问包装组件的match中的ownProps对象。

使用connect和withRouter组件包装组件的顺序

2 个答案: