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

  • Z时代
  • 2024-01-10
  • 分类：问答

哪个HOC将包装另一个。带有多个HOC的换行顺序是否起作用？我已经用 ， 等创建了多个

。是否应该担心深层的丑陋嵌套，这会对组件的性能产生影响吗？

回答：

带有多个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的顺序不影响组件性能

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

编辑简单状态包装器

以上是 用connect和withRouter包装组件的顺序是否重要 的全部内容， 来源链接： utcz.com/qa/414149.html

回到顶部