本文是深入浅出 ahooks 源码系列文章的第十七篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 简介 useInfiniteScroll 封装了常见的无限滚动逻辑. 详细可看官网 注意:这里的无限滚动指的是常见的点击加载更多或者说下拉加载更加功能,而不是虚拟滚动,虚拟滚动后面会讲到. 实现原理 实现原理:使用了 useRequest hook 负责进行请求后台数据.其中 reloadAsync 对应 useRequest 的 runAsync,reload…

本文是深入浅出 ahooks 源码系列文章的第十八篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 简介 提供虚拟化列表能力的 Hook,用于解决展示海量数据渲染时首屏渲染缓慢和滚动卡顿问题. 详情可见官网,文章源代码可以点击这里. 实现原理 其实现原理监听外部容器的 scroll 事件以及其 size 发生变化的时候,触发计算逻辑算出内部容器的高度和 marginTop 值. 具体实现 其监听滚动逻辑如下: // 当外部容器的 size 发生变化的时候,触发…

本文是深入浅出 ahooks 源码系列文章的第一篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 第一篇主要介绍 ahooks 的背景以及整体架构. React hooks utils 库 自从 React 16.8 版本推出 React hooks,越来越多的项目使用 Function Component.React hooks utils 库随即诞生,它主要解决的两个问题如下: 公共逻辑的抽象. 解决 React hooks 存在的弊端,比如闭包等. 那现…

本文是深入浅出 ahooks 源码系列文章的第九篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 今天来看看 ahooks 是怎么封装 cookie/localStorage/sessionStorage 的. cookie ahooks 封装了 useCookieState,一个可以将状态存储在 Cookie 中的 Hook . 该 hook 使用了 js-cookie 这个 npm 库.我认为选择它的理由有以下: 包体积小.压缩后小于 800 字节.自身是…

本文是深入浅出 ahooks 源码系列文章的第十篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 今天我们来聊聊 ahooks 中对 Map 和 Set 类型进行状态管理的 hook,顺便复习一下 Set 和 Map 这两种数据类型. useMap 管理 Map 类型状态的 Hook. 先回顾以下 Map 的概念.Map 对象保存键值对,并且能够记住键的原始插入顺序.任何值(对象或者基本类型)都可以作为一个键或一个值. Object 和 Map 很类似.它们都…

本文是深入浅出 ahooks 源码系列文章的第十三篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 本篇文章探讨一下 ahooks 对 DOM 类 Hooks 使用规范,以及源码中是如何去做处理的. DOM 类 Hooks 使用规范 这一章节,大部分参考官方文档的 DOM 类 Hooks 使用规范. 第一点,ahooks 大部分 DOM 类 Hooks 都会接收 target 参数,表示要处理的元素. target 支持三种类型 React.MutableRe…

本文是深入浅出 ahooks 源码系列文章的第十四篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 上一篇我们探讨了 ahooks 对 DOM 类 Hooks 使用规范,以及源码中是如何去做处理的.接下来我们就针对关于 DOM 的各个 Hook 封装进行解读. useEventListener 优雅的使用 addEventListener. 我们先来看看 addEventListener 的定义,以下来自 MDN 文档: EventTarget.addEven…

本文是深入浅出 ahooks 源码系列文章的第十五篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 本篇接着针对关于 DOM 的各个 Hook 封装进行解读. useFullscreen 管理 DOM 全屏的 Hook. 该 hook 主要是依赖 screenfull 这个 npm 包进行实现的. 选择它的原因,估计有两个: 它的兼容性好,兼容各个浏览器的全屏 API. 简单,包体积小.压缩后只要 1.1 k. 大概介绍几个它的 API. .request(e…

拜读一个开源框架,最想学到的就是设计的思想和实现的技巧. 废话不多说,jquery这么多年了分析都写烂了,老早以前就拜读过, 不过这几年都是做移动端,一直御用zepto, 最近抽出点时间把jquery又给扫一遍 我也不会照本宣科的翻译源码,结合自己的实际经验一起拜读吧! github上最新是jquery-master,加入了AMD规范了,我就以官方最新2.0.3为准 整体架构 jQuery框架的核心就是从HTML文档中匹配元素并对其执行操作. 例如: $().find().css() $().h…

query这么多年了分析都写烂了,老早以前就拜读过, 不过这几年都是做移动端,一直御用zepto, 最近抽出点时间把jquery又给扫一遍 我也不会照本宣科的翻译源码,结合自己的实际经验一起拜读吧! github上最新是jquery-master,加入了AMD规范了,我就以官方最新2.0.3为准 整体架构 jQuery框架的核心就是从HTML文档中匹配元素并对其执行操作. 例如: $().find().css() $().hide().html('....').hide(). 从上面的写法上至少…