使用 connect 和 withRouter 包装组件的顺序是否重要

Question

哪个 HOC 将包装另一个。用多个 HOC 包装的顺序在反应中是否重要？我已经创建了多个 HOC withSocket、withLoadingBar 等等。我是否应该担心深度丑陋的嵌套，它会影响组件的性能吗？

Answer 1

React 完全是关于组合的，在大多数情况下，它根本不应该是性能问题。在您真正察觉到性能问题之前，不要担心它。嵌套 HOC 也很好。您唯一需要考虑的是其中一个 HOC 消耗了另一个 HOC 注入的道具。这是例如当你需要 react-router url 参数到 mapStateToProps 到 select 对象时的情况 id。然后您需要先应用 connect() HOC，然后才应用 withRouter() HOC 以访问包装组件的 ownProps 中的 match 对象。

Answer 2

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

包装 HOC 的顺序很重要，因为 props 从一个 HOC 传递到它的 child 组件。考虑以下示例

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 即用 withRouter 包裹的 MyComponent 接收匹配道具，在上面的例子中是被 [= 包裹的组件16=]

第二种情况：

connect(mapStateToProps)(withRouter(App));

在这种情况下，由于连接包装了 withRouter，withRouter 提供的道具即 history, match etc 将不会 在 mapStateToProps 中可用如果 parent.

未提供，则由 connect 使用

Should I be worry about deep ugly nesting?

只有当一个 HOC 提供的 props 被另一个 HOC 使用时，你才应该担心它。假设你直接在基础组件中使用 HOC 传递下来的 props，你就不需要担心顺序

Will it make an impact on performance of component?

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

查看下面的代码和框作为示例

使用 connect 和 withRouter 包装组件的顺序是否重要

Does order in which you wrap component with connect and withRouter matter

reactjs

react-router

react-redux

react-router-v4