React源码学习

一、源码调试

1. vscode的debugger配置

二、源码学习

tip

参考资料：

• 图解React原理系列
• React技术揭秘
• B站

React核心API

• packages/react
  • packages/react/src/React.js
• packages/react-dom
  • ReactDOM.createRoot
• packages/react-reconciler
• packages/scheduler

编译JSX

@babel/plugin-transform-react-jsx

// JSX
const profile = (
  <div>
    <img src="avatar.png" className="profile" />
    <h3>{[user.firstName, user.lastName].join(" ")}</h3>
  </div>
);
// 编译后
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";

const profile = _jsxs("div", {
  children: [
    _jsx("img", {
      src: "avatar.png",
      className: "profile",
    }),
    _jsx("h3", {
      children: [user.firstName, user.lastName].join(" "),
    }),
  ],
});