完整手写React第二天

2.实现jsx

React项目结构：

• react（宿主环境无关的公用方法）
• react-reconciler（协调器的实现，宿主环境无关）
• 各种宿主环境的包
• shared（公用辅助方法，宿主环境无关）

JSX转换是什么

import { jsx as _jsx } from "react/jsx-runtime";

/*#__PURE__*/_jsx("div", {
  children: "123"
});

// 或
/*#__PURE__*/React.createElement("div", null, "123");

包括两部分：

• 编译时

• 运行时：jsx方法或React.createElement方法的实现（包括dev、prod两个环境）

编译时由babel编译实现，我们来实现运行时，工作量包括：

• 实现jsx方法
• 实现打包流程
• 实现调试打包结果的环境

实现jsx方法

包括：

• jsxDEV方法（dev环境）
• jsx方法（prod环境）
• React.createElement方法

实现打包流程

对应上述两3方法，打包对应文件：

• react/jsx-dev-runtime.js（dev环境）

• react/jsx-rumtime.js（prod环境）

• React