1。什么是虚拟DOM？在React中，render执行的结果并不是真正的DOM节点，而只是一个轻量级的JavaScript对象，我们称之为虚拟DOM。简单来说，所谓虚拟DOM，其实就是JavaScript对象到HtmlDOM节点的映射；即用JavaScript对象来表示Html结构，这个对象就是虚拟DOM。eg:Html:Item1Item2JavaScript对象表示（虚拟DOM){tagName:'ul',props:{id:'list'},children:[{tagName:'li',props:{class:'item'},children:["Item1"]},{tagName:'li',props:{class:'item'},children:["Item2"]},]}2、什么时候生成到虚拟DOMReact生命周期有加载、更新、卸载三个阶段;附上前面React生命周期图中提到的：render执行的结果并不是一个真正的DOM节点，而是一个轻量级的JavaScript对象，即调用render函数时会创建一个虚拟DOM；classTabextendsReact.Component{render(){React.createElement('p',{className:'class'},'HelloReact')}}通过React.createElemen创建虚拟DOM，该函数只在Render函数，因此在React加载更新的过程中会生成虚拟DOM；至于挂载到真正的DOM，自然是ReactDom.render函数。3.如何实现虚拟DOM实现其实很简单。主要是定义了一个函数，将我们传入的参数组成一个React元素对象，type就是我们传入的组件类型，可以是类，函数或者字符串（比如'div'）React源码：functioncreateElement（类型，配置，孩子）{letpropName;常量道具={};让键=空；让ref=null；让自己=空；让源=空；if(config!=null){if(hasValidRef(config)){//如果有ref，取出ref=config.ref;}if(hasValidKey(config)){//如果有key，取出key=''+config.key;}self=config.__self===未定义？空：config.__self；来源=config.__来源===未定义？空：配置.__源；for(propNameinconfig){if(hasOwnProperty.call(config,propName)&&!RESERVED_PROPS.hasOwnProperty(propName)){//将ref和key等特殊属性放入新的props对象中props[propName]=config[propName];}}}//获取子元素constchildrenLength=arguments.length-2;if(childrenLength===1){props.children=children;}别的如果(childrenLength>1){constchildArray=Array(childrenLength);for(leti=0;i
