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

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

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

本文是深入浅出 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 对 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…

如何读懂Framework源码? 首先,我也是一个应用层开发者,我想大部分有"如何读懂Framework源码?"这个疑问的,应该大都是应用层开发. 那对于我们来讲,读源码最大的问题,其实是没有应用场景,或者说短期来看成本高,收益底,容易半途而废 一 针对这个问题,首先是要要有一定的定力和研究精神,打算拿下哪部分的源码分析,即使遇到再多的问题,也要想办法解决,自己定的目标,跪着也要完成 其次,就是从什么方向入手,正如题主所说,源码很多,ndroid11的aosp整个下载下来,有150G左…

2019年第一篇文档,为2019年做个良好的开端,本文档通过step by step的方式向读者展示如何为redis添加一个数据类型,阅读本文档后读者对redis源码的执行逻辑会有比较清晰的认识,并且可以深入理解redis 源码中关于链表数据结构的使用,写这篇文档作者获益良多,阅读系统软件源码的兴趣也大大提高. 同时也再次感受到良好的基础是深入学习的前提.特别强调本文档仅用于学习,并非是要修改redis源码. 建议读者阅读本文档时实际动手敲一下代码,然后翻阅下redis源码,debug下redi…