一文搞定常用的自定义 React Hooks 前言 通过上一篇文章《一文归纳 React Hooks 常用场景》,我们根据使用场景分别进行举例说明,帮助你认识理解并可以熟练运用 React Hooks 大部分特性了。本文则对 hooks 进一步加深,让我们通过自定义一些 hooks,解决我们在平时项目中非常常用的需求场景,做到代码高复用低耦合,从而加深对 hooks 的理解和运用。 辛苦整理良久,还望手动点赞鼓励~ 博客 github地址为:github.com/fengshi123/… ,汇总了作者的所有博客,欢迎关注及 star ~ 1、实现自定义的 useMount 首先我们自定义一个 useMount hook,其功能为在 Dom 渲染之后执行相关函数,即类似于 class 组件写法中的 componentDidMount 生命周期钩子的功能。 我么基于以下原理实现:如果想执行只运行一次的 effect(仅在组件挂载和卸载时执行),可以传递一个空数组(
News Coming soon This is ionantha, a brand new site by ionantha that's just getting started. Things will be up and running here shortly, but you can subscribe in the meantime if you'd like to stay up to date and receive emails when new content is published!
CSS 页面底部输入框聚焦时吸底软键盘方案 0、参考布局 可能存在的问题 * 输入框未跟随软键盘弹起 * 输入框被顶起超过软键盘的高度 * 输入框被系统手势按钮遮挡 * 输入框没有被键盘挡住,但收起键盘后页面不会回落 * ios safari标签栏位于底部时 100vh并不是真实的高度,导致输入框被标签栏遮挡 * 输入框被顶起时,页面顶部被顶到了可视区域外 解决方案 1、Android 监听resize事件 在Android中,软键盘弹起会导致页面高度变化,压缩页面,因此可以通过监听window的resize事件,并实时修改容器高度来保证输入框位于软键盘之上 window.addEventListener('resize', this.convertStyle); convertStyle() { this.$refs.container.style.setProperty('window.innerHeight', `${height}px`); }, 2、IOS 通过VisualViewport监听resize事件 在IOS中,软键盘的弹起并不会导致页面高
通用能力 使用 electron 为应用制造跨平台APP外壳 一、electron 本质就是个浏览器 二、本地化VUE项目 Vue CLI Plugin Electron Builder 1、安装 // node需要 >= 14 vue add electron-builder 2、结构 background.ts 为 主进程 需要在 package.json中配置 3、运行 二、远程加载URL 1、创建、安装 // 初始化项目 npm init // 在当前目录安装最新 npm i -D electron // 全局安装最新 cnpm install electron -g * 简单使用 { "name&
百度 lerna Lerna 是一个管理多个 npm 模块的工具,是 Babel 自己用来维护自己的 Monorepo 并开源出的一个项目。优化维护多包的工作流,解决多个包互相依赖,且发布需要手动维护多个包的问题。 1、安装 推荐全局安装,因为会经常用到 lerna 命令 npm i -g lerna 2、初始化项目 2.1 创建 lerna init 2.2 修改配置 将node_modules提出至最顶层集中管理,避免共同依赖的重复安装 learn.json { "packages": [ "packages/*" ], "useWorkspaces": true, "npmClient"
Python mac pip默认使用pip3 pip是常用的python包管理工具,类似于java的maven。用python的同学,都离不开pip。 * 在Python2.7的安装包中,easy_install.py是默认安装的,而pip需要手动安装。 sudo easy_install pip //即可安装 * 值得注意的是:这样将安装在系统自带的python2.7的路径下,而我们要的开发环境却是python3,这样安装的包,python3中找不到 解决办法:用下面的命令安装 curl https://bootstrap.pypa.io/get-pip.py | python3 * 查看版本 pip --version //pip 18.1 from /usr/local/lib/python3.7/site-packages/pip (python 3.7) 如上可以看到 查看版本时,
算法 简明的矩形碰撞检测 React1: x1,y1,width1,height1 React2: x2,y2,width2,height2 分别在水平方向和垂直方向判断这两个矩形是否发生重叠 x1 + width1 > x2 && x 1< x2 + width2 // 横向 && y 1< y2 + height2 && y1 + height1 > y2 // 纵向
加密 AES加密 AES 属于对称加密算法 三要素: * 秘钥 * 填充 * 模式 秘钥 对称加密之所以对称,是因为这类算法对明文的加密和解密使用的是同一个秘钥 AES 支持三种长度的秘钥: * 128位 128的性能最好 * 192位 * 256位 256的安全性最高,加密轮数更多。 这三种不同长度的秘钥,在底层的加密过程中,处理的加密轮数不同。 填充 AES加密分组的特性:AES加密并不是将明文一股脑加密成密文,而是先拆分成一个个的独立的明文块,每个明文快块128bit。 假设一段明文块长度是192bit,按照每128bit一个明文块来拆分的话,第二个明文块只有64bit,不足128bit,此时就需要对不足128bit的明文块进行填充。 填充的 种类: * NoPadding 不做任何填充,要求明文必须是128bit的整数倍 * PKCS7Padding 用0填充,对于末尾为0的,容易误判,从而解密出错,并不推荐 * ZeroPadding(当明文块少于16个字节,少多少个字节,就用对应数字来填充。例如,少5个,后面就是5个5,少6个,就是6个
面试 (Untitled) 工作后再来看浏览器输入URL后发生了什么? 从毕业到工作已经过去了一年半的时间,在春招中第一个被问到的问题就是浏览器输入URL后发生了什么,于是便把过程中发生了什么和工作中可能遇到的知识点与一些基础的计算机知识做了一下串联,如果有大佬看到有什么错误与欠缺,欢迎指正与补充 1、域名寻址阶段 过程 * 浏览器先查看本地硬盘host对应的域名规则,如果有直接使用该IP(浏览器缓存、操作系统缓存、本地host文件、路由器缓存) * 浏览器发送DNS请求到本地DNS服务器,如电信、网通 ( ISP DNS缓存) * 本地DNS服务器首先查询缓存记录,该过程为递归查询,如果有则直接返回,如果没有,则查询DNS根服务器 * DNS根服务器如果没有查到对应的域名与IP关系,则返回本地DNS服务器,使用域服务器继续查询,该过程为迭代查询 * www.xyz.abc.com 从 .com 域服务器一直查到 xyz.abc.com 域服务器 (顶级DNS服务器/根DNS服务器) 问题 1、什么是DNS 本质是一个IP与域名关系的电话本 DNS(Domain Name Syst
服务器 MariaDB基础配置 本记录基于CentOS 7 root用户下 从 CentOS 7 开始,CentOS 使用 MariaDB 代替了 MySQL 数据库,MariaDB 系 MySQL 的一个分支,使用方法和 MySQL 基本一致,主要由开源社区维护,采用 GPL 授权许可。开发此分支的主要原因之一:Orcale 公司收购了 MySQL,所以 MySQL 有闭源的可能,因此社区采用了开源的 MariaDB 来规避此风险。 安装 yum install mariadb mariadb-server #询问是否要安装,输入Y即可自动安装,直到安装完成 systemctl enable mariadb.service #设置开机启动 常用命令 systemctl start/
服务器 centos系统添加/删除用户和用户组 建用户 # 新建phpq用户 adduser phpq # 给phpq用户设置密码 passwd phpq 建工作组 # 新建test工作组 groupadd test 新建用户同时增加工作组 # 新建phpq用户并增加到test工作组 useradd -g test phpq 给已有的用户增加工作组 usermod -G groupname username # or gpasswd -a username groupname 临时关闭 在/etc/shadow文件中属于该用户的行的第二个字段(密码)前面加上就可以了。想恢复该用户,去掉即可。 或者使用如下命令关闭用户账号: passwd peter –l # 重新释放: passwd peter –u 永久性删除用户账号 userdel peter groupdel peter usermod –G
服务器 申请免费SSL/HTTPS通配符证书 申请单个域名证书 certbot: https://certbot.eff.org/ 安装命令行工具及申请 选择对应的软件和系统版本 # 安装依赖 sudo apt-get install certbot python-certbot-nginx # 自动设置 sudo certbot --nginx # or 手动设置 sudo certbot certonly --nginx 设置自动续签 # 通用 sudo certbot renew # 强制续签 sudo certbot renew --dry-run 申请通配符域名证书 阿里云等国内域名商购买域名 申请证书 centOS需要提前安装依赖 pip uninstall requests pip uninstall urllib3 yum remove python-urllib3 yum remove python-requests
服务器 Nginx 升级最新版本并开启TLSv1.3 本操作基于debian 9 nginx 升级 1、清理残余的旧版本 # 原有配置不会删除 sudo apt-get remove nginx nginx-common nginx-full 2、安装nginx PGP签名文件 wget http://nginx.org/keys/nginx_signing.key sudo apt-key add nginx_signing.key 3、修改source源 cd 进入apt源目录 cd /etc/apt/ ll 修改这个文件,也可能是source.list 在文件末追加以下: codename是版本代号,查询地址: https://nginx.org/en/linux_packages.
计算机基础 MarkDown 简易教学 这是一级标题 这是二级标题 这是三级标题 这是四级标题 这是五级标题 这是六级标题 这是加粗的文字 这是倾斜的文字` 这是斜体加粗的文字 这是加删除线的文字 分割线 三个或者三个以上的 - 或者 * 都可以。 示例: 图片   图片alt就是显示在图片下面的文字,相当于对图片内容的解释。 图片title是图片的标题,当鼠标移到图片上时显示的内容。title可加可不加
树莓派 树莓派raspberry 4的安装及初始化设置 下载镜像 去树莓派的官网下载树莓派官方为树莓片定制的给予debian的linux系统,推荐使用官方镜像 下载地址:https://www.raspberrypi.org/downloads/raspbian/ 建议使用完全版,少点折腾 烧录至备好的SD卡 个人使用mac系统,推荐使用balenaEtcher软件进行烧录 官方地址: https://www.balena.io/etcher/ 选择刚刚下载好的镜像,不用解压,直接选zip文件就好 选择插入的SD卡,点击Flash,大概二十分钟后就烧录好了, 这时候不要拔出,进行下一步设置 安装前准备 树莓派系统默认不开启SSH,为方便后面的操作,通过在烧录好的系统中新增ssh文件来开启ssh 具体操作:打开mac的终端,输入以下 # 进入挂载卷选区 cd /volumes # 通过ll来查看已挂载的卷 # 找到SD卡所在的 cd boot # 创建空ssh文件 vim ssh 手边没有网线的话,可以提前配置好Wi-Fi配置文件,通过局域网获取树莓派ip进行ssh连接。 方法是同开启ssh一样,