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

最新推荐文章于 2023-06-03 22:45:24 发布

weixin_41364787

最新推荐文章于 2023-06-03 22:45:24 发布

阅读量597

点赞数

分类专栏：与前端沾边文章标签：前端 reactjs

本文链接：https://blog.csdn.net/weixin_41364787/article/details/124001259

版权

本文介绍了如何从零开始学习React，重点在于实现简版虚拟DOM和页面挂载。首先，通过初始化项目并修改配置以支持新特性。接着，详细解释并实现了React.createElement函数，包括定义类型常量和辅助函数toVdom。最后，介绍了如何模拟reactDOM.render进行页面挂载。文章适合初级开发者学习，也欢迎大佬指正。

摘要由CSDN通过智能技术生成

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

初始化项目

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

npx create-react-app react-dome1 (当然也可以全局安装脚手架)
public 目录只留下 index.html，src 目录下只留下 index.js
修改 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。