1. 问题场景
在实际开发中我们会遇到一个遮罩层会受到多个组件的操作影响，如果我们不采用 redux 之类的全局状态管理，而是选择组件之间的值传递，我们就会发现使用组件的变量来控制组件的显示和隐藏很不方便，更不要说像遮罩层这样一个项目多处使用的公共组件，他的隐藏和显示也只能放到某一个模块的 redux 中，还要解决遮罩层在ScrollView内，会在IOS显示不全，等等bug的问题，可以说烦不胜烦。文章来源地址https://www.toymoban.com/news/detail-726945.html
2. 解决办法
- 使用当前页面模块的 redux 来管理当前页面中的遮罩层；
- 使用 useReducer 来管理当前页面中的遮罩层；
- 使用 hook 来实现遮罩层的清除和添加。
3. 方案分析
- 方案一和方案二其实原理都一样，就是将控制遮罩层的变量集中管理，但是缺点也很明显，就是我们需要多少遮罩层，就会创建多少个变量，维护这些变量来控制遮罩层的显示与隐藏。维护多变量控制多遮罩层。
- 方案三我采用的是使用一个变量来接收遮罩层，通过改变变量的值来实现遮罩层的显示与隐藏。维护单一变量。
4. 保存 hook 初始化配置
- 在 hook 初始化时，使用 useRef 对初始化配置进行记录；
- 防止对 options 改变时，没有及时更新，因此监听 options，发生变化时，对初始化配置进行更新。
let文章来源：https://www.toymoban.com/news/detail-726945.html
到了这里，关于【taro react】 ---- 常用自定义 React Hooks 的实现【四】之遮罩层的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
