React设计原理
Pcjmy2023-12-05ReactReact
React设计原理
React源码中的几种关键数据结构
element对象
element对象是对UI的描述。
在https://babeljs.io这个网站可以将jsx转为javascript，_jsx方法就是来生成element对象的，它的执行结果才是element对象。
function App() {
return (
<div id="app">
<span>123</span>
</div>
);
}
/*#__PURE__*/ 这个注释可以帮助webpack做tree shaking
import { jsx as _jsx } from "react/jsx-runtime";
function App() {
return /*#__PURE__*/_jsx("div", {
id: "app",
children: /*#__PURE__*/_jsx("span", {
children: "123"
})
});
}
fiber对象
fiber对象是对React执行过程中元素状态的描述。