本文將針對(duì)微前端框架 qiankun 的源碼進(jìn)行深入解析，在源碼講解之前，我們先來了解一下什么是 微前端。 微前端 是一種類似于微服務(wù)的架構(gòu)，它將微服務(wù)的理念應(yīng)用于瀏覽器端，...
IP屬地：廣東
-
萬字長(zhǎng)文+圖文并茂+全面解析 qiankun 源碼 - qiankun 篇 -
useCallback()、useMemo() 解決了什么問題？
在閱讀本文之前，請(qǐng)確保您具有 js 基礎(chǔ)知識(shí)，知悉基礎(chǔ)數(shù)據(jù)類型與復(fù)雜數(shù)據(jù)類型的區(qū)別。如果下面的代碼您不能理解，請(qǐng)略過此文以節(jié)約您的時(shí)間。 目錄： React.memo() R...
-
淺談掃碼登錄的基本原理
移動(dòng)端登錄認(rèn)證機(jī)制 當(dāng)我們?cè)谑謾C(jī)應(yīng)用中第一次登錄時(shí)，需要手動(dòng)輸入賬號(hào)密碼，之后就可以自動(dòng)登錄，依賴的是一套基于token的認(rèn)證機(jī)制一般流程如下; 第一次登錄時(shí)，移動(dòng)端將設(shè)備信...
-
用React hooks寫一個(gè)簡(jiǎn)單的倒計(jì)時(shí)頁面
useState的基本用法 useState用于向函數(shù)組件添加狀態(tài)它接收一個(gè)參數(shù)作為狀態(tài)的初始值，并返回一個(gè)數(shù)組數(shù)組的第一個(gè)值為狀態(tài)，第二個(gè)值為改變狀態(tài)的函數(shù) 在組件中讀狀態(tài)...
-
React封裝公共函數(shù)：彈窗
需求分析 很多時(shí)候我們需要通過彈窗/對(duì)話框來完成交互，因此這個(gè)公共的彈窗組件需要實(shí)現(xiàn)以下功能： 組件動(dòng)態(tài)地傳入彈窗的標(biāo)題和內(nèi)容 點(diǎn)擊確定和取消按鈕之后，執(zhí)行組件傳入的回調(diào)函數(shù)...
-
React封裝公共組件：輪播圖(2)
上一篇文章中，我們介紹了如何實(shí)現(xiàn)輪播圖的無縫滾動(dòng)這一篇文章將會(huì)介紹如何實(shí)現(xiàn)自動(dòng)播放，以及如何將自動(dòng)播放和手指滑動(dòng)這兩個(gè)事件進(jìn)行隔離 自動(dòng)播放 假設(shè)自動(dòng)播放的順序?yàn)椋簣D片無限向...
-
React封裝公共組件：輪播圖(1)
需求分析 移動(dòng)端觸摸滑動(dòng)：圖片可以跟隨手指滑動(dòng)而滑動(dòng) 底部小圓點(diǎn)：與輪播圖聯(lián)動(dòng)的顯示效果 無縫循環(huán)滾動(dòng)：第一張圖可以往前滑動(dòng)、最后一張圖也可以往后滑動(dòng) 可以自動(dòng)播放（下一篇文...
-
styled-components實(shí)現(xiàn)骨架屏加載動(dòng)畫
背景概述 很多應(yīng)用在加載數(shù)據(jù)的時(shí)候，為了避免頁面過于空白，都會(huì)用骨架屏的方式來預(yù)告將會(huì)有內(nèi)容載入，從而提升用戶體驗(yàn) 接下來簡(jiǎn)單講解一下如何在react應(yīng)用中，通過styled...
-
滑動(dòng)窗口的小小總結(jié)
題型概述和分析 滑動(dòng)窗口問題通常會(huì)給出一長(zhǎng)一短的兩個(gè)字符串：s和t核心目的是讓你判斷s中是否包含t整體的思路如下： 初始化兩個(gè)哈希表，need表示字符串t各個(gè)字符的個(gè)數(shù)，wi...
-
styled-components入門
介紹 styled-components是一個(gè)針對(duì)React的 css in js 類庫(kù)（官方文檔戳這里[https://styled-components.com/docs...
-
LeetCode(22)：括號(hào)生成
題目描述 解題思路 我們可以將問題改寫成：現(xiàn)在有2n個(gè)位置，每個(gè)位置可以放 ( 或者 )，組成的所有括號(hào)組合中，哪些是合法的？解決這個(gè)問題只需要分2步： 暴力枚舉所有可能的情...
-
LeetCode(46)：全排列
題目描述 解題思路 在寫代碼之前，思考以下3個(gè)問題： 如何判斷是否已經(jīng)滿足結(jié)束條件？ 如何在選擇列表中選擇一個(gè)？ 如何撤銷選擇？ 對(duì)全排列這個(gè)問題進(jìn)行具體分析，逐一擊破： 1...
-
LeetCode(460)：手寫LFU算法
題目描述 實(shí)現(xiàn)思路 1、大致分析 依據(jù)題目，可以列舉出幾個(gè)顯而易見的事實(shí)： 調(diào)用get方法， 返回該key對(duì)應(yīng)的val 調(diào)用get或者put方法訪問某個(gè)key，該key對(duì)應(yīng)的...
-
LeetCode(146)：手寫LRU算法
LRU：最近最少使用 題目描述 算法設(shè)計(jì) cache這個(gè)數(shù)據(jù)結(jié)構(gòu)需要具備以下條件： 元素必須有時(shí)序，當(dāng)容量滿了以后要?jiǎng)h除最久未使用的元素 get方法要求在O(1)的時(shí)間復(fù)雜度...
-
簡(jiǎn)述Js的事件循環(huán)
普通消息隊(duì)列 一個(gè)代碼塊中的所有同步代碼，都會(huì)被看作一個(gè)宏任務(wù)，添加到普通消息隊(duì)列的尾部 延遲執(zhí)行隊(duì)列 當(dāng)你在代碼中使用 setTimeout 或 setInterval 時(shí)...
-
簡(jiǎn)述this(2)：常見面試題分析
第1題 say函數(shù)在執(zhí)行時(shí)是被對(duì)象a所調(diào)用的，所以this指向?qū)ο骯因此最后輸出 111 第2題 fun拿到了a.say這個(gè)函數(shù)的引用，當(dāng)我們?cè)谌汁h(huán)境中執(zhí)行fun()時(shí)（并...
-
簡(jiǎn)述this(1)：綁定規(guī)則
默認(rèn)綁定 當(dāng)我們不帶任何修飾地調(diào)用一個(gè)函數(shù)時(shí)，就應(yīng)用默認(rèn)綁定的規(guī)則 調(diào)用foo時(shí)，前面沒有任何修飾，因此，f函數(shù)的調(diào)用位置是全局環(huán)境，this.a被解析成了全局變量a 隱式綁...
