第一章 JSX(React18源码解析一)
第二章 实现Virtual DOM(React18源码解析二）
第三章 根节点关联根Fiber(React18源码解析三)
第四章 初始化UpdateQueue、添加update(React18源码解析四)
第五章 实现时间切片函数和拷贝Fiber(React18源码解析五)
第六章 构建FiberTree(React18源码解析六)
第七章 commit(React18源码解析七)
第八章 React中的事件(React18源码解析八)
第九章 useReducer、useState(React18源码解析九)
第十章 React的dom diff(React18源码解析十)
第十一章 React的Effect(React18源码解析十一)
第十二章 React的同步、并发渲染(React18源码解析十二)
第十三章 React高优打断低优、饥饿问题(React18源码解析十三)

一.React是什么

• React是用于构建用户界面的js库
• 可通过组件化的方式快速构建Web应用

二.JSX是什么

• JSX是js的扩展，html和交互逻辑的结合，便于UI展示
• babel可展示JSX通过plugin-transfrom-react-jsx转换后的代码
• AST Explorer可展示JSX调用@babel/parser转换后的AST（抽象语法树），以json的形式存在

三.babel转换jsx

• React16之前的转换方式（@babel/plugin-transform-react-jsx的classic模式）

const babel = require("@babel/core");
const sourceCode = `
<h1>
    hello<span style={{ color: "red" }}>world</span>
</h1>
`

/*老的编译方式*/
const result = babel.transform(sourceCode, {
  plugins: [["@babel/plugin-transform-react-jsx", { runtime: "classic" }]]
})
console.log(result.code);

/*打印*/
// React.createElement("h1", null,
//   "hello",
//   React.createElement("span", { style: { color: "red" } },
//     "world"
//   )
// );

• React16之后的转化方式(@babel/plugin-transform-react-jsx的automatic模式)

const babel = require("@babel/core");
const sourceCode = `
<h1>
    hello<span style={{ color: "red" }}>world</span>
</h1>
`
const result = babel.transform(sourceCode, {
  plugins: [["@babel/plugin-transform-react-jsx", { runtime: "automatic" }]]
})

console.log(result.code);

/*打印*/
// import { jsx as _jsx } from "react/jsx-runtime";
// import { jsxs as _jsxs } from "react/jsx-runtime";
// _jsxs("h1", {
//   children: [
//     "hello",
//     _jsx("span", {
//       style: { color: "red" },
//       children: "world"
//     })
//   ]
// });

四.Virtual DOM

• JSX=>Virtual DOM转换图
• Virtual DOM(虚拟DOM)
  在上文可知，jsx经过@babel/core transform后编译成React.createElement或_jsx函数调用，函数返回Virtual DOM
• Virtual DOM和AST的区别
  AST，各个parser parse后的结构虽不同，但都是语法的JSON形式的忠实反映，Virtual DOM，是AST经过处理后方便后面DOM Diff的JSON