成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Eminjannn / 2380人閱讀

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

前言

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

初探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:包含一些測(cè)試方法等
core/tests:包含一些邊界錯(cuò)誤的測(cè)試用例
renders:是react代碼的核心部分,它包含了大部分功能實(shí)現(xiàn).
3.renders分為dom和shared目錄.
dom:包含client,server,shared
client包含dom操作方法(findDOMNode,setInnerHTML,setTextContent)以及事件方法.
reconciler:稱為協(xié)調(diào)器,他是最為核心的部分,包含react中自定義組件的實(shí)現(xiàn)(ReactCompositeComponent),組件生命周期,setState機(jī)制(reactUpdates,reactUpdateQueue),
DOM diff算法(ReactMultiChild)等重要的特性方法.

Virtual DOM

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/84636.html

相關(guān)文章

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

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

    lk20150415 評(píng)論0 收藏0

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

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

    glumes 評(píng)論0 收藏0

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

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

    Warren 評(píng)論0 收藏0

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

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

    daydream 評(píng)論0 收藏0

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

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

    U2FsdGVkX1x 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<