当前位置: 首页 > news >正文

【taro react】 ---- 常用自定义 React Hooks 的实现【四】之遮罩层

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

相关文章:

【taro react】 ---- 常用自定义 React Hooks 的实现【四】之遮罩层

1. 问题场景 在实际开发中我们会遇到一个遮罩层会受到多个组件的操作影响,如果我们不采用 redux 之类的全局状态管理,而是选择组件之间的值传递,我们就会发现使用组件的变量来控制组件的显示和隐藏很不方便,更不要说像遮罩层这样一个项目多处使用的公共组件,他的隐藏和显示…...

【git】git命令行

首先要了解git整个流程的一个分类: workspace:工作区staging area:暂存区/缓存区local repository:版本库或本地仓库remote repository:远程仓库 创建仓库 git clone gitgithub.comxxxxxxxxxxxx//拷贝一份远程仓库 …...

centos8 jenkins 搭建和使用

一、安装jenkins 直接war包搭建下载地址:https://get.jenkins.io/war-stable/ 下载稳定长期版本 二、jenkins 启动依赖java, 安装java sdk ,好像支持java 11和17版本,21版本不支持会报错 下载sdk地址,https://www.oracle.com/j…...

Hive实战(03)-深入了解Hive JDBC:在大数据世界中实现数据交互

在大数据领域,Hive作为一种数据仓库解决方案,为用户提供了一种SQL接口来查询和分析存储在Hadoop集群中的数据。为了更灵活地与Hive进行交互,我们可以使用Hive JDBC(Java Database Connectivity)驱动程序。本文将深入探…...

SQL开发笔记之专栏介绍

Sql是用于访问和处理数据库的标准计算机语言,使用SQL访问和处理数据系统中的数据,这类数据库包括:Mysql、PostgresSql、Oracle、Sybase、DB2等等,数据库无非围绕着“增删改查”的核心业务进行开发。并且目前绝大多数的后端程序开发…...

华为OD机考算法题:找终点

目录 题目部分 解读与分析 代码实现 题目部分 题目找终点难度易题目说明给定一个正整数数组,设为nums,最大为100个成员,求从第一个成员开始,正好走到数组最后一个成员,所使用的最少步骤数。 要求: 1.第…...

el-table通过scope.row获取表格每列的值,以及scope.$index

<el-table-column type"selection" width"55"></el-table-column><el-table-column prop"id" label"ID" width"80"></el-table-column><el-table-column prop"name" label"文件名…...

uni-app:本地缓存的使用

uni-app 提供了多种方法用于本地缓存的操作。下面是一些常用的 uni-app 本地缓存方法&#xff1a; uni.setStorageSync(key, data): 同步方式将数据存储到本地缓存中&#xff0c;可以使用对应的 key 来获取该数据。 uni.setStorage({key, data}): 异步方式将数据存储到本地缓存…...

在Scrum敏捷开发中,开发人员(Developers)的职责

在Scrum敏捷开发中&#xff0c;开发人员&#xff08;Developers&#xff09;是Scrum团队中最重要的角色之一&#xff0c;负责产品的开发和交付&#xff0c;其重要性不言而喻。 那开发人员的职责和需要参加的活动是什么呢&#xff1f; Developers核心职责&#xff1a; 承诺并完…...

SOLIDWORKS® 2024 新功能 - 3D CAD

1、 先前版本的兼容性 • 利用您订阅的 SOLIDWORKS&#xff0c;可将您的 SOLIDWORKS 设计作品保存为旧版本&#xff0c;与使用旧版本 SOLIDWORKS 的供应商无缝协作。 • 可将零件、装配体和工程图保存为新版本前两年之内的SOLIDWORKS 版本。 优点&#xff1a; 即使其他用户正…...

系统架构设计:20 论软件需求管理

目录 一 需求工程 1 需求开发 1.1 需求获取 1.1.1 软件需求的分类 1.1.2 需求获取方法...

K8S云计算系列-(2)

