国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專(zhuān)題視頻專(zhuān)題問(wèn)答1問(wèn)答10問(wèn)答100問(wèn)答1000問(wèn)答2000關(guān)鍵字專(zhuān)題1關(guān)鍵字專(zhuān)題50關(guān)鍵字專(zhuān)題500關(guān)鍵字專(zhuān)題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專(zhuān)題關(guān)鍵字專(zhuān)題tag2tag3文章專(zhuān)題文章專(zhuān)題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專(zhuān)題3
問(wèn)答文章1 問(wèn)答文章501 問(wèn)答文章1001 問(wèn)答文章1501 問(wèn)答文章2001 問(wèn)答文章2501 問(wèn)答文章3001 問(wèn)答文章3501 問(wèn)答文章4001 問(wèn)答文章4501 問(wèn)答文章5001 問(wèn)答文章5501 問(wèn)答文章6001 問(wèn)答文章6501 問(wèn)答文章7001 問(wèn)答文章7501 問(wèn)答文章8001 問(wèn)答文章8501 問(wèn)答文章9001 問(wèn)答文章9501
當(dāng)前位置: 首頁(yè) - 科技 - 知識(shí)百科 - 正文

React首次渲染的解析一(純DOM元素)

來(lái)源:懂視網(wǎng) 責(zé)編:小采 時(shí)間:2020-11-27 19:29:41
文檔

React首次渲染的解析一(純DOM元素)

React首次渲染的解析一(純DOM元素):本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于React首次渲染的解析(純DOM元素),有一定的參考價(jià)值,有需要的朋友可以參考一下,希望對(duì)你有所幫助。React 是一個(gè)十分龐大的庫(kù),由于要同時(shí)考慮 ReactDom 和 ReactNative ,還有服務(wù)器渲染等,導(dǎo)致其代碼抽象化程度很高,嵌
推薦度:
導(dǎo)讀React首次渲染的解析一(純DOM元素):本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于React首次渲染的解析(純DOM元素),有一定的參考價(jià)值,有需要的朋友可以參考一下,希望對(duì)你有所幫助。React 是一個(gè)十分龐大的庫(kù),由于要同時(shí)考慮 ReactDom 和 ReactNative ,還有服務(wù)器渲染等,導(dǎo)致其代碼抽象化程度很高,嵌
本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于React首次渲染的解析(純DOM元素),有一定的參考價(jià)值,有需要的朋友可以參考一下,希望對(duì)你有所幫助。

React 是一個(gè)十分龐大的庫(kù),由于要同時(shí)考慮 ReactDom 和 ReactNative ,還有服務(wù)器渲染等,導(dǎo)致其代碼抽象化程度很高,嵌套層級(jí)非常深,閱讀其源碼是一個(gè)非常艱辛的過(guò)程。在學(xué)習(xí) React 源碼的過(guò)程中,給我?guī)椭畲蟮木褪沁@個(gè)系列文章,于是決定基于這個(gè)系列文章談一下自己的理解。本文會(huì)大量用到原文中的例子,想體會(huì)原汁原味的感覺(jué),推薦閱讀原文。

