React useRequest解读

React useRequest解读_第1张图片

源码结构:

React useRequest解读_第2张图片

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

useRequest.ts

React useRequest解读_第3张图片

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

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

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

useRequestImplement.ts

入参:

React useRequest解读_第4张图片

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

React useRequest解读_第5张图片

React useRequest解读_第6张图片

React useRequest解读_第7张图片React useRequest解读_第8张图片

出参:

React useRequest解读_第9张图片

学习体会:

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

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

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

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

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

React useRequest解读_第10张图片

React useRequest解读_第11张图片

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

React useRequest解读_第12张图片

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

最终返回类似Hooks的类

React useRequest解读_第13张图片React useRequest解读_第14张图片React useRequest解读_第15张图片

你可能感兴趣的:(react.js,前端,hook)