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

1、黃瓊（黃瓊（daisyhhuangdaisyhhuang）騰訊前端工程師，騰訊前端工程師，IMWebIMWeb團隊成員團隊成員企鵝輔導(dǎo)企鵝輔導(dǎo)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é)點，并且插入到相應(yīng)的且插入到相應(yīng)的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來生成對應(yīng)的真實來生成對應(yīng)的真實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是是當(dāng)前是否處于批量更新當(dāng)前是否處于批量更新遍歷更新遍歷更新 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標(biāo)簽類型的穩(wěn)定標(biāo)簽類型的穩(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)定性 - - 保持標(biāo)簽的穩(wěn)定保持標(biāo)簽的穩(wěn)定 - - - 保持保持DOMDOM結(jié)構(gòu)的穩(wěn)定結(jié)構(gòu)的穩(wěn)定2 2、避免重復(fù)渲染避免重復(fù)渲染 shouldComponentUpdateshouldComponentUpdate PureComponentPureComponent( (immutable.jsimmutable.js) ) 分離組件，只傳入關(guān)心的值分離組件，只傳入關(guān)心的值3 3、使用、使用PurePure FunctionalFunctional ComponentComponentrecomposerecompose是否寫組件的時候都直是否寫組件的時候都直接使

17、用接使用PureComponentPureComponent? ?目前目前reactreact 性能優(yōu)化的點主要集中在防止重復(fù)渲染，性能優(yōu)化的點主要集中在防止重復(fù)渲染，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