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

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

2、nt,element, 參數(shù)如下參數(shù)如下1 1、typetype2 2、attributesattributes，如果沒(méi)有的話(huà)，可以為，如果沒(méi)有的話(huà)，可以為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 何時(shí)被執(zhí)行？何時(shí)被執(zhí)行？RenderRender 函數(shù)被調(diào)用的函數(shù)被調(diào)用的時(shí)候執(zhí)行時(shí)候執(zhí)行ChildrenChildren現(xiàn)在看到有三種類(lèi)型：現(xiàn)在看到有三種類(lèi)型：1 1、StringString，2 2、原生、原生DOMDOM節(jié)點(diǎn)的節(jié)點(diǎn)的elementelement3 3、ReactReact componentscomponen

5、ts 自定義組件自定義組件的的elementelement4 4、false,false, null,undefinednull,undefined，numbernumber5 5、數(shù)組、數(shù)組 使用使用mapmap方法的時(shí)候方法的時(shí)候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類(lèi)型一、一、

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

7、entWrapperReactDOMTextComponentReactDOMEmptyComponentReactDOMComponentReactCompositeComponentWrapperReactDOMTextComponentReactDOMEmptyComponentmountComponentmountComponent（containercontainer）: : 會(huì)將會(huì)將elementelement轉(zhuǎn)成真實(shí)轉(zhuǎn)成真實(shí)DOMDOM節(jié)點(diǎn)，并節(jié)點(diǎn)，并且插入到相應(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: : 實(shí)例化自定義組件，最后是通過(guò)遞歸調(diào)用到實(shí)例化自定義組件，最后是通過(guò)遞歸調(diào)用到ReactDOMComponentReactDOMComponent的的mountComponentmountComponent方法方法來(lái)得到真實(shí)來(lái)得到真實(shí)DOMDOM。ExampleExampleHelloHello World!World!React.renderReact.render（Example/， containercontainer）ReactCompositeCompo

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

11、child.mountComponentmountComponent(container)(container)mountComponentmountComponent：根據(jù)根據(jù)elementelement來(lái)生成對(duì)應(yīng)的真實(shí)來(lái)生成對(duì)應(yīng)的真實(shí)DOMDOM節(jié)點(diǎn)節(jié)點(diǎn)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)用圖片來(lái)源更新更新propspropsstatestatesetStatesetState將傳入的將傳入的statestate放進(jìn)放進(jìn)pendingStatependingState的數(shù)組里的數(shù)組里updateComponentupdateComponent用于直接操作更新瀏覽器用于直接操作更新瀏覽器DOMDOM元素元素shouldCom

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

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

15、的一組子節(jié)點(diǎn)，它們可以通過(guò)唯一的id id區(qū)分區(qū)分A AB BC CD DB BC C更新更新1 1、不同節(jié)點(diǎn)類(lèi)型、不同節(jié)點(diǎn)類(lèi)型D DB BC CTips:Tips:保持保持DOMDOM標(biāo)簽類(lèi)型的穩(wěn)定標(biāo)簽類(lèi)型的穩(wěn)定2、相同節(jié)點(diǎn)類(lèi)型自定義組件3、子節(jié)點(diǎn)比較ABCCABCDTips: 1、保持DOM結(jié)構(gòu)的穩(wěn)定性2、map的時(shí)候，加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是否寫(xiě)組件的時(shí)候都直是否寫(xiě)組件的時(shí)候都直接使

17、用接使用PureComponentPureComponent? ?目前目前reactreact 性能優(yōu)化的點(diǎn)主要集中在防止重復(fù)渲染，性能優(yōu)化的點(diǎn)主要集中在防止重復(fù)渲染，DOMDOM穩(wěn)定性的方穩(wěn)定性的方面：面：但是大家看一個(gè)但是大家看一個(gè)問(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圖片來(lái)源PhasePhase 1 1 Reconciliation/renderReconciliation/renderPhasePhase 2 2 commitcommitcomponentWillMountcomponentWillMountcomponentWillReceivePropscomponentWillReceivePropscomponentWillUpdatecomponentWillUpdateshouldComponentUpdateshouldComponentUpdatecomponentDidMountcomponentDidMountcomponentDidUpdatecomponentDidUpdatecomponentWillUnmountcomponentWillUnmo