1.Kubernetes平台配置实战 部署Kubernetes云计算平台&#xff0c;至少准备两台服务器&#xff0c;服务器CPU至少2C&#xff0c;内存4G&#xff0c;环境如下所示&#xff1a; Kubernetes Master节点&#xff1a;192.168.1.146 Kubernetes Minion节点&#xff1a;192.168.1.147…...

通讯录(C语言版)

用c语言实现一个通讯录 功能&#xff1a;.添加、删除、查找、更改、显示、排序联系人 内存存储方式&#xff1a;结构体数组 1.打印菜单&#xff0c;各个功能分别用函数实现&#xff0c;将函数声明放在头文件中。 2.定义联系人信息&#xff0c;将联系人信息与count&#xff…...

natapp内网穿透-将本地运行的程序/服务器通过公网IP供其它人访问

文章目录 1.几个基本概念1.1 局域网1.2 内网1.3 内网穿透1.4 Natapp 2.搭建内网穿透环境3.本地服务测试 1.几个基本概念 1.1 局域网 LAN&#xff08;Local Area Network&#xff0c;局域网&#xff09;是一个可连接住宅&#xff0c;学校&#xff0c;实验室&#xff0c;大学校…...

数据结构八大排序Java源码

文章目录 [1]. 堆排序[2]. 冒泡排序[3]. 选择排序[4]. &#xff08;直接&#xff09;插入排序[5]. 希尔排序&#xff08;属于插入算法&#xff09;[6]. 快速排序[7]. 归并排序[8]. 基数排序 王道数据结构排序讲解 排序算法最佳时间复杂度最坏时间复杂度平均时间复杂度空间复杂度…...

区块链加密虚拟货币交易平台安全解决方案

区块链机密货币交易锁遭入侵&#xff0c;安全存在隐患。使用泰雷兹Protect server HSM加密机&#xff0c;多方位保护您的数据&#xff0c;并通过集中化管理&#xff0c;安全的存储密钥。 引文部分&#xff1a; 损失7000万美元!黑客入侵香港区块链加密货币交易所 2023年9月&…...

【SoC FPGA】HPS启动过程

SoC HPS启动流程 Boot ROMPreloaderBoot Loader HPS的启动是一个多阶段的过程&#xff0c;每一个阶段都会完成对应的工作并且将下一个阶段的执行代码引导起来。每个阶段均负责加载下一个阶段。第一个软件阶段是引导 ROM&#xff0c;引导 ROM 代码查找并且执行称为预加载器的第 …...

Wireshark CLI | Mergecap 篇

简介 Mergecap 是 Wireshark 程序安装时附带的可选工具之一&#xff0c;用于合并数据包文件的命令行工具。 mergecap [ -a ] [ -F <file format> ] [ -I <IDB merge mode> ] [ -s <snaplen> ] [ -V ] -w <outfile>|- <infile> [<infile>…...

10个打工人必备AI神器,升职加薪靠AI

HI&#xff0c;同学们&#xff0c;我是赤辰&#xff0c;本期是第18篇AI工具类教程&#xff0c;文章底部准备了粉丝福利&#xff0c;看完后可领取&#xff01;1. Runway&#xff08;文字转视频AI工具&#xff09; 只需要一句提示词就能精确生成你所想象的视频场景&#xff0c;还…...

Java架构师缓存架构设计

目录 1 导学2 高性能概述2.1 高性能的定义和衡量指标2.2 如何实现高性能的计算机系统或软件程序2.3 木桶理论2.4 如何实现计算机系统或软件程序的高性能3 多级缓存设计3.1 浏览器缓存3.2 CDN缓存3.3 负载均衡的缓存3.4 进程内缓存3.5 分布式缓存4 缓存技术方案5 如何进行缓存拆…...

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

安宝特案例丨Vuzix AR智能眼镜集成专业软件,助力卢森堡医院药房转型,赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下&#xff0c;卢森堡罗伯特舒曼医院&#xff08;the Robert Schuman Hospitals, HRS&#xff09;凭借在无菌制剂生产流程中引入增强现实技术&#xff08;AR&#xff09;创新项目&#xff0c;荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...

Proxmox Mail Gateway安装指南:从零开始配置高效邮件过滤系统

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storms…...