首页
Python
Java
IOS
Andorid
NodeJS
JavaScript
HTML5
【
大家都能看得懂的源码之ahooks useInfiniteScroll
】的更多相关文章
大家都能看得懂的源码之ahooks useInfiniteScroll
本文是深入浅出 ahooks 源码系列文章的第十七篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 简介 useInfiniteScroll 封装了常见的无限滚动逻辑. 详细可看官网 注意:这里的无限滚动指的是常见的点击加载更多或者说下拉加载更加功能,而不是虚拟滚动,虚拟滚动后面会讲到. 实现原理 实现原理:使用了 useRequest hook 负责进行请求后台数据.其中 reloadAsync 对应 useRequest 的 runAsync,reload…
大家都能看得懂的源码之 ahooks useVirtualList 封装虚拟滚动列表
本文是深入浅出 ahooks 源码系列文章的第十八篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 简介 提供虚拟化列表能力的 Hook,用于解决展示海量数据渲染时首屏渲染缓慢和滚动卡顿问题. 详情可见官网,文章源代码可以点击这里. 实现原理 其实现原理监听外部容器的 scroll 事件以及其 size 发生变化的时候,触发计算逻辑算出内部容器的高度和 marginTop 值. 具体实现 其监听滚动逻辑如下: // 当外部容器的 size 发生变化的时候,触发…
大家都能看得懂的源码 - ahooks useSet 和 useMap
本文是深入浅出 ahooks 源码系列文章的第十篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 今天我们来聊聊 ahooks 中对 Map 和 Set 类型进行状态管理的 hook,顺便复习一下 Set 和 Map 这两种数据类型. useMap 管理 Map 类型状态的 Hook. 先回顾以下 Map 的概念.Map 对象保存键值对,并且能够记住键的原始插入顺序.任何值(对象或者基本类型)都可以作为一个键或一个值. Object 和 Map 很类似.它们都…
大家都能看得懂的源码(一)ahooks 整体架构篇
本文是深入浅出 ahooks 源码系列文章的第一篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 第一篇主要介绍 ahooks 的背景以及整体架构. React hooks utils 库 自从 React 16.8 版本推出 React hooks,越来越多的项目使用 Function Component.React hooks utils 库随即诞生,它主要解决的两个问题如下: 公共逻辑的抽象. 解决 React hooks 存在的弊端,比如闭包等. 那现…
大家都能看得懂的源码 - 如何封装 cookie/localStorage/sessionStorage hook?
本文是深入浅出 ahooks 源码系列文章的第九篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 今天来看看 ahooks 是怎么封装 cookie/localStorage/sessionStorage 的. cookie ahooks 封装了 useCookieState,一个可以将状态存储在 Cookie 中的 Hook . 该 hook 使用了 js-cookie 这个 npm 库.我认为选择它的理由有以下: 包体积小.压缩后小于 800 字节.自身是…
大家都能看得懂的源码 - ahooks 是怎么处理 DOM 的?
本文是深入浅出 ahooks 源码系列文章的第十三篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 本篇文章探讨一下 ahooks 对 DOM 类 Hooks 使用规范,以及源码中是如何去做处理的. DOM 类 Hooks 使用规范 这一章节,大部分参考官方文档的 DOM 类 Hooks 使用规范. 第一点,ahooks 大部分 DOM 类 Hooks 都会接收 target 参数,表示要处理的元素. target 支持三种类型 React.MutableRe…
大家都能看得懂的源码 - 那些关于DOM的常见Hook封装(一)
本文是深入浅出 ahooks 源码系列文章的第十四篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 上一篇我们探讨了 ahooks 对 DOM 类 Hooks 使用规范,以及源码中是如何去做处理的.接下来我们就针对关于 DOM 的各个 Hook 封装进行解读. useEventListener 优雅的使用 addEventListener. 我们先来看看 addEventListener 的定义,以下来自 MDN 文档: EventTarget.addEven…
大家都能看得懂的源码 - 那些关于DOM的常见Hook封装(二)
本文是深入浅出 ahooks 源码系列文章的第十五篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 本篇接着针对关于 DOM 的各个 Hook 封装进行解读. useFullscreen 管理 DOM 全屏的 Hook. 该 hook 主要是依赖 screenfull 这个 npm 包进行实现的. 选择它的原因,估计有两个: 它的兼容性好,兼容各个浏览器的全屏 API. 简单,包体积小.压缩后只要 1.1 k. 大概介绍几个它的 API. .request(e…
如何读懂Framework源码?如何从应用深入到Framework?
如何读懂Framework源码? 首先,我也是一个应用层开发者,我想大部分有"如何读懂Framework源码?"这个疑问的,应该大都是应用层开发. 那对于我们来讲,读源码最大的问题,其实是没有应用场景,或者说短期来看成本高,收益底,容易半途而废 一 针对这个问题,首先是要要有一定的定力和研究精神,打算拿下哪部分的源码分析,即使遇到再多的问题,也要想办法解决,自己定的目标,跪着也要完成 其次,就是从什么方向入手,正如题主所说,源码很多,ndroid11的aosp整个下载下来,有150G左…
<转>如何高效快速看懂Android源码
原网址:http://jingyan.baidu.com/article/574c5219ca78ed6c8d9dc12a.html 在Android系统上工作了一段时间,经常会遇到题目中的问题,下面说说我的看法: 1.需要先找一个开头,和UI有直接关系的就是最常见的Activity了吧,我就从它开始解剖.从Activity的创建入手,寻找Activity真正的创建位置,setContentview这个方法很明显和UI有关,这两方面一结合,我发现了ViewRoot和WindowManager的身…