哪个 HOC 将包裹另一个。多个 HOC 的包装顺序在 react 中是否重要?我创建了多个 HOC withSocket、withLoadingBar 等。我是否应该担心深层难看的嵌套,它会对组件的性能产生影响吗?
最佳答案
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 的顺序不会影响组件的性能
查看下面的代码和框示例
关于reactjs - 使用 connect 和 withRouter 包装组件的顺序重要吗,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49384270/