1.在JSXReact17之前，我们在写React代码的时候都会引入React，而我们自己的代码中并没有使用它。为什么？这是因为我们的JSX代码会被Babel编译成React.createElement，我们来看看Babel的表现。需要注意的是，自定义组件时，首字母需要大写，才会被识别为组件。这是一个规则。默认情况下，小写字母将被视为html标记并编译为字符串。结论：JSX的本质是React.createElementJavaScript调用的语法糖。是JS的语法扩展2.React.createElement源码阅读从上面我们知道jsx是通过babel编译成React.createElement的，我们来看看相关源码：2.1输入引用解释输入引用解释：what创建元素需要知道的信息导出函数createElement(type,config,children)createElement有3个输入参数，其中包含React创建元素需要知道的所有信息。type：用于标识节点的类型。它可以是标准的HTML标签字符串，如“h1”“div”，也可以是React组件类型或React片段类型。config：作为对象传入，组件的所有属性都会以键值对的形式存储在config对象中。children：作为对象传入，它记录嵌套在组件标签之间的内容，也就是所谓的“子节点”和“子元素”。React.createElement("ul",{//传入属性键值对className:"list"//从第三个入参开始，传入的参数都是children},React.createElement("li",{key:"1"},"1"),React.createElement("li",{key:"2"},"2"));对应的DOM结构12来自入口文件React.js文件，React.createElement方法是从ReactElement文件中引入的。我们只要进入这个文件，找到createElement方法即可。2.1.1先看config参数的处理//config对象存储元素的属性if(config!=null){//进入后首先要做的是依次ref,key,self和source属性赋值if(hasValidRef(config)){ref=config.ref;}//在这里将键值字符串化if(hasValidKey(config)){key=''+config.key;}self=config.__self===未定义？空：config.__self；来源=config.__来源===未定义？空：配置.__源；//接下来就是将config中的所有属性都移动到props中，之前声明的对象)&&!RESERVED_PROPS.hasOwnProperty(propName)){props[propName]=config[propName];}}}这段代码对ref和key做了一个校验过程。我们不关心如何验证它。我们可以从方法名来识别，然后遍历config，把属性放到props对象中。constRESERVED_PROPS={key:true,ref:true,__self:true,__source:true,};也就是说，删除ref和key。2.1.2接下来是对children的操作//childrenLength指的是当前元素的子元素个数，减去2就是type和config两个参数占用的长度constchildrenLength=arguments.length-2;//如果type和config丢掉，就只剩下一个参数，一般表示出现一个文本节点if(childrenLength===1){//直接把这个参数的值赋给props.childrenprops.children=儿童；//处理嵌套多个子元素的情况}elseif(childrenLength>1){//声明一个子元素数组constchildArray=Array(childrenLength);//将子元素压入数组for(leti=0;i我是标题我是内容
)console.log(AppJSX)consoleresults:这个ReactElement对象实例本质上是一个JavaScript对象形式的对DOM的描述，即虚拟DOM3.3扩展知识。既然是虚拟DOM，就意味着它和页面上渲染的真实DOM不是一回事，所以需要使用ReactDOM.render方法来渲染真实DOM。ReactDOM.render(//需要渲染的元素（ReactElement）element,//挂载元素的目标容器（一个真实的DOM）container,//回调函数，可选参数，可以用来处理之后的逻辑rendering[callback])ReactDOM.render方法可以接收3个参数，第二个参数是一个真实的DOM节点，这个真实的DOM节点充当一个“容器”，React元素最终会被渲染到这个“容器”中。例如，对于示例中的App组件，其对应的render调用如下：constrootElement=document.getElementById("root");ReactDOM.render(
,rootElement);
