最近参加了@阿崔cxr的mini-react游戏副本，跟着崔大大和一群小伙伴开启了这场游戏冒险🤭
最近在准备春招的我也打算看看React的源码，可是奈何我是一个重度拖延的菜🐕，想想那源码它又难又多，就又开始了自己的拖延之旅。。。好在参加了这个mini-react训练营，跟着大佬的将大任务拆分为一个个小任务，才得以让自己对React的了解更深入一些。果然足够简单的小任务更适合目前的菜du😂
在这场游戏中，我学习了React中的：
- 任务调度器和fiber架构
- Function Component
- 点击事件处理和props绑定
- 实现diff更新
- useEffect
- useState
本篇文章将先从搭建项目开始介绍。
首先创建index.html文件，在文件中创建一个根容器并引入脚本文件main.js。
main.js是React项目的入口文件，本文将一步步深入思考，该如何实现这个文件。
- 首先思考的是该怎么样才能让页面上展示内容呢？最简单的方式就是直接创建DOM，但是这种方式呈现的内容都是代码中固定的。
- 接下来可以从React方向进行思考，使用虚拟DOM来实现，这也是面试常问的八股之一。虚拟DOM其实就是一个js对象，通过js对象描述出DOM树的结构。经过思考后，我们发现这个js对象需要包含type、props和children这三个属性。具体实现如下图：
- 为了实现动态创建，我们实现了createTextNode和createElement函数,然后抽象出下面两段代码的共同点：创建节点、设置props、将节点加入到容器中，基于这三个步骤实现render函数。
具体实现如下图：
上述实现已经具备了一定的通用性和可扩展性，但是因为我们的目标是让我们实现的mini-react的API和React的API是一样的，所以针对上述代码进行了一些调整。
- 最后一步就是重构代码啦🤭把业务代码和框架代码拆分开就好啦！可以新建一个core文件夹，下面新建两个文件React.js和ReactDom.js。然后，还可以创建一个App.js文件。最终，文件的代码如下图：
React.js
ReactDom.js
App.js
main.js
关键代码如下：
ReactDom.createRoot(document.querySelector('#root')).render(App)，主要是通过ReactDOM的createRoot传入一个根节点，返回一个render函数处理App组件。
看到这里，mini-react的形已经有啦！快去动手试试吧👏
