博客 / 列表

JackySummer - 【解讀 ahooks 源碼系列】Dev篇——useTrackedEffect 和 useWhyDidYouUpdate

前言 本文是 ahooks 源碼（v3.7.4）系列的第六篇——Dev 篇，該篇主要是協助開發調優的 Hook，只有兩個 往期文章： 【解讀 ahooks 源碼系列】（開篇）如何獲取和監聽 DOM 元素：useEffectWithTarget 【解讀 ahooks 源碼系列】DOM 篇（一）：useEventListener、useClickAway、useDocumentVisibilit

react , hooks , 前端

JackySummer - 【解讀 ahooks 源碼系列】DOM篇（四）

前言 本文是 ahooks 源碼（v3.7.4）系列的第五篇，也是 DOM 篇的完結篇，往期文章： 【解讀 ahooks 源碼系列】（開篇）如何獲取和監聽 DOM 元素：useEffectWithTarget 【解讀 ahooks 源碼系列】DOM 篇（一）：useEventListener、useClickAway、useDocumentVisibility、useDrop、useDrag

react , hooks , 前端

JackySummer - 【解讀 ahooks 源碼系列】DOM篇（三）

前言 本文是 ahooks 源碼系列的第四篇，往期文章： 【解讀 ahooks 源碼系列】（開篇）如何獲取和監聽 DOM 元素：useEffectWithTarget 【解讀 ahooks 源碼系列】DOM篇（一）：useEventListener、useClickAway、useDocumentVisibility、useDrop、useDrag 【解讀 ahooks 源碼系列】DOM篇

react , hooks , 前端

JackySummer - 【解讀 ahooks 源碼系列】DOM篇（二）

前言 本文是 ahooks 源碼系列的第三篇，往期文章： 【解讀 ahooks 源碼系列】（開篇）如何獲取和監聽 DOM 元素 【解讀 ahooks 源碼系列】DOM篇（一） 本文主要解讀 useEventTarget、useExternal、useTitle、useFavicon、useFullscreen、useHover 源碼實現 useEventTarget 常見表單控件(通過 e

react , hooks , 前端 , Javascript

JackySummer - 【解讀 ahooks 源碼系列】DOM篇（一）

前言 本文是 ahooks 源碼系列的第二篇，下面鏈接是第一篇 DOM 篇的前置講解： 【解讀 ahooks 源碼系列】（開篇）如何獲取和監聽 DOM 元素 後續的文章將會直入主題，每篇文章解讀四至六個 Hooks 源碼實現。 useEventListener 優雅的使用 addEventListener。 官方文檔 用法 import React, { useState, useRe

react , hooks , 前端 , Javascript

JackySummer - 【解讀 ahooks 源碼系列】 （開篇）如何獲取和監聽 DOM 元素

前言 由於在工作中自定義 Hook 場景寫的較多，當實現某個通用場景功能時，可能沒想過有已實現好的 Hook 封裝或者壓根沒想去從 Hooks 庫裏面找，但是社區好的實現使用起來是可以提高開發效率和減少 bug 率的。 公司項目中有依賴庫 ahooks，但我用的次數不多，於是有了想詳細瞭解 ahooks 的打算，更主要是為了更加熟練抽離與實現一些場景 Hook，學習如何更好的自定義 Hook，便有

react , hooks , 前端 , Javascript

JackySummer - 結合實踐解讀 package.json

前言 平時大家在公司接手一個已有項目的時候，首先會看的是什麼呢？我的習慣是先看 README.md 和 package.json。 通過 README 瞭解項目是做什麼和注意點，通過package.json瞭解項目涉及的技術棧和 npm 庫等等。 今天就來深入瞭解下package.json這個文件，不僅是解釋詳細字段含義與運用（忽略部分第三方字段本文就不介紹了），更重要的是想借此擴展總結下涉及工作

package.json , 工程化 , Javascript

JackySummer - 完全搞懂 BFC

什麼是 BFC BFC 全稱是 Block Formatting Context，即塊格式化上下文。 除了 BFC，還有： IFC（行級格式化上下文）- inline 內聯 GFC（網格佈局格式化上下文）- display: grid FFC（自適應格式化上下文）- display: flex或display: inline-flex 注意：同一個元素不能同時存在於兩個 BFC 中 它是

bfc , Css

JackySummer - sessionStorage、localStorage用法總結

在工作中使用sessionStorage存儲數據時，發現sessionStorage無法直接存儲數組和對象，如存入對象則顯示為"[object Object]"，對此作下記錄，重新温習sessionStorage和localStorage html5 中的 web Storage 包括了兩種存儲方式：sessionStorage 和 localStorage 共同點 存儲大小為5MB，都保存在客户

sessionstorage , localstorage