本文将介绍一个自用较为频繁，且较为优秀的npm包jappwilson-react-load-mask的使用教程，并分享其深度技术原理及其应用价值。本文的目标读者为有基础的前端开发同学。
什么是jappwilson-react-load-mask
jappwilson-react-load-mask是一个轻巧且易于使用的开源npm包，基于react hooks封装，实现了前端UI组件开发中常用的网页遮罩的功能。jappwilson-react-load-mask具备以下优点：
- react hook封装，使用起来更加便捷。
- 轻量级，安装便捷。
- 自定义性更高，可以较好的满足用户特定需求。
如何使用jappwilson-react-load-mask
安装
通过 npm 安装 （推荐）：
npm install jappwilson-react-load-mask
或者通过 yarn 安装：
yarn add jappwilson-react-load-mask
使用
使用jappwilson-react-load-mask非常简单，只需要用LoadMask组件将需要遮罩的组件包封起来就行了，例如：
-- -------------------- ---- -------
------ ----- ---- -------
------ -------- ---- ----------------------------
-------- ------ -
----- --------- ----------- - ---------------------
------ -
--------- ------------------
---------- -----------
-----------
-
-传递一个简单的loading属性，组件会做好其余事情。简单，对吧？
在这里，我们可以通过loading这一属性决定是否展示遮罩。我们还可以添加自定义的loadIcon和loadDescription，定义更为美观的遮罩框架，例如：
-- -------------------- ---- -------
------ ----- ---- -------
------ -------- ---- ----------------------------
-------- ----------------- -
----- --------- ----------- - ---------------------
------ -
--------- ----------------- ------------ ------------- ---------- ------- ------------ --------------------------------------
---------- -----------
-----------
-
-你的许多场景只使用默认旋转器和文本，因此请记住使用这种方法来选择一种自定义的外观。
深度技术原理
现在，我们来深入了解jappwilson-react-load-mask的实现原理。因为基于react hooks封装，我们重点来学习这个封装过程。
-- -------------------- ---- -------
------ ----- ---- -------
------ ------- -------- ----------
------- - ------
-------- - ----------------------
--------------- - ------
--------
-- -
-- ---------- -
------ --------
-
------ -
---- -------- --------- ---------- ---
---- -------- --------- ----------- ---- -- ----- -- ------ -- ------- -- ----------- -------- -- -- ------ ------- ----- ---------
---- -------- ------ ------- ------- ------- --------- ----------- -------- ------- ----------- --------- --------------- --------- ------- ----- ---
---- -------- -------- ------- -------------- --------- ----------- -------- ---
----------
-----------------
------
------
----------
------
-
-组件代码如上，简单明了。我们提出其中一些值得深入研究的点：
- 组件内部返回children，若不需要遮罩，则直接返回children，在children前面和children后面加上遮罩的div，实现遮罩的效果。
- 将自定义的loadIcon和loadDescription加入遮罩中，属性loading的值为true时显示遮罩，属性loading的值为false时隐藏遮罩。
- 遮罩的样式很好地运用了CSS，将div框架与CSS垂直中心的属性放到父div中，在遮罩元素引入z-index实现一定流畅的模态框效果。
真正的威力正在于上面的点，这是最值得注意的：
- 这是使用了React Hooks中的useEffect和useState，其中绑定的状态设置为loading,我们在后面的调用中约定好了它的默认值以及一些自定义需求。
那就是全部了。如果你想深入了解React Hooks的使用，这里是一个很好的练习和开端！
应用场景和价值
jappwilson-react-load-mask作为一个轻量级的遮罩组件，具有较大的应用场景和价值，可以被广泛应用于以下一些方面：
- 加载页面或数据时的遮罩。
第一个应用场景是在页面或组件加载数据时，实现更良好的UI体验。常常展示在加载进来的接口数据loading图像，直到数据读取完毕。普遍应用在Api调用后 waiting 的等待时间处理。效果大家可以去看看Figma/Material Design/Design System/Google等项目统一定义的loading/加载时候的UI效果。这些场景变通也可以使用这个组件的效果。
- 安全抹黑
第二个应用场景是为了着力于用户数据的保密性，我们可以让敏感数据在加载的时候.Mask。 这个方案可以放置一些未授权查询数据库的恶意攻击。 示例：使用前，请检查授权函数/大力默写 -“网络、数据、安全/”书籍中的一些技术原理（加盐/黑白糖/“授权”的同义词是“认证”）。这是一个基于延迟loadingData的健壮的方案。常常使用loading组件将等待时间推迟到视觉加载前面来完美处理。
- 长数据请求时候的优化。
第三个应用场景是在执行大量数据，请求数量时，实现更好的操作手感。 即一个页面/组件，含有多个请求数据的API。如果同时使用了loading是不合适的，其改为实现：分批加载+loading状态的交替展示，这样比较符合“长数据”请求的习惯，适合于数据量较大的项目。
- 特定数据项和操作的回填。
针对某些特定数据项和操作的回填，如表单数据保护、操作数据的加密存储等，可以使用此组件对在传输过程中的敏感数据项进行遮盖，增加了隐私保护。特别是敏感数据，被正常人员可访问时，容易引发一系列安全问题。此时，jappwilson-react-load-mask组件恰好有作用。
总结
jappwilson-react-load-mask提供了一种方便且稳固的方法，可在需要的时候简单而优雅地改善视觉效果。我们在此宣传的技能，希望大家能基于组件灵活创新外壳，创意无限。
源码及其更多示例可参见npm官方文档，祝大家愉快地学习！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005524e81e8991b448cfd55