在React日常开发中,我们习惯了用JSX描述React组件的内容。关于JSX本身的语法，大家都不会陌生。我来创建一个简单的react组件，用来唤醒大家脑海中的知识。
import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
render() {
return (
<div className="App">
<h1 className="title">I am the title</h1>
<p className="content">I am the content</p>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
看到这段代码，大家想想JSX的本质是什么，它和JS有什么关系呢？
1. JSX 的本质是JavaScript语法的扩展,既然是语法的扩展那么就不会被JS识别。自然就需要一个编译工具来编译成JavaScript代码。这个工具就是 babel。
引用官方的话:Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
<div className="app">组件</div>
编译=> React.createElement("div",{className:'app'},"组件")
大家看到JSX会被编译成React.createElement()函数的调用。那么可以这么说,JSX 就是 React.createElement 的语法糖了。
React.createElement(type,config,children)
/**
101\. React的创建元素方法
*/
export function createElement(type, config, children) {
// propName 变量用于储存后面需要用到的元素属性
let propName;
// props 变量用于储存元素属性的键值对集合
const props = {};
// key、ref、self、source 均为 React 元素的属性，此处不必深究
let key = null;
let ref = null;
let self = null;
let source = null;
// config 对象中存储的是元素的属性
if (config != null) {
// 进来之后做的第一件事，是依次对 ref、key、self 和 source 属性赋值
if (hasValidRef(config)) {
ref = config.ref;
}
// 此处将 key 值字符串化
if (hasValidKey(config)) {
key = '' + config.key;
}
self = config.__self === undefined ? null : config.__self;
source = config.__source === undefined ? null : config.__source;
// 接着就是要把 config 里面的属性都一个一个挪到 props 这个之前声明好的对象里面
for (propName in config) {
if (
// 筛选出可以提进 props 对象里的属性
hasOwnProperty.call(config, propName) && /
!RESERVED_PROPS.hasOwnProperty(propName)
) {
props[propName] = config[propName];
}
}
}
// childrenLength 指的是当前元素的子元素的个数，减去的 2 是 type 和 config 两个参数占用的长度
const childrenLength = arguments.length - 2;
// 如果抛去type和config，就只剩下一个参数，一般意味着文本节点出现了
if (childrenLength === 1) {
// 直接把这个参数的值赋给props.children
props.children = children;
// 处理嵌套多个子元素的情况
} else if (childrenLength > 1) {
// 声明一个子元素数组
const childArray = Array(childrenLength);
// 把子元素推进数组里
for (let i = 0; i < childrenLength; i++) {
childArray[i] = arguments[i + 2];
}
// 最后把这个数组赋值给props.children
props.children = childArray;
}
// 处理 defaultProps
if (type && type.defaultProps) {
const defaultProps = type.defaultProps;
for (propName in defaultProps) {
if (props[propName] === undefined) {
props[propName] = defaultProps[propName];
}
}
}
// 最后返回一个调用ReactElement执行方法，并传入刚才处理过的参数
return ReactElement(
type,
key,
ref,
self,
source,
ReactCurrentOwner.current,
props,
);
}
createElement 有 3 个入参，这 3 个入参囊括了 React 创建一个元素所需要知道的全部信息。
-
type：用于标识节点的类型。它可以是类似“h1”“div”这样的标准 HTML 标签字符串，也可以是 React 组件类型或 React fragment 类型。
-
config：以对象形式传入，组件所有的属性都会以键值对的形式存储在 config 对象中。
-
children：以对象形式传入，它记录的是组件标签之间嵌套的内容，也就是所谓的“子节点”“子元素”
createElement 函数体拆解
前面你已经阅读过 createElement 源码细化到每一行的解读，这里和探讨creatElement在逻辑层面的任务流转，
React.createElement => 二次处理key,ref,self,source四个属性值 => 遍历config,筛选可以提进props里的属性 => 提取子元素,推入childArray(props.children)数组中 => 格式化defaultProps => 结构以上数据作为入参,发起ReactElement调用。
createElement 中并没有复杂的算法和真实DOM的逻辑,它的每一个步骤机会都在格式化数据。直白点，createElement 就像是开发者和ReactElement 调用之间的一个转换器，一个数据处理层。
虚拟DOM
上面分析,createElement 执行到最后会return一个针对ReactElement的调用.
const ReactElement = function(type, key, ref, self, source, owner, props) {
const element = {
// REACT_ELEMENT_TYPE是一个常量，用来标识该对象是一个ReactElement
$$typeof: REACT_ELEMENT_TYPE,
// 内置属性赋值
type: type,
key: key,
ref: ref,
props: props,
// 记录创造该元素的组件
_owner: owner,
};
//
if (__DEV__) {
// 这里是一些针对 __DEV__ 环境下的处理，对于大家理解主要逻辑意义不大，此处我直接省略掉，以免混淆视听
}
return element;
};
ReactElement 的代码出入意料的短,从逻辑上看出,ReactElement 只做了一件事情，”创建”，说的更加精确一点, “组装”,reactElement把传入的参数组装成一个Element对象，然后整体返回出去给了React.createElement, React.createElement 又把它交到开发者手中。
const AppJSX = (<div className="App"> 组建 </div>) console.log(AppJSX)
打印出来是一个标准的ReactElement对象实例。本质上是以JavaScript对象形式存在的DOM描述,也就是我们常常提起的虚拟DOM。
虚拟DOM,那就意味着和渲染到页面的真实DOM之间还有一些距离,这个距离，就是用React.render 来完成。
总结 ：
jsx 通过babel 转换成React.createElement的调用 ,createElement对数据进行格式化 ，然后在调用ReactElement变成ELement对象，也就是虚拟DOM节点,最后在通过ReactDOM.render()映射到真实的DOM元素中。
点击咨询 