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

Question

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

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} />
      }
    }
    ..
}

因此在这种情况下,包裹的Compie 接收匹配道具,在上面的例子中是匹配的组件MyComponentwithRouterconnect

第二种情况:

connect(mapStateToProps)(withRouter(App));

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

我应该担心深度丑陋的筑巢吗？

如果一个HOC提供的道具被另一个HOC使用,你应该只担心它.假设您在基本组件内直接使用来自HOC的传递道具,则无需担心订单

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

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

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