带有多个HOC的换行顺序是否起作用？

包装HOC的顺序很重要，因为道具是从一个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} />
      }
    }
    ..
}

因此，在这种情况下，用包裹的Compie
接收匹配道具，在上述情况下，该道具就是被包裹的组件MyComponent``withRouter``connect

第二种情况：

connect(mapStateToProps)(withRouter(App));

在自连接包裹的withRouter这种情况下，所提供的道具withRouter，即history, match etc 不会
在提供mapStateToProps所用connect，如果由父不提供他们。

我应该担心深层的丑陋嵌套吗？

您仅应担心一个HOC提供的道具被另一个HOC使用。假设您直接在基本组件内部使用HOC传递的道具，则无需担心订单

会影响组件的性能吗？

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

查看以下代码和框以获取示例