原创 【React】hooks的心智模型是什麼鬼？
前言 最近無意中看見一個分享貼，裏面有人說了hooks的心智模型不被很多人知道。我就好奇hooks有心智模型？心智模型到底是啥玩意？專門去翻了下。 Hooks心智模型起源 根據我百度到的，中文裏出現這個心智模型應該是基於這篇
2020-05-25 22:35:49
6
原创 【storybook】神奇工具storybook！只是用來做組件庫？（淺談CDD組件驅動開發）
前言 我一開始以爲storybook是做組件庫用的，隨着我後面瞭解越來越深發現壓根不是這麼回事。 我在寫組件庫中發現，很多功能比如umi-library(現在改名umi-father)都有了，storybook和umi-f
2020-05-23 17:07:47
22
原创 【Typescript】cra使用storybook並支持typescript的幾個坑
前言 storybook現在已經升到5了，在配置時有幾個坑記錄下。 安裝部分的坑 按官方說明，配合cra安裝storybook使用命令： npx -p @storybook/cli sb init --type react
2020-05-12 05:03:34
1
原创 【css】antd組件庫通用樣式文件學習筆記
前言 一個組件庫製作必然要寫通用的東西，antd定義的通用樣式可以拿來學習下，後面寫組件庫照這思路來。 官方地址 公共樣式 @theme: default; // The prefix to use on all css c
2020-05-10 01:18:01
原创 【React】React源碼梳理筆記（十四）
前言 本篇看一下Suspense和lazy到底啥玩意。 示例 lazy和suspense的組合有點意思，一般用來做代碼分割用，但裏面如何實現的？我只知道分割部分是用webpack的import語句寫的，畢竟這個是用戶自己寫的
2020-05-09 05:49:15
2
原创 【webpack】webpack構建流程筆記（六）
前言 這篇講plugin。 官網鏈接 Compiler與Compilation compiler 對象代表了完整的 webpack 環境配置。這個對象在啓動 webpack 時被一次性建立，並配置好所有可操作的設置，包括
2020-05-09 05:49:15
原创 【javascript】實現一個封裝請求ajax器
前言 這個是羣裏朋友問的，感覺很有意思。 要求是這樣： 1、限制一次同時發送的ajax請求數量 2、timeout限制 3、重試n次。 給了段開頭代碼: const axios = require('axios') axios
2020-05-09 05:49:15
原创 【React】React源碼梳理筆記（十三）
前言 接上篇，剩下函數組件和hooks。 更新邏輯——支持函數組件 跟類組件其實一樣，相同地方加邏輯。 function beginWork(currentFiber){//如果原生dom,需要創建真實dom元素。curr
2020-05-07 21:35:47
原创 【React】React源碼梳理筆記（十二）
前言 上一篇是初次渲染，本篇是更新邏輯。本篇理解上不一定對，因爲這部分相當複雜，我找的不同資料的人理解各不相同，後續有新理解另外發文。 司徒正美fiber理解 司徒正美關於alternate的解釋 更新邏輯——元素渲染實現
2020-05-07 15:24:02
原创 【React】React源碼梳理筆記（十一）
前言 結合前面知識，本篇粗略實現下fiber。 虛擬dom處理 先對babel轉譯的createElement進行編寫，完成基礎功能，再給react-dom。 createElement.js function creat
2020-05-06 01:45:17
原创 【webpack】webpack構建流程筆記（五）
前言 前面講了loader，這篇手寫loader流程。 基本功能實現 這個loader實現有點意思啊，一開始我還覺得可能是中間件什麼的很繞的實現方式，畢竟這個pitch和normal的運行方式讓人感覺可能是這麼搞得，原來就是
2020-05-04 13:05:57
原创 【React】React源碼梳理筆記（九）
前言 本篇梳理下fiber架構的基礎知識。 requestIdleCallback 這玩意只在瀏覽器中有，一般情況，瀏覽器在解析js時，如果任務太耗時，就會阻塞用戶操作，界面成卡死狀態。就像我前面無聊寫的那個對賬工具，計算
2020-05-03 00:28:49
原创 【React】React源碼梳理筆記（十）
前言 本篇繼續梳理下fiber基礎知識。 Fiber樹 從上一篇可以發現，解決瀏覽器卡頓其實是把一個大任務拆成多個小任務。而react裏，diff操作可以算是一個非常大的任務，所以需要將這個大任務拆成多個小任務解決。 那麼如
2020-05-03 00:28:49
原创 【React】React源碼梳理筆記（八）
前言 本篇將react路由組件過一遍。初學時候被路由坑死了，不瞭解原理。現在看這些源碼都不成問題，同時實現出簡易的react路由一套，馬上記錄下。 react-router-dom的HashRouter 源碼： impor
2020-04-30 01:54:38
原创 【React】React源碼梳理筆記（七）
前言 還有些別的功能繼續完成。 實現ref 前面在做虛擬dom時，裏面會單獨把ref提取出來，這次就用上了。 ref時初始化時用createRef造個，vdom上賦上 ，打印時就可以在current裏獲取。 class C
2020-04-30 01:54:38