专业网站设计公司行业定制网站+域名+企业邮箱

1. 问题场景

在实际开发中我们会遇到一个遮罩层会受到多个组件的操作影响，如果我们不采用 redux 之类的全局状态管理，而是选择组件之间的值传递，我们就会发现使用组件的变量来控制组件的显示和隐藏很不方便，更不要说像遮罩层这样一个项目多处使用的公共组件，他的隐藏和显示也只能放到某一个模块的 redux 中，还要解决遮罩层在ScrollView内，会在IOS显示不全，等等bug的问题，可以说烦不胜烦。

2. 解决办法

1. 使用当前页面模块的 redux 来管理当前页面中的遮罩层；
2. 使用 useReducer 来管理当前页面中的遮罩层；
3. 使用 hook 来实现遮罩层的清除和添加。

3. 方案分析

1. 方案一和方案二其实原理都一样，就是将控制遮罩层的变量集中管理，但是缺点也很明显，就是我们需要多少遮罩层，就会创建多少个变量，维护这些变量来控制遮罩层的显示与隐藏。维护多变量控制多遮罩层。
2. 方案三我采用的是使用一个变量来接收遮罩层，通过改变变量的值来实现遮罩层的显示与隐藏。维护单一变量。

4. 保存 hook 初始化配置

1. 在 hook 初始化时，使用 useRef 对初始化配置进行记录；
2. 防止对 options 改变时，没有及时更新，因此监听 options，发生变化时，对初始化配置进行更新。

  let