React.createElement 内部调用 ReactElement，返回一个 ReactElement 对象

//  packages/react/src/ReactElement.js
function createElement(type, config, children) {
// 有点类似Vue的参数
// type: element的 type 比如 div, span
// config: element 的属性
...
// 校验参数格式和组装参数
...
	return ReactElement(...)
}

// packages/react/src/ReactElement.js
const ReactElement = function(type, key, ref, self, source, owner, props) {
	const element = {
		$$typeof: REACT_ELEMENT_TYPE, // 标记元素 ReactElement
		// ...
	}
	// ... 返回的 ReactElement 节点
	return element
}

jsx编译 #

一般使用 babel 编译，配合 @babel/preset-react

• v17 之前将 jsx 编译成 React.createElement，因此需要手动引入 React
• 新版将 jsx 函数抽离，同时 自动引入，import {jsx} from 'react/jsx-runtime'，不用手动引入React，编译结果变成 jsx(element)

JSX是一种描述当前 组件内容 的数据结构，不包含组件schedule、reconcile、render所需的相关信息。

在组件mount时，Reconciler根据JSX描述的组件内容生成组件对应的Fiber节点

在update时，Reconciler将JSX与Fiber节点保存的数据对比，生成组件对应的Fiber节点，并根据对比结果为Fiber节点打上标记。

Fiber节点类型 #

FiberRootNode #

Fiber 树根 含有current属性指针，指向 FiberNode 树 更新时切换 current 指向

FiberNode #

根据 jsx 生成的 常规 Fiber 节点，用于组成 Fiber 树 含有 alternate 属性，用于 双缓存 机制，更新时保存更新的 Node 信息