原创 VS Code插件開發介紹（二）

一、前言 在上一篇文章裏，我簡要介紹了 VSCode 插件開發的基本流程，同時講解了如何獲取文件夾絕對路徑和用戶輸入的方法。最近又開發了一個新的插件，主要用途是替換當前編輯文件的內容。google 了一圈，發現介紹這方面的文章很少，特此記錄

2018-12-27 19:12:41

原创 React 16 升級總結

一、前言 目前 React 最新的版本是 16.7.0，基於全新的 React Fiber 架構，有衆多激動人心的新功能。由於是大版本升級，考慮到業務的穩定性，我們團隊大概等了一年的時間，終於鼓起勇氣着手升級的事情，特以此文來記錄升級過程中

2018-12-27 17:42:42 1

原创 React源碼解析-UI更新（DOM樹）

一、前言 上一篇文章對單個 DOM 元素的更新作了比較詳細的講解，本文將着重講下 React 的 Diff 策略。 二、Diff 策略 React 在比較新舊 2 棵虛擬 DOM 樹的時候，會同時考慮亮點： 儘量少的創建 / 刪除節點，多

2018-11-16 15:55:00

原创 React源碼解析-UI更新（普通DOM元素）III

一、前言 在前面的系列文章裏，已經對 React 的首次渲染和 事務（transaction）作了比較詳細的介紹，接下來終於講到它最核心的一個方法：setState。作爲聲明式的框架，React 接管了所有頁面更新相關的操作。我們只需要定義

2018-11-14 18:24:59 1

原创 React源碼解析-UI更新（Transaction）II

一、前言 上一篇文章介紹了 transaction 的基本概念和用法。今天我們將講解在更新過程中，React 是如何通過多個 transacion 之間的協作，來有效組織代碼的。 二、ReactUpdatesFlushTransaction

2018-11-08 09:44:40

原创 React 源碼中的依賴注入

一、前言 依賴注入（Dependency Injection）這個概念的興起已經有很長時間了，把這個概念融入到框架中達到出神入化境地的，非Spring莫屬。然而在前端領域，似乎很少會提到這個概念，難道前端的代碼就不需要解耦嗎？前端的代碼就沒

2018-11-06 21:44:35

原创 React源碼解析-UI更新（Transaction）I

前言 在閱讀 React 源碼過程中，transaction 可以說無處不在，所有涉及到 UI 更新相關的操作都會藉助 transaction 來完成。下面，我們就來看看它所起到的特殊所用。 Transaction 核心實現 Transac

2018-11-05 10:04:26 1

原创 React源碼解析-首次渲染（自定義組件）II

前言 上一篇文章中，我們講解到ReactCompositeComponent[ins]被初始化後，App[ins]的 render 方法被調用，生成 ReactElement 樹，然後對應的ReactDOMComponent[6]被返回。下

2018-11-01 20:44:29 1

原创 React源碼解析-首次渲染（自定義組件）I

前言 前面三篇文章介紹了 React 是怎麼渲染普通DOM元素的，如下圖所示。 紅線部分生成的markup實際上是一層一層往回傳，爲了方便展示就直接跳過中間層級返回了。這張圖片跳過了事務（transaction）相關的調用，後面會有專門的

2018-10-30 11:34:41 1

原创 React源碼解析-首次渲染（純DOM元素）III

上一篇講解了平臺無關的代碼，這篇繼續來講針對與 HTML DOM 操作的代碼。 |=ReactMount.render(nextElement, container, callback) ___ |=ReactMount._rend

2018-10-20 19:14:23 3

原创 React源碼解析-首次渲染（純DOM元素）II

上一篇文章中，介紹了頂層對象ReactCompositeComponent[T]是如何構造的，接下來我們看看 batchedMountComponentIntoNode 做了什麼事情。 本文將要講解的調用棧是下面這個樣子的： |=React

2018-10-20 11:54:26

原创 React源碼解析-首次渲染（純DOM元素）I

前言 React 是一個十分龐大的庫，由於要同時考慮 ReactDom 和 ReactNative ，還有服務器渲染等，導致其代碼抽象化程度很高，嵌套層級非常深，閱讀其源碼是一個非常艱辛的過程。在學習 React 源碼的過程中，給我幫助最大

2018-10-19 19:14:41

原创 VS Code插件開發介紹

前言 前段時間做了一個基於命令行的效率工具，可以自動生成組件的模板代碼。自己用起來還覺得挺好，但在組內案例幾次後大家都不願意用，究其原因還是命令行工具使用起來門檻有點高，不方便。由於組內已經統一使用VS Code進行開發了，於是決定研究下V

2018-10-10 21:24:45 2

原创 webpack啓動代碼源碼解讀

前言 雖然每天都在用webpack，但一直覺得隔着一層神祕的面紗，對它的工作原理一直似懂非懂。它是如何用原生JS實現模塊間的依賴管理的呢？對於按需加載的模塊，它是通過什麼方式動態獲取的？打包完成後那一堆/******/開頭的代碼是用來幹什麼

2018-09-26 16:24:30 2

原创 webpack調優總結

前言 webpack的出現爲前端開發帶來翻天覆地的變化，無論你是用React，Vue還是Angular，webpack都是主流的構建工具。我們每天都跟它打交道，但卻很少主動去了解它，就像寫字樓裏的禮儀小姐姐，既熟悉又陌生。隨着項目複雜度的上

2018-09-21 15:04:38 2