從渲染原理到性能優(yōu)化PPT課件

1、黃瓊（黃瓊（daisyhhuangdaisyhhuang）騰訊前端工程師，騰訊前端工程師，IMWebIMWeb團隊成員團隊成員企鵝輔導企鵝輔導IMWebIMWeb 社區(qū)社區(qū)郵箱：郵箱：微信：微信：you-you-qiongqiong- -yueyue一、JSX如何生成element二、element如何生成真實DOM節(jié)點三、性能優(yōu)化四、React 16異步渲染方案一、一、JSXJSX如何生成如何生成elementelement二、element如何生成realDOM三、性能優(yōu)化四、React 16異步渲染方案createElementcreateElement的作用是生成的作用是生成eleme

2、nt,element, 參數(shù)如下參數(shù)如下1 1、typetype2 2、attributesattributes，如果沒有的話，可以為，如果沒有的話，可以為nullnull3 3、childrenchildrenBabelreturn( Hello, This is React Start to learn right now!Right Reserve. )return(React.createElement(div, className: cn ,React.createElement(Header,null,Hello, This is React),React.createElemen

3、t(div,null,Start to learn right now!),Right Reserve)React.createElement( div, className: cn , React.createElement( Header, null, Hello, This is React ), React.createElement( div, null, Start to learn right now! ), Right Reserve)type: div,props: className: cn,children: type: function Header,props: ch

4、ildren: Hello, This is React,type: div,props: children: start to learn right now！,Right ReserveReact.createElementReact.createElement 何時被執(zhí)行？何時被執(zhí)行？RenderRender 函數(shù)被調(diào)用的函數(shù)被調(diào)用的時候執(zhí)行時候執(zhí)行ChildrenChildren現(xiàn)在看到有三種類型：現(xiàn)在看到有三種類型：1 1、StringString，2 2、原生、原生DOMDOM節(jié)點的節(jié)點的elementelement3 3、ReactReact componentscomponen

5、ts 自定義組件自定義組件的的elementelement4 4、false,false, null,undefinednull,undefined，numbernumber5 5、數(shù)組、數(shù)組 使用使用mapmap方法的時候方法的時候type: div,props: className: cn,children: type: function Header,props: children: Hello, This is React,type: div,props: children: start to learn right now！,Right Reserve不單單是Object類型一、一、

6、JSXJSX如何生成如何生成elementelement二、二、elementelement如何生成如何生成realDOMrealDOM三、性能優(yōu)化三、性能優(yōu)化四、四、ReactReact 1616異步渲染方案異步渲染方案私有類私有類: : ReactReact自己使用，不會暴露給用戶自己使用，不會暴露給用戶, ,常用方法：常用方法：mountComponentmountComponent, , updateComponentupdateComponent等等公共類：自定義的組件公共類：自定義的組件 初始化elementReactDOMComponentReactCompositeCompon

7、entWrapperReactDOMTextComponentReactDOMEmptyComponentReactDOMComponentReactCompositeComponentWrapperReactDOMTextComponentReactDOMEmptyComponentmountComponentmountComponent（containercontainer）: : 會將會將elementelement轉(zhuǎn)成真實轉(zhuǎn)成真實DOMDOM節(jié)點，并節(jié)點，并且插入到相應的且插入到相應的containercontainer里，然后返回里，然后返回markupmarkup（realreal

8、 DOMDOM）。）。 type: div,props: className: cn,children: Hello world,直接操作瀏覽器DOM元素mountComponent(container) const domElement = document.createElement(this._currentElement.type);const textNode = document.createTextNode(this._currentEps.children);domElement.appendChild(textNode);container.appendC

9、hild(domElement);return domElement;mountComponentmountComponent: : 實例化自定義組件，最后是通過遞歸調(diào)用到實例化自定義組件，最后是通過遞歸調(diào)用到ReactDOMComponentReactDOMComponent的的mountComponentmountComponent方法方法來得到真實來得到真實DOMDOM。ExampleExampleHelloHello World!World!React.renderReact.render（Example/， containercontainer）ReactCompositeCompo

10、nentWrapperReactCompositeComponentWrapperReactDOMComponentReactDOMComponentmountComponentmountComponent: :1 1、實例化、實例化ExampleExample，得到，得到instanceinstance對象對象2 2、renderedElementrenderedElement = = Instance.renderInstance.render();();3 3、初始化、初始化renderedElementrenderedElement ，得到，得到childchild4 4、child.

11、child.mountComponentmountComponent(container)(container)mountComponentmountComponent：根據(jù)根據(jù)elementelement來生成對應的真實來生成對應的真實DOMDOM節(jié)點節(jié)點componentWillMountcomponentWillMountcomponentDidMountcomponentDidMountHelloHello World!World! type: div,type: div, props: props: children: Hello Worldchildren: Hello World

12、 type: function Example,type: function Example, props: props: children: nullchildren: null 生命周期生命周期生命周期函數(shù)在哪被生命周期函數(shù)在哪被調(diào)用？調(diào)用？遞歸調(diào)用遞歸調(diào)用圖片來源更新更新propspropsstatestatesetStatesetState將傳入的將傳入的statestate放進放進pendingStatependingState的數(shù)組里的數(shù)組里updateComponentupdateComponent用于直接操作更新瀏覽器用于直接操作更新瀏覽器DOMDOM元素元素shouldCom

13、ponentUpdateshouldComponentUpdatecomponentWillUpdatecomponentWillUpdatecomponentDidUpdatecomponentDidUpdateupdateComponentupdateComponent1 1、計算出、計算出nextStatenextState2 2、render()render()得到得到nextRenderElementnextRenderElement3 3、與、與prevElementprevElement 進行進行Diff Diff 比較比較, ,更新節(jié)點更新節(jié)點ReactCompositeCom

14、ponentWrapperReactCompositeComponentWrapperReactDOMComponentReactDOMComponent否否dirtyComponentdirtyComponent是是當前是否處于批量更新當前是否處于批量更新遍歷更新遍歷更新 dirtyComponentdirtyComponent生命周期生命周期生命周期函數(shù)在哪被調(diào)生命周期函數(shù)在哪被調(diào)用？用？圖片來源1 1、兩個相同的組件產(chǎn)生類似的兩個相同的組件產(chǎn)生類似的DOMDOM結(jié)構(gòu)，不同組件產(chǎn)生不同結(jié)構(gòu)，不同組件產(chǎn)生不同DOMDOM結(jié)構(gòu)結(jié)構(gòu)2 2、對于同一層級的一組子節(jié)點，它們可以通過唯一的對于同一層級

15、的一組子節(jié)點，它們可以通過唯一的id id區(qū)分區(qū)分A AB BC CD DB BC C更新更新1 1、不同節(jié)點類型、不同節(jié)點類型D DB BC CTips:Tips:保持保持DOMDOM標簽類型的穩(wěn)定標簽類型的穩(wěn)定2、相同節(jié)點類型自定義組件3、子節(jié)點比較ABCCABCDTips: 1、保持DOM結(jié)構(gòu)的穩(wěn)定性2、map的時候，加key一、JSX如何生成element二、element如何生成realDOM三、性能優(yōu)化四、React 16異步渲染方案1、why-did-you-update工具介紹2、react-addons-perf工具介紹1 1、Mount/Mount/UnmountUnmou

16、nt KeyKey 穩(wěn)定性穩(wěn)定性 - - 保持標簽的穩(wěn)定保持標簽的穩(wěn)定 - - - 保持保持DOMDOM結(jié)構(gòu)的穩(wěn)定結(jié)構(gòu)的穩(wěn)定2 2、避免重復渲染避免重復渲染 shouldComponentUpdateshouldComponentUpdate PureComponentPureComponent( (immutable.jsimmutable.js) ) 分離組件，只傳入關(guān)心的值分離組件，只傳入關(guān)心的值3 3、使用、使用PurePure FunctionalFunctional ComponentComponentrecomposerecompose是否寫組件的時候都直是否寫組件的時候都直接使

17、用接使用PureComponentPureComponent? ?目前目前reactreact 性能優(yōu)化的點主要集中在防止重復渲染，性能優(yōu)化的點主要集中在防止重復渲染，DOMDOM穩(wěn)定性的方穩(wěn)定性的方面：面：但是大家看一個但是大家看一個問題問題：ABCDEFG一、一、JSXJSX如何生成如何生成elementelement二、二、elementelement如何生成如何生成realDOMrealDOM三、性能優(yōu)化三、性能優(yōu)化四、四、ReactReact 1616異步渲染方案異步渲染方案1 1、比較階段、比較階段 可被打斷可被打斷2 2、commitcommit階段階段 不可被打斷不可被打斷St

18、ack reconcilerFiber reconciler圖片來源PhasePhase 1 1 Reconciliation/renderReconciliation/renderPhasePhase 2 2 commitcommitcomponentWillMountcomponentWillMountcomponentWillReceivePropscomponentWillReceivePropscomponentWillUpdatecomponentWillUpdateshouldComponentUpdateshouldComponentUpdatecomponentDidMountcomponentDidMountcomponentDidUpdatecomponentDidUpdatecomponentWillUnmountcomponentWillUnmo