React useRequest解读

源码结构:

可以看到虽然是一个hooks(具有一定功能且具备状态的单一函数) 但是各种文件功能分得也是很细的,方便抽离和复用

useRequest.ts

抽离的原则还是单一功能原则

可以看出 真正的hooks实现是在Implement里

对于类型type的引入 我们需要显示声明这是import type

useRequestImplement.ts

入参:

不明确类型的参数都可以用泛型占位定义  泛型可以用在interface/type/class/fn作为参数传入

出参:

学习体会:

从useRequest源码中我们可以学到哪些东西?

1.非常清晰的功能划分,比如纯入口文件,很明确的参数配置(useRequest.ts)只有入参和出参

2.各个功能都单独抽离成了Plugin并结合各种钩子函数处理数据和返回数据

3.很巧妙是使用了setState({})来手动刷新视图

4.借助了后台AOP切面思想设计onBefore等生命周期函数来变更请求状态,处理请求前和请求后数据

5.借助class类来承载各种属性和方法 并通过state和setState来串联模拟class的响应式。尤其是状态的更新

6.充分利用了函数式组件的生命周期特征来实现具体逻辑 并借助useEffect,useMemo来模拟组件生命周期

最终返回类似Hooks的类

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值