![低代码平台开发实践:基于React](https://wfqqreader-1252317822.image.myqcloud.com/cover/617/50417617/b_50417617.jpg)
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人
1.3.5 自定义Hooks
如果在多个组件中使用了相同的useEffect或useState逻辑,推荐将这些相同的逻辑封装到函数中,这类函数被称为自定义Hooks。下面举3个自定义Hooks的示例。
1.usePrevVal
usePrevVal的功能是获取状态上一次的值,它利用了Ref的可变性,以及effect在DOM被绘制到屏幕上才执行的特性。
![](https://epubservercos.yuewen.com/10262B/29686504404601406/epubprivate/OEBPS/Images/978-7-111-74689-8_25_02.jpg?sign=1739242675-TyJdmZhYmCPzODM2aQ300Tq3rVpghbRX-0-87c2b3c00fae8965f85c8ac9fed0f979)
2.useVisible
useVisible的功能是检测DOM元素是否在浏览器视口内,它在effect中创建observer来异步观察目标元素是否与顶级文档视口相交。
![](https://epubservercos.yuewen.com/10262B/29686504404601406/epubprivate/OEBPS/Images/978-7-111-74689-8_26_01.jpg?sign=1739242675-FYCGvRYhYPBSWtqRYbUmzRS6EAvmFuWV-0-83910963bd26cce9c29e35d837f3edd6)
3.useForceUpdate
useForceUpdate是返回一个让组件重新渲染的函数。
![](https://epubservercos.yuewen.com/10262B/29686504404601406/epubprivate/OEBPS/Images/978-7-111-74689-8_26_02.jpg?sign=1739242675-JHLtObgfzNS04jmu8PwfdnWoNCOwlqai-0-acc4999829d74bbadb8d58842b814330)