前端hooks使用

为啥使用hooks（组件之间的状态复用 并且提升代码可读性）🤔️🤔️🤔️

react的hooks使用 直接上库ahooks

• http的请求阶段useRequest 当提交业务请求的时候的需要给与用户的操作反馈一定就需要loading态与success与error三种状态，直接使用useRequest减少状态的声明提升代码的简洁性与刻度性以及提升用户体验

graph TD
请求 --> 
loading态--->error
loading态--->success

const { loading, run } = useRequest(changeUsername, {
  manual: true  //是否手动调用
});

• dom操作

  useEventListener 类似在组件挂载后使用addEventListener注册，组件卸载时自动删除 EventListener 提升代码的简洁性

• 体验提升类

  useUrlState 存储的数据相对较少的时候可以使用该hooks把数据存储在url上面通过浏览器的history存储对应浏览数据

  类似场景：数据编辑时从在表单列表进行跳转到编辑页面进行编辑，完成后回到列表页

      graph TD
      列表 --> 编辑页 -->列表
  

  完成编辑后回退到列表页时候希望能够保存当前的查询状态，可以把列表搜索数据useUrlState进行同步，编辑完成后直接回退到当前页面即可保存搜索状态