react+ant design pro得首次使用

本文介绍了在React中使用Ant Design Pro时,针对有状态和无状态组件如何利用@connect和connect进行数据连接。同时,讨论了通过dispatch触发model获取接口数据的两种方式:一种是通过reducers更新state并直接使用,另一种是利用callback回调直接改变组件状态。需要注意,当使用props获取数据时,setState在render中可能失效。
摘要由CSDN通过智能技术生成

react里面components + model连接数据的方式有两种

  • 如果组件属于有状态组件,也就是类组件,则用@connect连接,这里值得是使用装饰器
@connect(({ saleProduct, distributor, loading }) => ({
  saleProduct,
  saleProductList: saleProduct.saleProductList,
  currentAccountDistributorList: distributor.currentAccountDistributorList,
  loadingSaleProductList: loading.effects['saleProduct/fetchSaleProductList'],
}))

@connect(({namespace})=>({namespace}))

  • 如果组件属于无状态组件,也就是函数组件,则用connect连接,这里值得是高阶函数连接
export default connect(({ setting }) => ({
  contentWidth: setting.contentWidth,
}))(PageHeaderWrapper);

connect((namespace)=>({namespace})(componentsName))

react里面取接口数据的方式  

  • 通过dispath触发model,然后model触发serves,然后serves返回response,然后reducers合并数据,更新
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值