react封装自定义Hooks完成日常loading与error俘获，以及登录状态管理useContext代替redux

封装自定义Hooks完成loading以及俘获失败功能

我们知道，一般我们用户交互都是有loading，以及接口报错，那么是否我们之前写的代码都是类似于，网络请求前setloading(true)，返回结果在setLoading(false)，报错的时候我们是俘获catch然后setError(err.response.data.message)等等的操作，那么当我们有多个请求方法的时候，这样写未必太过繁杂。

思路： 将loading的状态，error的状态，以及网络请求封装到一个hooks，不改变请求，只管理loading，error的状态，如图

我们需要管理的三个状态，一个data，一个status，一个error。
data视情况用到，目前我暂时没用到。

先看整体结构

setData是成功时调用的，setError时失败是调用的，他们的目的都是

控制error与status的状态。

最关键是这个sendHttp，他接受一个异步函数，这个函数就放着我们的异步请求，然后不会做任何更改，成功返回成功得值，失败返回失败的值，而且返回的依然是pormise。只是在中间调用了setData,或者setError，改变了status与error的状态。

看看怎么使用

不会影响我们自己的逻辑，可以调用sendHttp传入请求方法后，继续写我们自己的逻辑，然后isLoading,与error会自动帮我们俘获状态。
直接使用即可。这样我们就少了很多setLoading这样的代码。

复用性也很强，看在另一个组件里面使用

可以看到由hooks抽离后的组件变得异常整洁。而且复用性强，这就是hooks的强大之处。

登录状态管理代替redux

直接定义一个Provier组件，然后将值通过value传进去，使用的时候只要

将app包裹起来，这样这四个值就会传递我们app下的所有子组件，在定义一个hooks拿到这四个值

不熟悉useContext可以看看官网。

然后在我们页面就可以通过useAuth拿到这些值。

错误边界处理

相信很多小伙伴都会遇到这个问题，整个组件直接卸载掉。（开发环境会报错，线上环境直接gg）
线上环境的时候，会导致直接空屏。
react也提供了一个错误边界让我们处理这种东西，getDerivedStateFromError,这是一个可以在俘获到错误执行的回调函数，通过他我们可以渲染出对应的错误处理组件。
如图

我们可以通过state中的error来决定我们渲染的组件。如果有错误，就会调用getDerviedStateFromError回调函数来更新state值，然后渲染我们的错误处理组件。接受error这个报错信息。
使用：

直接在外面包裹一层，这样触发error就会触发。
我们直接打包然后在本地试试

会直接渲染这个。这样我们就处理完成了。

why-did-you-render（快速排查死循环问题）

我们写react组件的时候，如果依赖用的不好，很容易造成死循环，当变量过多的时候，我们要排查就会很麻烦。github有个库挺不错，就叫做why-did-you-render
看使用
yarn add welldone-software/why-did-you-render

这里我们可以控制让他track所有组件还是单独组件。false是关闭检查所有组件，
然后

在index.tsx上引用。
最后死循环的时候就会给我们在控制台打印错误信息。

也可以只检查单独一个组件，设置组件的whuDidYouRender属性为true即可。

useSearchParams的使用

像这种params，可以使用useSearchParams来控制，
用法就是，通过searchParams.get(key)来获取值，比如searchParams.get(‘name’)就可以获取，而通过searchParams.set()就可以手动更改Url上的值。
然后监听该值的变化从而发送网络请求即可。

Select组件再封装

先看接口定义，上面的React.ComponentProps< typeof Select>会获取antd的Select的所有属性，而我们需要重写value,onchange,以及options，所以使用Omit将其中的options,value,onchange去掉。

使用