# mini-react

**Repository Path**: type-error/mini-react

## Basic Information

- **Project Name**: mini-react
- **Description**: 学习并动手实现一个简单的react
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-03-23
- **Last Updated**: 2024-04-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## mini-react 游戏副本(第二期)

终于囫囵吞枣的完成了 mini-react 游戏副本。

[mini-react 游戏副本(第二期) (cuixueshe.com)](https://learn.cuixueshe.com/p/t_pc/goods_pc_detail/goods_detail/course_2dgCEPYIJNG8cs78um4HjzrHY0a)

由简单到完善的手写一个 mini-react，再使用自己手写 mini-react 框架写一个 todo-list。

看着用自己手写的 mini-react 来编写的 todo-list 应用，心里还是很震撼。

虽然几乎是照着视频敲代码，依然收货颇丰。

在此记录下心得，回过头来尝试不看视频按照 mini-react 思想来自己实现。

### 心得

**要解决一个复杂的问题（比如手写一个 react）**

我们可以将复杂的问题分解为多个小问题：

1. 使用 object 表示 dom，根据 object 创建 dom
2. 再将 dom 树转换为链表，可以每次只获取一个节点，以便之后任务调度。
3. 实现一个简单的任务调度，再利用`requestIdleCallback`接口实现一个简单的 fiber 架构
4. 给虚拟 dom 绑定事件，更新 props
5. 更新 props 需要比较新旧 2 个 dom 树
6. 尝试优化比较 dom 树
7. ....

当我们一次将这些难度小很多，很值很简单的问题解决之后，会发现神奇的完成了 mini-react。

### 小记

一群人在一起学习，会更有动力。

本来上班忙，回家不想再打开电脑敲代码，但是看到群里大佬贴出代码谈笑风生，也忍不住打开电脑敲一敲。

只埋头苦学是不行的，要输出内容。

在输出内容的时候会不由自主的去理解代码背后的思想，设计思想远比刁钻的代码技巧重要，

本篇心得记于 2024/04/01 14:53

本记发于知乎：[mini-react 游戏副本(第二期)心得笔记 - 知乎 (zhihu.com)](https://zhuanlan.zhihu.com/p/690171048)

代码地址：[mini-react: 学习并动手实现一个简单的 react (gitee.com)](https://gitee.com/UncaughtTypeError/mini-react)