react 学习(一) 实现简版虚拟 dom 和挂载

楼主最近入职新单位了，恰好新单位使用的技术栈是 react，因为之前一直进行的是 vue2/vue3 和小程序开发，对于这些技术栈实现机制也有一些了解，最少面试的也都能答出来。但对于 react 只是有一定的了解，没有真实的学习过实现，虽然之前也看过一些文章，但是只停留在表面，因为别人这么写了，也就下意识的认为是这样。本次正好配合工作的契机，我们从零开始学习一下，使用的话呢就简单一过，相信大家也都用过或者看完官网也都了解了。如果您是大佬，欢迎批评指正；如果您是初级选手，希望能够一起学习。

初始化项目

我们借助脚手架实现开发环境，内部使用的库用自己开发的。

1. npx create-react-app react-dome1 (当然也可以全局安装脚手架)
   public 目录只留下 index.html，src 目录下只留下 index.js
2. 修改 scripts 命令
   我们需要使用旧的转换方式，这样我们可以自己实现 createElement 方法

// cross-env 需要自己安装
scripts": {
  "start": "cross-env DISABLE_NEW_JSX_TRANSFORM=true react-scripts start",
  "build": "cross-env DISABLE_NEW_JSX_TRANSFORM=true react-scripts build",
  "test": "cross-env DISABLE_NEW_JSX_TRANSFORM=true react-scripts test",
  "eject": "cross-env DISABLE_NEW_JSX_TRANSFORM=true react-scripts eject"
},

react 17 引入了新的 jsx 转换特性，因为之前的开发，即使页面中未直接使用 React，但是也要引入，这是因为 babel 在转译之后会触发 React.createElement，如果不引入会报错，但是引入了可能也会触发 eslint 的报错，引入但是未使用。新特性可以单独使用 JSX 而无需引入 React。

新特性一些好处

1. 使用全新的转换，你可以单独使用 JSX 而无需引入 React。
2. 根据你的配置ÿ