Skip to content

Latest commit

 

History

History
21 lines (18 loc) · 907 Bytes

README.md

File metadata and controls

21 lines (18 loc) · 907 Bytes

运行

  • 安装 npm install安装依赖
  • 运行 npm run start启动该项目

目录结构介绍

  • src/index.js 放置了测试案例
  • src/react为本文核心实现
    • commit.js 与浏览器交互:实现元素渲染或者更新元素属性
    • contant.js 放置了一些常量
    • fiber.js 主要利用fiber数据结构实现了useState
    • global.js 放置了react中的全局变量
    • index.js 监听全局变量nextUnitOfWork的变化,执行对象工作流
    • react.js 注入react实例
    • reconclie.js 生成fiber结构并加入对应标记

渲染的完整流程介绍

  • 首次ReactDom.render -> createRoot -> workLoop中的performUnitOfWork -> reconcileChildren -> workLoop中的commit

参考文档