本系列文章將基于 React 15.4.2。

  • React.createElement

  • 在寫(xiě) React 項(xiàng)目的時(shí)候,我們一般會(huì)直接用 JSX 的形式來(lái)寫(xiě),而 JSX 經(jīng)過(guò) Babel 編譯后最終會(huì)將 HTML 標(biāo)簽轉(zhuǎn)換為React.createElement的函數(shù)形式。如果想進(jìn)行更深入的了解,可以看我之前寫(xiě)的這篇文章:你不知道的Virtual DOM(一):Virtual Dom介紹。文章中的h函數(shù),如果不在 Babel 中配置的話(huà),默認(rèn)就是React.createElement。

    下面,我們將從一個(gè)最簡(jiǎn)單的例子,來(lái)看React是如何渲染的

    ReactDOM.render(
     <h1 style={{"color":"blue"}}>hello world</h1>,
     document.getElementById('root')
    );

    經(jīng)過(guò)JSX編譯后,會(huì)是下面這個(gè)樣子

    ReactDOM.render(
     React.createElement(
     'h1',
     { style: { "color": "blue" } },
     'hello world'
     ),
     document.getElementById('root')
    );

    先來(lái)看下React.createElement的源碼。

    // 文件位置:src/isomorphic/React.js
    
    var ReactElement = require('ReactElement');
    
    ...
    
    var createElement = ReactElement.createElement;
    
    ...
    
    var React = {
     ...
     
     createElement: createElement,
     
     ...
    }
    
    module.exports = React;

    最終的實(shí)現(xiàn)需要查看ReactElement.createElement

    // 文件位置:src/isomorphic/classic/element/ReactElement.js
    
    ReactElement.createElement = function (type, config, children) {
     ...
    
     // 1. 將過(guò)濾后的有效的屬性,從config拷貝到props
     if (config != null) {
     
     ...
     
     for (propName in config) {
     if (hasOwnProperty.call(config, propName) &&
     !RESERVED_PROPS.hasOwnProperty(propName)) {
     props[propName] = config[propName];
     }
     }
     }
    
     // 2. 將children以數(shù)組的形式拷貝到props.children屬性
     var childrenLength = arguments.length - 2;
     if (childrenLength === 1) {
     props.children = children;
     } else if (childrenLength > 1) {
     var childArray = Array(childrenLength);
     for (var i = 0; i < childrenLength; i++) {
     childArray[i] = arguments[i + 2];
     }
     if (__DEV__) {
     if (Object.freeze) {
     Object.freeze(childArray);
     }
     }
     props.children = childArray;
     }
    
     // 3. 默認(rèn)屬性賦值
     if (type && type.defaultProps) {
     var defaultProps = type.defaultProps;
     for (propName in defaultProps) {
     if (props[propName] === undefined) {
     props[propName] = defaultProps[propName];
     }
     }
     }
     
     ...
     
     return ReactElement(
     type,
     key,
     ref,
     self,
     source,
     ReactCurrentOwner.current,
     props
     );
    };

    本質(zhì)上只做了3件事:

    1. 將過(guò)濾后的有效的屬性,從config拷貝到props

    2. 將children以數(shù)組的形式拷貝到props.children屬性

    3. 默認(rèn)屬性賦值

    最終的返回值是ReactElement。我們?cè)賮?lái)看看它做了什么

    // 文件位置:src/isomorphic/classic/element/ReactElement.js
    
    var ReactElement = function (type, key, ref, self, source, owner, props) {
     var element = {
     // This tag allow us to uniquely identify this as a React Element
     $$typeof: REACT_ELEMENT_TYPE,
    
     // Built-in properties that belong on the element
     type: type,
     key: key,
     ref: ref,
     props: props,
    
     // Record the component responsible for creating this element.
     _owner: owner,
     };
     
     ...
    
     return element;
    };

    最終只是返回了一個(gè)簡(jiǎn)單對(duì)象。調(diào)用棧是這樣的:

    React.createElement
    |=ReactElement.createElement(type, config, children)
     |-ReactElement(type,..., props)

    這里生成的 ReactElement 我們將其命名為ReactElement[1],它將作為參數(shù)傳入到 ReactDom.render。

  • ReactDom.render

  • ReactDom.render 最終會(huì)調(diào)用 ReactMount 的 _renderSubtreeIntoContainer:

    // 文件位置:src/renderers/dom/client/ReactMount.js
    
    _renderSubtreeIntoContainer: function (parentComponent, nextElement, container, callback) {
     ...
     var nextWrappedElement = React.createElement(
     TopLevelWrapper, 
     {
     child: nextElement
     }
     );
    
     ...
     
     var component = ReactMount._renderNewRootComponent(
     nextWrappedElement,
     container,
     shouldReuseMarkup,
     nextContext
     )._renderedComponent.getPublicInstance();
     
     ...
     
     return component;
    },
    
    ...
    
    var TopLevelWrapper = function () {
     this.rootID = topLevelRootCounter++;
    };
    
    TopLevelWrapper.prototype.isReactComponent = {};
    
    TopLevelWrapper.prototype.render = function () {
     return this.props.child;
    };
    
    TopLevelWrapper.isReactTopLevelWrapper = true;
    
    ...
    
    _renderNewRootComponent: function (
     nextElement,
     container,
     shouldReuseMarkup,
     context
    ) {
     ...
     
     var componentInstance = instantiateReactComponent(nextElement, false);
    
     ...
    
     return componentInstance;
    },

    這里又會(huì)調(diào)用到另一個(gè)文件 instantiateReactComponent:

    // 文件位置:src/renders/shared/stack/reconciler/instantiateReactComponent.js
    
    function instantiateReactComponent(node, shouldHaveDebugID) {
     var instance;
    
     ...
    
     instance = new ReactCompositeComponentWrapper(element);
     
     ...
    
     return instance;
    }
    
    // To avoid a cyclic dependency, we create the final class in this module
    var ReactCompositeComponentWrapper = function (element) {
     this.construct(element);
    };
    
    Object.assign(
     ReactCompositeComponentWrapper.prototype,
     ReactCompositeComponent, 
     {
     _instantiateReactComponent: instantiateReactComponent,
     }
    );

    這里又會(huì)調(diào)用到另一個(gè)文件 ReactCompositeComponent:

    // 文件位置:src/renders/shared/stack/reconciler/ReactCompositeComponent.js
    
    var ReactCompositeComponent = {
     construct: function (element) {
     this._currentElement = element;
     this._rootNodeID = 0;
     this._compositeType = null;
     this._instance = null;
     this._hostParent = null;
     this._hostContainerInfo = null;
    
     // See ReactUpdateQueue
     this._updateBatchNumber = null;
     this._pendingElement = null;
     this._pendingStateQueue = null;
     this._pendingReplaceState = false;
     this._pendingForceUpdate = false;
    
     this._renderedNodeType = null;
     this._renderedComponent = null;
     this._context = null;
     this._mountOrder = 0;
     this._topLevelWrapper = null;
    
     // See ReactUpdates and ReactUpdateQueue.
     this._pendingCallbacks = null;
    
     // ComponentWillUnmount shall only be called once
     this._calledComponentWillUnmount = false;
    
     if (__DEV__) {
     this._warnedAboutRefsInRender = false;
     }
     }
     
     ...
    }

    我們用ReactCompositeComponent[T]來(lái)表示這里生成的頂層 component。

    整個(gè)的調(diào)用棧是這樣的:

    ReactDOM.render
    |=ReactMount.render(nextElement, container, callback)
    |=ReactMount._renderSubtreeIntoContainer()
     |-ReactMount._renderNewRootComponent(
     nextWrappedElement, // scr:------------------> ReactElement[2]
     container, // scr:------------------> document.getElementById('root')
     shouldReuseMarkup, // scr: null from ReactDom.render()
     nextContext, // scr: emptyObject from ReactDom.render()
     )
     |-instantiateReactComponent(
     node, // scr:------------------> ReactElement[2]
     shouldHaveDebugID /* false */
     )
     |-ReactCompositeComponentWrapper(
     element // scr:------------------> ReactElement[2]
     );
     |=ReactCompositeComponent.construct(element)

    組件間的層級(jí)結(jié)構(gòu)是這樣的:

    4100563483-5bc9a047e64c5_articlex.png

    當(dāng)頂層組件構(gòu)建完畢后,下一步就是調(diào)用 batchedMountComponentIntoNode(來(lái)自 ReactMount 的 _renderNewRootComponent方法),進(jìn)行頁(yè)面的渲染了。

    聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

    文檔

    React首次渲染的解析一(純DOM元素)

    React首次渲染的解析一(純DOM元素):本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于React首次渲染的解析(純DOM元素),有一定的參考價(jià)值,有需要的朋友可以參考一下,希望對(duì)你有所幫助。React 是一個(gè)十分龐大的庫(kù),由于要同時(shí)考慮 ReactDom 和 ReactNative ,還有服務(wù)器渲染等,導(dǎo)致其代碼抽象化程度很高,嵌
    推薦度:
    標(biāo)簽: 講解 首次 解析
    • 熱門(mén)焦點(diǎn)

    最新推薦

    猜你喜歡

    熱門(mén)推薦

    專(zhuān)題
    Top
    主站蜘蛛池模板: 国产国产成人精品久久 | 日韩国产欧美 | 国产亚洲欧美精品久久久 | 精品国产一区二区三区在线 | 亚洲国产成人影院播放 | 国产只有精品 | 国产乱淫a∨片免费视频 | 亚洲一区二区三区视频 | 欧美一区二区在线观看 | 丝袜影音先锋 | 午夜国产在线视频 | 国产高清美女一级a毛片久久 | 91久久精品国产亚洲 | 看国产一级毛片 | a一级毛片免费播放 | 视频在线观看国产 | 欧美色图亚洲自拍 | 精品免费在线 | 国产精品久久久久久久久鸭 | 日韩高清在线观看 | 国产精品一区二区三区高清在线 | 国产盗摄精品一区二区三区 | 国产成人久久精品激情 | 久久www免费人成_看片美女图 | 日韩欧美三区 | 国产成人久久综合二区 | 九九国产精品视频 | 国产亚洲精品一品区99热 | 囗交免费毛片 | 欧美亚洲日本国产 | 国产精品九九久久精品女同 | 可播放的免费男男videos不卡 | 国产一二区视频 | 欧美视频精品一区二区三区 | 欧美喷水 | 亚洲日韩视频 | 欧美一区二区三区视频在线 | 在线免费观看国产精品 | 午夜精品视频在线观看 | 91精品国产99久久 | 精品国产欧美一区二区三区成人 |