reactjs - 使用 connect 和 withRouter 包装组件的顺序重要吗

Question

哪个 HOC 将包裹另一个。多个 HOC 的包装顺序在 react 中是否重要？我创建了多个 HOC withSocket、withLoadingBar 等。我是否应该担心深层难看的嵌套，它会对组件的性能产生影响吗？

Answer 1

Does the order of wrapping with multiple HOCs matter in react or not?

包装 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提供的 Prop 将在 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包裹着 withRouter接收 match 属性，在上面的情况下是被 connect 包装的组件

第二种情况:

connect(mapStateToProps)(withRouter(App));

在这种情况下，由于 connect 包装了 withRouter，因此 withRouter 提供的 props即history, match etc 将不会在 mapStateToProps 中提供由 connect 使用如果 parent 没有提供。

Should I be worry about deep ugly nesting?

只有当一个 HOC 提供的 props 被另一个 HOC 使用时，你才应该担心。假设您直接在基础组件内部使用 HOC 传递的 props，则无需担心顺序

Will it make an impact on performance of component?

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

查看下面的代码和框示例