前端学习笔记-React Hooks-自定义Hooks

自定义Hooks

Hooks 两个核心优点：方便逻辑复用；帮助关注分离。

理论

形式上，要求名字以use开头的函数；语义上，内部使用了其他的hooks；实操上，当作普通函数，该传参传参，该返回返回；
把现有的逻辑提取出来，以方便使逻辑可被重用，一方面也能让代码语义化 易于理解维护。

实例1

发起异步请求 获取数据并显示在界面上。

关注点有3：

1. 请求正确返回时，UI 会如何展现数据；
2. Loading 状态 UI 与交互的差异；
3. 处理请求出错时，UI 会如何展现错误；

流程梳理4：

1. 创建 data，loading，error 这 3 个 state；
2. 请求发出后，设置 loading state 为 true；
3. 请求成功后，将返回的数据放到某个 state 中，并将 loading state 设为 false；
4. 请求失败后，设置 error state 为 true，并将 loading state 设为 false。

（分离前 | 分离后）：状态逻辑被抽离为Hooks函数之后 组件仅需要关注UI

注意有一点错误，useAsync的参数asyncFunction传入之前要包裹一层useCallback，不然每次渲染都会更新函数句柄。

实例2

监听浏览器尺寸与位置相关状态。
如：窗口大小时变化布局；在页面滚动时决定是否显示一个“返回顶部”的按钮。

顾名思义Hooks“钩子”：状态逻辑可绑定在任何可能的数据源上，当数据源变化时组件刷新。

除了窗口大小、滚动条位置这些状态，还有其它一些数据也可以这样操作，比如 cookies，localStorage，sessionStorage, URL，等等