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

資訊專欄INFORMATION COLUMN

【Under-the-hood-ReactJS-Part0】React源碼解讀

Turbo / 3211人閱讀

摘要：接上文完整流程圖見繼續(xù)我們的之旅，讓我們從的調(diào)用開始。他們就是用來表示組件方法的返回值，除此之外，沒有其他的。同時，在的創(chuàng)建期間，將會合并和如果有聲明的話，并且嚴(yán)重。顯然，這一步驟會引起一些性能問題。

接上文---

完整流程圖見：https://bogdan-lyashenko.gith...
繼續(xù)我們的React之旅，讓我們從ReactDOM.render的調(diào)用開始。

ReactDOM.render

ReactDOM.render是我們分析的入口點(diǎn)。我們的應(yīng)用從這里開始渲染內(nèi)容到DOM樹中。為了方便調(diào)試，我們創(chuàng)建了一個的簡單組件。整個流程的第一個動作就是把JSX轉(zhuǎn)換成React elements 。 React elements就是帶一些架構(gòu)的簡單對象。 他們就是用來表示組件render方法的返回值，除此之外，沒有其他的。對象中的一些字段，如props，key，ref對于大家應(yīng)該已經(jīng)很熟悉了。 type屬性表示的是JSX定義的標(biāo)記對象，在我們的案例中，就是類 ExampleApplication, 當(dāng)然，它也可以表示 Button標(biāo)簽的字符串格式等等。 同時，在React element的創(chuàng)建期間，React將會合并defaultProps和props（如果有聲明的話），并且嚴(yán)重propTypes。
更多詳情請查看源碼 srcisomorphicclassicelementReactElement.js

ReactMount

在流程圖中，你可以發(fā)現(xiàn)有個叫做ReactMount的模塊。它包含了整個組件掛載的邏輯。
其實(shí)，ReactDOM中是沒有任何邏輯的，它不過是一個用來調(diào)用ReactMount的接口，所以當(dāng)調(diào)用ReactDOM.render方法時，技術(shù)上來說，你真正調(diào)用的是ReactMount.render方法。那么整個掛載過程到底是怎么樣的呢？

Mounting is the process of initializing a React component by creating its representative DOM elements and inserting them into a supplied container.（掛載是指初始化一個React組件的過程，包括生成組件對應(yīng)的DOM元素并插入指定的容器中）

以上文字來自于React代碼的注釋，那么這些到底是一個怎么樣的過程呢？我們先看下以下的一個轉(zhuǎn)化：
React需要將你組件里的JSX描述轉(zhuǎn)化為對應(yīng)的HTML結(jié)構(gòu)，并插入到DOM樹中，這個過程，
React需要處理所有的屬性，綁定的事件，內(nèi)嵌的組件和所有邏輯。掛載，就是指把用高層次語言描述的組件（JSX）轉(zhuǎn)化為低層次的html代碼，然后插入到DOM樹中。

為了讓以上描述更具體下，考慮如下需求：

目標(biāo)：確保滾動事件被監(jiān)聽
在一個根組件的第一次渲染過程中，React會初始化滾動監(jiān)聽事件，并且把滾動條相關(guān)數(shù)值緩存起來，這樣，當(dāng)應(yīng)用代碼可以在不觸發(fā)重排(reflow)的前提下，訪問到滾動條相關(guān)數(shù)據(jù)。由于不同的游覽器會有不同的實(shí)現(xiàn)，一些DOM的數(shù)值是非固定的，每次當(dāng)你在代碼中獲取它們時，它們都有可能會重新計算。顯然，這一步驟會引起一些性能問題。比如，一些老的游覽器，是不支持pageX和pageY屬性的。為了解決這個問題，React會做一些優(yōu)化,而這些優(yōu)化過程中，可能就會需要很多其它技巧。在其它問題中，React為了解決某個具體的問題，都會用到很多技巧，滾動條就是一個具體的列子。
實(shí)例化React組件

回顧下最開始的流程圖，這里有一個實(shí)例創(chuàng)建的過程。事實(shí)上，目前去創(chuàng)建一個的實(shí)例還有點(diǎn)早，這里我們真正實(shí)例化的是類TopLevelWrapper（React內(nèi)部類）。我們先跳過這個過程，看下一個流程。

在JSX的轉(zhuǎn)化過程中，這里有三個階段。JSX轉(zhuǎn)化成React elements后，React elements會被轉(zhuǎn)化為以下內(nèi)部React組件類型中的一：ReactCompositeComponent(開發(fā)自定義的組件)，ReactDOMComponent（HTML DOM節(jié)點(diǎn)），ReactDOMTextComponent（文本節(jié)點(diǎn)）。我們先忽略ReactDOMTextComponent，重點(diǎn)放在前兩個。

什么是內(nèi)部組件呢？你可能已經(jīng)聽過虛擬DOM。虛擬DOM是一種DOM的表示方式，在React的diff差異計算以及其它過程中，使用虛擬DOM使得可以不直接DOM樹，而這恰是React性能不錯的原因之一。其實(shí)，在React的源碼中，并沒有什么文件或者類被稱作虛擬DOM，因?yàn)樘摂MDOM只是一種概念，一種用來描述如何處理真實(shí)DOM的手段。有些人可能會說虛擬DOM表示的就是React elements，但是我不這么認(rèn)為。在我看來，虛擬DOM指的是這三個類：ReactCompositeComponent，ReactDOMComponent，ReactDOMTextComponent。稍后我會詳細(xì)解釋原因。

讓我們繼續(xù)組件的實(shí)例化。我們會創(chuàng)建一個ReactCompositeComponent的實(shí)例，但是，
這個實(shí)例并不是因?yàn)槲覀儗?ExampleApplication/>放入ReactDOM.render中然后才生成的。React總是從TopLevelWrapper里開始渲染一個組件樹。它幾乎是一個純包裝組件，它的render方法（組件的render方法）將會返回。代碼如下：

//src
enderersdomclientReactMount.js#277
TopLevelWrapper.prototype.render = function () {
  return this.props.child;
};

根據(jù)以上代碼，很顯然只有一個TopLevelWrapper的實(shí)例被創(chuàng)建了，除此之外就沒有其它的了。在繼續(xù)下一步之前，我們看下以下內(nèi)容：

DOM內(nèi)嵌驗(yàn)證
幾乎每次內(nèi)嵌組件渲染時，它們都會被一個專門用來做HTML驗(yàn)證的模塊--validateDOMNesting--來驗(yàn)證結(jié)構(gòu)是否合法。所謂的DOM內(nèi)嵌驗(yàn)證是指校驗(yàn)子模塊和父模塊的標(biāo)簽層次。比如，如果父組件的標(biāo)簽是
    • <ul id="mqkii"></ul>
    • <strike id="mqkii"><menu id="mqkii"></menu></strike>
      

<