原创 【React】React源碼梳理筆記(六)

前言 繼續上次React,這次主要搞生命週期 原版示例對照 做生命週期思路其實不難,在更新的地方已經可以拿到類的實例,然後進行調用判斷即可。 先做個示例對照: class Child extends React.Compo

原创 【React】React源碼梳理筆記(五)

前言 繼續上次React 無移動domdiff 上一篇把屬性更新搞定了,但是點擊按鈕,雖然屬性變了,但是數字沒變,所以要實現domdiff來改變數字。 react的domdiff跟vue不太一樣,我感覺react的domdi

原创 【javascript】關於bind的實現

前言 聽說bind有點特別啊,一開始初學不知道,以爲那麼簡單的東西就綁成函數等待執行唄,後來發現這玩意實際還是比較複雜的。 mdn上Polyfill 先看mdn上Polyfill // Does not work with

原创 【Electron】製作個對賬小工具

前言 這玩意做出來好玩,同時想試試electron功能。 實際並沒有用多少原生功能,畢竟剛學着用用這玩意。 功能 就是對賬了,2邊分別導入excel後,點擊匹配,就會自己尋找相同的,或者可以匹配上的。 我做了3種匹配,由於j

原创 【Electron】Electron+React環境配置

前言 這玩意可以做些小工具什麼的感覺挺實用,感覺學一下。 安裝 首先是基本安裝。 使用create-react-app創建項目。 然後安裝electron cnpm i electron -D 安裝 electron-

原创 【React】React源碼梳理筆記(四)

前言 繼續上次寫的React。這次是屬性更新。 普通元素更新屬性 首先把上次應該寫覆蓋比較的地方改成一個函數: function compareTwoElement(oldelement,newelement){

原创 【React】基於Express與React製作的pwa小電商

基於Express與React製作的pwa小電商 項目介紹 此項目有2部分組成,前端倉庫地址爲 https://github.com/yehuozhili/shop100frontend ,後端倉庫地址爲 https://g

原创 【React】react源碼梳理筆記(三)

前言 本篇來了解setState之謎。 react最常見的面試題就是setState到底是同步還是異步?看完這篇就知道了。 渲染類組件和函數組件 接上篇,上篇只是基本把事件給做了,下面需要渲染類組件和函數組件。 現在一共有3

原创 【React】react源碼梳理筆記(二)

前言 由於react-dom過於複雜,所以我先畫了張react-dom流程圖,還沒整理完,以後再研究,先學一下別人理解的react的事件機制。 React-dom流程圖 由於圖太大,所以在線預覽。react-dom流程圖。

原创 【React】使用自定義hook解決安卓鍵盤彈起遮擋

前言 在遇到要輸入input時,安卓系統的瀏覽器會彈起鍵盤但頁面原樣。ios系統彈起鍵盤後可以滾動。所以這個優化只對安卓生效。 原理 安卓的鍵盤彈起就是個resize事件。通過監聽resize事件,以及判斷瀏覽器ua來進行處

原创 【webpack】webpack構建流程筆記(三)

前言 第一篇tapable,第二篇ast,第三篇loader webpack構建流程 從配置文件和命令行獲取參數 創建Complier對象 執行Compiler的run方法創建Compliation 尋找入口文件,調用所有配

原创 【https】openssl的常用操作

前言 最近補了https的知識。感覺收穫很大,不知道爲啥那麼多人推薦圖解http,感覺這書實現上都沒說,跟啓蒙書一樣。。 這篇如果讀者看不懂建議先看一下讀書筆記。 環境 實踐系統爲centos8,反正7應該也可以。 首先寫入

原创 【React】手寫虛擬化無限滾動組件

前言 react的虛擬化無限滾動有別人寫好的,antd的list組件裏也有這種虛擬化組件,antd虛擬化列表地址。 由於上次寫了一篇淺顯的滾動性能優化後發現這種技術可以更大的提升效率,並且上次那篇的蠻力實現的思維走入了死衚衕,而

原创 【React】簡易KeepAlive的探索

前言 react官方是沒給像vue那種keep-alive功能的,網上有些大佬寫了些庫,裏面涉及的東西有點多。我感覺這玩意也可以自己搞個簡陋版本,滿足自己需要就行。 原理 react-router在對路由匹配時,不匹配的就直

原创 【nodejs】mocha+chai+nyc基礎

前言 以前就聽說單元測試什麼的,沒怎麼重視,既然這玩意那麼多人吹,肯定有好處,再研究看看。 官網 chai官網文檔 mocha文檔。 chai-http文檔 nyc文檔 安裝 用js的不用裝@types。 cnpm