解讀React源碼(一):初探React源碼

前言

React的基本概念,API,組件的構建方法以及高級用法,這背後的一切如何運轉,深刻Virtual DOM內部的實現機制和原理.

初探React源碼

1.react代碼組織結構:addons,isomorphic,renders,shared,core,test
2.addons:包含一系列的工具方法插件:PureRenderMixin,CSSTransitionGroup,Fragment,LinkedStateMixin
isomorphic:包含一系列同構方法
shared:包含一些公用或經常使用方法,如Transaction,CallbackQueue等
test:包含一些測試方法等
core/tests:包含一些邊界錯誤的測試用例
renders:是react代碼的核心部分,它包含了大部分功能實現.
3.renders分爲dom和shared目錄.
dom:包含client,server,shared
client包含dom操做方法(findDOMNode,setInnerHTML,setTextContent)以及事件方法.
reconciler:稱爲協調器,他是最爲核心的部分,包含react中自定義組件的實現(ReactCompositeComponent),組件生命週期,setState機制(reactUpdates,reactUpdateQueue),
DOM diff算法(ReactMultiChild)等重要的特性方法.

Virtual DOM

1.Virtual DOM其實是在瀏覽器端用js實現的一套DOM API,它之於React就好似一個虛擬空間,包括一整套Virtual DOM模型,
生命週期的維護和管理,性能高效的diff算法和將Virtual DOM展現爲原生DOM的Patch方法等.
2.基於react進行開發時,全部的DOM樹都是經過Virtual DOM構造的,react在Virtual DOM上實現了DOM diff算法,當數據更新時,會經過diff尋找到
須要變動的DOM節點,並只對變化的部分進行實際的瀏覽器的DOM更新,而不是從新渲染整個DOM樹.
3.react也能實現Virtual DOM的批處理更新,當操做Virtual DOM時,不會立刻生成真實的DOM,而是會將一個事件循環(event loop)內的兩次數據更新合併,
這就使得react可以在事件循環的結束以前徹底不用操做真實的DOM.
4.這樣,在保證性能的同時,開發者將再也不須要關注某個數據的變化如何更新到具體的DOM元素,而只須要關心在任意數據狀態下,真個界面是如何渲染的.