min-react 源码实现

代码结构如下： React.js 作用 render() : 渲染入口，初始化根 Fiber 并启动调度 createElement() : 将 JSX 转换为虚拟 DOM 对象 workLoop()

问题出发：为什么要拆任务？ 当我们的页面节点非常多（比如成千上万个 DOM），如果你一次性去执行所有渲染逻辑： 浏览器就会卡死几百毫秒甚至几秒，用户看到的就是： 这是因为浏览器主线程是单线程的

一、背景：为什么需要 Fiber？ 1. React 15 时代的问题 在 React 15 及更早版本中，渲染是同步、不可中断的。当 setState 触发更新时，React 会递归整棵虚拟 DOM

此文档对应仓库路径：src/mini-react-fiber-v1。 覆盖文件： index.js createNestedFiberjs 目标：把 mini-react-fiber-v1 中的实现拆

目标 实现一个更通用的虚拟DOM创建和渲染机制，能够动态渲染复杂的DOM结构 分析 创建虚拟DOM元素的函数 createElement 和 createTextNodeElement 使用递归的方式

历史背景与核心问题 问：在JSX出现之前，前端开发面临什么痛点？ 答： 主要有三大痛点： 痛点1：模板与逻辑分离的复杂性 JavaScript 问题： 模板和逻辑在不同文件中，难以维护 DOM操

React为什么要这么设计？ 1. 什么是JSX？ 问：JSX是什么？为什么React要使用它？ 答： JSX是JavaScript XML的缩写，它是一种语法扩展，让我们能在JavaScript中编

Fiber架构是一种软件架构，主要用于构建和运行Web应用程序。它由Facebook开发，是一种基于JavaScript的框架。Fiber架构的核心思想是通过将应用程序逻辑划分为多个小单元。

思考： 如何dom 树特别大一次性渲染导致渲染卡顿，该如何解决这个问题？ 解决思路：把大任务拆分到多个task里面完成

在前端领域无论是哪种语言最基础的是javascript，所以我们一般定义的文件都是js文件，那么如何使mini-react识别jsx语法呢？

为什么学习mini-react要从在页面上渲染app开始？无论是Vue, React，还是angular，对于前端来说，从最最直观的视觉角度来说就是在页面如何呈现内的。

什么是Context？ Context被翻译为上下文，在编程领域，这是一个经常会接触到的概念，React中也有。 在React的官方文档中，被归类为高级部分(Advanced)