原文 👉 juejin.cn/post/…

React.createElement：数据从哪儿来？

痛点一：在调试 Fiber 时你常常看到节点上没有任何属性、样式或事件信息，却又不清楚这些信息到底是怎么注入进来的？答案就在 JSX 编译后的 React.createElement 调用里。

创建新的 Fiber 时new FiberNode 本身是空的——它并不知道节点类型、样式、事件或子节点。这些信息全部来源于我们在 JSX 中的声明。

原组件示例

// LazyComp.jsx
export default function LazyComp {
return;}

// App.jsx
const LazyComp = lazy => {
return new Promise(resolve => {
setTimeout => {
resolve);},)，// 模拟 秒延迟
});})，export default function App {
return (

Loading...
}>

);说起来，}

编译后代码

// LazyComp-BtMAPHcf.js
function LazyComp {
return /* @__PURE__ */ React.createElement;}

// App-BBcglL-c.js
const LazyComp = lazy => {
return new Promise(resolve => {
setTimeout => {
resolve);// 上面的 LazyComp 本体
},8000);})，});function App {
return /* @__PURE__ */ React.createElement(
"div",null,/* @__PURE__ */ React.createElement(
Suspense。{ fallback: /* @__PURE__ */ React.createElement },/* @__PURE__ */ React.createElement
)
);}
// 简化版 renderWithHooks
function renderWithHooks {
// ...
var children = Component;// 执行最内层的函数返回 React element
// ...
return children;}

执行顺序是从里到外：最内部的 React.createElement 最先完成，接下来逐层向外包装。

痛点二：很多开发者误以为父组件会把子节点写进子组件的 props.children子组件的子节点只能由它自己在 JSX 中声明。

React Element 的内部结构

JSX 编译后会生成一个普通对象——React Element。老实说，这个对象携带了所有后续生成 Fiber 所需的信息：

// 示例：

Hello
const reactElement = {
$$typeof: REACT_ELEMENT_TYPE,type: 'div'。// 元素类型或组件函数/类
至于key，null,ref: null,props: {
children: 'Hello',style: { color: 'red' },onClick: handle,// ...其他属性
},_owner: owner // 创建该元素的组件实例
};

• type：可以是字符串标签也可以是函数组件/类组件。
• props：包含 children、style、事件回调还有所有自定义属性。
• key / ref：用于列表渲染和引用获取，编译时会自动抽取。
• _owner：指向创建该元素的父组件实例，帮助定位错误来源。

注意：

• Pseudo‑component（如 ) 不会直接接受子节点；子节点必须写在它自己的返回值里否则会被丢弃。
• The props object is frozen to enforce immutability.

createElement 实现细节

var ReactElement = function {
var element = {
$$typeof: REACT_ELEMENT_TYPE。type: type,key: key,ref: ref,props: props,_owner: owner
};// 为 element 添加不可枚举的内部属性
Object.defineProperty,'validated'。{
configurable: false,enumerable: false,writable: true,value: false
});Object.defineProperty(element,'_self',{
configurable: false。enumerable: false,writable: false,value: self
});Object.defineProperty(element,'_source',{
configurable:false。enumerable:false,writable:false,value: source
});
if {
Object.freeze;Object.freeze;}
return element;}，function createElement {
var propName;var props = {};var key = null;var ref = null;var self = null;var source = null;if {
if ) { ref = config.ref;}
if ) { key = '' + config.key;}
self = config.__self === undefined?null : config.__self;source = config.__source === undefined?其实，null : config.__source;for {
if &&，RESERVED_PROPS.hasOwnProperty) {
props = config;按理说，}
}
}
// 收集 children 参数
var childrenLength = arguments.length - 2;if {
props.children = arguments;} else if {
var childArray = Array;for {
childArray = arguments;}
if { Object.freeze;}
props.children = childArray;}
// 合并 defaultProps
if {
var defaultProps = type.defaultProps;for {
if { props = defaultProps;}
}
}
// 警告 key / ref 的使用
return ReactElement;}

hooks 的信息也来自 JSX 声明

痛点三：If you place a hook call inside a conditional or loop that depends on runtime data coming from JSX props—your component will break because hooks must be called in same order on every render.

// 示例：App.jsx 中的 hooks 调用顺序由 JSX 决定
function App {
// 以下都是 hook 调用。它们的顺序固定，不受运行时分支影响
const = useTransition;const = useState;const = useState;const = useState;按理说，const = useState;// 返回值仍然是通过 createElement 拼装好的 React Element 树
return /* @__PURE__ */
React.createElement(
"div",null,/* @__PURE__ */
React.createElement(
Suspense。{font-weight:bold},{fallback:
/* @__PURE__ */
React.createElement
},/* @__PURE__ */
React.createElement
)
);}

The order of se hook calls is determined **when component function is first parsed**。which itself originates from JSX transformation into a plain JavaScript function. If you ever encounter “Rendered more hooks than during previous render” errors—think back to JSX that generated those hooks.

🚀 希望本篇能帮你解开“数据从哪儿来”的疑惑，让调试 Fiber 与 Hook 时不再手足无措！如果觉得有价值，请点赞、收藏或留下你的疑问～ 🎉