从渲染原理到性能优化

从渲染原理到性能优化黄琼（daisyhhuang）腾讯前端工程师，IMWeb团队成员企鹅辅导IMWeb社区邮箱：daisyhhuang@tencent.com微信：you-qiong-yue一、JSX如何生成element二、element如何生成真实DOM节点三、性能优化四、React16异步渲染MATCH_ word word文档格式规范word作业纸小票打印word模板word简历模板免费word简历 _1714100881612_0一、JSX如何生成element二、element如何生成realDOM三、性能优化四、React16异步渲染方案createElement的作用是生成element,参数如下1、type2、attributes，如果没有的话，可以为null3、childrenBabelJSXreturn(<divclassName="cn"><Header>Hello,ThisisReact</Header><div>Starttolearnrightnow!</div>RightReserve.</div>)return(React.createElement('div',{className:'cn'},React.createElement(Header,null,'Hello,ThisisReact'),React.createElement('div',null,'Starttolearnrightnow!'),'RightReserve'))React.createElementReact.createElement('div',{className:'cn'},React.createElement(Header,null,'Hello,ThisisReact'),React.createElement('div',null,‘Starttolearnrightnow!'),'RightReserve'){  type:'div',  props:{    className:'cn',    children:[      {        type:functionHeader,        props:{          children:'Hello,ThisisReact'        }      },      {        type:'div',        props:{          children:'starttolearnrightnow！'        }      },      'RightReserve'    ]  }}React.createElement何时被执行？Render函数被调用的时候执行Children现在看到有三种类型：1、String，2、原生DOM节点的element3、Reactcomponents–自定义组件的element4、false,null,undefined，number5、数组–使用map方法的时候Element{  type:'div',  props:{    className:'cn',    children:[      {        type:functionHeader,        props:{          children:'Hello,ThisisReact'        }      },      {        type:'div',        props:{          children:'starttolearnrightnow！'        }      },      'RightReserve'    ]  }}不单单是Object类型一、JSX如何生成element二、element如何生成realDOM三、性能优化四、React16异步渲染方案私有类:React自己使用，不会暴露给用户,常用方法：mountComponent,updateComponent等公共类：自定义的组件初始化elementReactDOMComponentReactCompositeComponentWrapperReactDOMTextComponentReactDOMEmptyComponentReactDOMComponentReactCompositeComponentWrapperReactDOMTextComponentReactDOMEmptyComponentmountComponent（container）:会将element转成真实DOM节点，并且插入到相应的container里，然后返回markup（realDOM）。ReactDOMComponent{type:'div',props:{className:'cn',children:'Helloworld',}}直接操作浏览器DOM元素mountComponent(container){constdomElement=document.createElement(this._currentElement.type);consttextNode=document.createTextNode(this._currentElement.props.children);domElement.appendChild(textNode);container.appendChild(domElement);returndomElement;}mountComponent:实例化自定义组件，最后是通过递归调用到ReactDOMComponent的mountComponent方法来得到真实DOM。ReactCompositeComponentWrapper首次渲染Example<div>HelloWorld!</div>React.render（<Example/>，container）ReactCompositeComponentWrapperReactDOMComponentmountComponent:1、实例化Example，得到instance对象2、renderedElement=Instance.render();3、初始化renderedElement，得到child4、child.mountComponent(container)mountComponent：根据element来生成对应的真实DOM节点componentWillMountcomponentDidMount<div>HelloWorld!</div>{type:'div',props:{children:'HelloWorld'}}{type:functionExample,props:{children:null}}生命周期生命周期函数在哪被调用？递归调用图片来源更新propsstate渲染更新setState将传入的state放进pendingState的数组里updateComponent用于直接操作更新浏览器DOM元素shouldComponentUpdatecomponentWillUpdatecomponentDidUpdateupdateComponent1、计算出nextState2、render()得到nextRenderElement3、与prevElement进行Diff比较,更新节点ReactCompositeComponentWrapperReactDOMComponent否dirtyComponent是当前是否处于批量更新遍历更新dirtyComponent生命周期生命周期函数在哪被调用？图片来源1、两个相同的组件产生类似的DOM结构，不同组件产生不同DOM结构Diff算法2、对于同一层级的一组子节点，它们可以通过唯一的id区分ABCDBC更新1、不同节点类型DBCTips:保持DOM标签类型的稳定2、相同节点类型<divclassName="before"title="stuff”/><divclassName="after"title="stuff”/>自定义组件3、子节点比较ABCCABCDTips:1、保持DOM结构的稳定性2、map的时候，加key一、JSX如何生成element二、element如何生成realDOM三、性能优化四、React16异步渲染方案1、why-did-you-update性能优化-工具介绍2、react-addons-perf性能优化-工具介绍1、Mount/UnmountKey稳定性-保持标签的稳定<div>-><section>-保持DOM结构的稳定性能优化2、避免重复渲染shouldComponentUpdatePureComponent(immutable.js)分离组件，只传入关心的值性能优化3、使用PureFunctionalComponentrecompose是否写组件的时候都直接使用PureComponent?目前react性能优化的点主要集中在防止重复渲染，DOM稳定性的方面：但是大家看一个问题：ABCDEFG一、JSX如何生成element二、element如何生成realDOM三、性能优化四、React16异步渲染方案1、比较阶段–可被打断2、commit阶段–不可被打断React16改动StackreconcilerFiberreconciler图片来源Phase1Reconciliation/renderPhase2commitcomponentWillMountcomponentWillReceivePropscomponentWillUpdateshouldComponentUpdatecomponentDidMountcomponentDidUpdatecomponentWillUnmountReact16生命周期的变化getDerivedStateFromPropsgetDerivedStateFromProps图片来源getDerivedFromPropsQ&A