成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

Eminjannn / 2434人閱讀

摘要：前言的基本概念組件的構(gòu)建方法以及高級用法這背后的一切如何運轉(zhuǎn)深入內(nèi)部的實現(xiàn)機制和原理初探源碼代碼組織結(jié)構(gòu)包含一系列的工具方法插件包含一系列同構(gòu)方法包含一些公用或常用方法如等包含一些測試方法等包含一些邊界錯誤的測試用例是代碼的核心部分它包含了

前言

React的基本概念,API,組件的構(gòu)建方法以及高級用法,這背后的一切如何運轉(zhuǎn),深入Virtual DOM內(nèi)部的實現(xiàn)機制和原理.

初探React源碼

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

Virtual DOM

1.Virtual DOM實際上是在瀏覽器端用js實現(xiàn)的一套DOM API,它之于React就好似一個虛擬空間,包括一整套Virtual DOM模型,
生命周期的維護和管理,性能高效的diff算法和將Virtual DOM展示為原生DOM的Patch方法等.
2.基于react進行開發(fā)時,所有的DOM樹都是通過Virtual DOM構(gòu)造的,react在Virtual DOM上實現(xiàn)了DOM diff算法,當數(shù)據(jù)更新時,會通過diff尋找到
需要變更的DOM節(jié)點,并只對變化的部分進行實際的瀏覽器的DOM更新,而不是重新渲染整個DOM樹.
3.react也能實現(xiàn)Virtual DOM的批處理更新,當操作Virtual DOM時,不會馬上生成真實的DOM,而是會將一個事件循環(huán)(event loop)內(nèi)的兩次數(shù)據(jù)更新合并,
這就使得react能夠在事件循環(huán)的結(jié)束之前完全不用操作真實的DOM.
4.這樣,在保證性能的同時,開發(fā)者將不再需要關(guān)注某個數(shù)據(jù)的變化如何更新到具體的DOM元素,而只需要關(guān)心在任意數(shù)據(jù)狀態(tài)下,真?zhèn)€界面是如何渲染的.

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/84636.html

相關(guān)文章

  • 解讀React源碼(三):生命周期的管理藝術(shù)

    摘要：前言的主要思想是通過構(gòu)建可復(fù)用組件來構(gòu)建頁面所謂組件其實就是有限狀態(tài)機通過狀態(tài)渲染對應(yīng)的界面且每個組件都有自己的生命周期它規(guī)定了組件的狀態(tài)和方法需要在哪個階段改變和執(zhí)行子組件子組件子組件子組件初探生命周期當首次掛載組件時按順序執(zhí)行當卸載組件 前言 React的主要思想是通過構(gòu)建可復(fù)用組件來構(gòu)建頁面.所謂組件,其實就是有限狀態(tài)機(FSM),通過狀態(tài)渲染對應(yīng)的界面,且每個組件都有自己的生命...

    lk20150415 評論0 收藏0

  • React 源碼深度解讀（六）：依賴注入

    摘要：依賴注入和控制反轉(zhuǎn)，這兩個詞經(jīng)常一起出現(xiàn)。一句話表述他們之間的關(guān)系依賴注入是控制反轉(zhuǎn)的一種實現(xiàn)方式。而兩者有大量的代碼都是可以共享的，這就是依賴注入的使用場景了。下一步就是創(chuàng)建具體的依賴內(nèi)容，然后注入到需要的地方這里的等于這個對象。 前言 React 是一個十分龐大的庫，由于要同時考慮 ReactDom 和 ReactNative ，還有服務(wù)器渲染等，導(dǎo)致其代碼抽象化程度很高，嵌套層級...

    glumes 評論0 收藏0

  • React 源碼深度解讀（四）：首次自定義組件渲染 - Part 1

    摘要：本篇開始介紹自定義組件是如何渲染的。組件將自定義組件命名為，結(jié)構(gòu)如下經(jīng)過編譯后，生成如下代碼構(gòu)建頂層包裝組件跟普通元素渲染一樣，第一步先會執(zhí)行創(chuàng)建為的。調(diào)用順序已在代碼中注釋。先看圖，這部分內(nèi)容將在下回分解 前言 React 是一個十分龐大的庫，由于要同時考慮 ReactDom 和 ReactNative ，還有服務(wù)器渲染等，導(dǎo)致其代碼抽象化程度很高，嵌套層級非常深，閱讀其源碼是一個非...

    Warren 評論0 收藏0

  • React 源碼深度解讀（一）：首次DOM元素渲染 - Part 1

    摘要：調(diào)用棧是這樣的這里生成的我們將其命名為，它將作為參數(shù)傳入到。整個的調(diào)用棧是這樣的組件間的層級結(jié)構(gòu)是這樣的到此為止，頂層對象已經(jīng)構(gòu)造完畢，下一步就是調(diào)用來自的方法，進行頁面的渲染了。通過表達的結(jié)構(gòu)最終會轉(zhuǎn)化為一個純對象，用于下一步的渲染。 歡迎關(guān)注我的公眾號睿Talk，獲取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、前言...

    daydream 評論0 收藏0

  • React 源碼深度解讀（三）：首次 DOM 元素渲染 - Part 3

    摘要：在學(xué)習(xí)源碼的過程中，給我?guī)椭畲蟮木褪沁@個系列文章，于是決定基于這個系列文章談一下自己的理解。到此為止，首次渲染就完成啦總結(jié)從啟動到元素渲染到頁面，并不像看起來這么簡單，中間經(jīng)歷了復(fù)雜的層級調(diào)用。 前言 React 是一個十分龐大的庫，由于要同時考慮 ReactDom 和 ReactNative ，還有服務(wù)器渲染等，導(dǎo)致其代碼抽象化程度很高，嵌套層級非常深，閱讀其源碼是一個非常艱辛的過...

    U2FsdGVkX1x 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<