react--高阶组件connect

最新推荐文章于 2025-06-01 09:07:23 发布

贼猫子

最新推荐文章于 2025-06-01 09:07:23 发布

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react

本文链接：https://blog.youkuaiyun.com/weixin_41700532/article/details/105984239

react 专栏收录该内容

1 篇文章

订阅专栏

本文详细解析了Redux中connect高阶组件的使用方法，包括其参数mapStateToProps、mapDispatchToProps、mergeProps和options的作用，以及如何在函数组件和类组件中应用。通过实例展示了如何映射store状态到组件属性，帮助开发者更好地理解和使用Redux。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

connect串联model跟组件；connect这个函数本身可以传参，映射store的属性；

connect() 接收四个参数，它们分别是mapStateToProps ， mapDispatchToProps ， mergeProps 和 options。

const mapStateToProps = (state)=>{return {num:state.num;} }
export default connect(mapStateToProps)(组件名称)

state是model的state，项目开发中会直接解构；比如：

export default connect(({num,login})=>({num,login}))(组件名称)
@connect(({num,login})=>({num,login}))

两种写法意义是一样的，都是串联model跟组件；不同点：

前者是在函数组件中使用，后者是在类组件用，主要是因为函数组件内不能用@修饰器；
写的位置；前者是写在最后面，后者写在class类前

用的时候你会发现页面有警告，这个是因为experimentalDecorators没有开启，用了typescript装饰器；打开vscode的setting，搜索experimentalDecorators，改为true就可以了

Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.ts(1219)

具体使用方法this.props.xx

@connect(({loading})=>({load:loading}))
class Test extends PureComponent {
  render() {
    const { load } = this.props;
    return (
      <Spin spinning = {load}></Spin>
    )
 }