cy-biggray / reactnote

React相关库的源码分析

🔥🔥🔥对react相关代码库以及框架的源码进行了一定的分析

ToDo

• react
  • shared 整个项目通用代码
  • react 核心代码，react定义、reactElement类型对象的构建过程、ReactChildren对react树的操作原理等等
  • react-is 梳理react框架中两大类型：ReactElement以及Portal类型。梳理React.memo，Ref等类型的构建成ReactElementd的过程
  • scheduler 规划 React 初始化，更新等等
  • react-reconciler React调度器
    • 到期时间是如何确定的，调度器时间以及渲染器时间与更新动作的关系
    • context的实现机制
    • ...
  • react-dom DOM渲染
  • events 合成事件系统
  • 各类型组件的运行机制
• react-router4各个API的使用与源码分析
• react-transition-group
  • 基本组件：Transition组件分析，结合生命周期详细分析该组件实现动画的原理
  • TransitionGroup组件：对children中Transition或者CSSTransition组件的动画的管理
• redux-saga：管理react副作用，尽可能使组件为纯函数

📖react16.6

View contents

源码实例分析：可见runlogic文件夹下的代码，断点分析(console.log不是一快照的方式打印结果，对引用对象的调试会不和预期)react对不同组件的处理逻辑等等运行机制

🍺D1 项目目录

• 1、react源码浅析(一)：项目目录

🍺D2 shared

• 1、react源码浅析(二)：shared文件夹
• 2、react源码浅析(二)：shared文件夹之ReactTreeTraversal

🍺D3 react

• 1、react源码浅析(三)：react文件夹-源码入口
• 2、react源码浅析(三)：ReactNoopUpdateQueue
• 3、react源码浅析(三)：ReactBaseClasses
• 4、react源码浅析(三)：Ref-Context-Lazy-forwardRef-memo
• 5、react源码浅析(三)：ReactElement
• 6、react源码浅析(三)：ReactDebugCurrentFrame
• 7、react源码浅析(三)：ReactChildren
• 8、react源码浅析(三)：Hook
• 9、react源码浅析(三)：ReactElementValidator

🍺D4 react-is

梳理react中的类型，两大类型的构建过程

• react源码浅析(四)：react-is

🍺D5 scheduler

scheduler调度器原理，大致基本流程已给出图示，以后再给出更详细具体的调度解析，其实知道了设计**，往后的内容都基本没问题了。

tracing及其TracingSubscriptions实现的是一个订阅监听者设计模式，暂时不对其总结

• react源码浅析(五)：scheduler
• react源码浅析(五)：scheduler之Tracing.js
• react源码浅析(五)：scheduler之TracingSubscriptions.js

🍺D6 react-reconciler

react-reconciler源码分析，直接记在我的有道云笔记中，之后会整理成md文件

• 1、react源码浅析(六)：react的fiber树与页面节点树的关系
• 2-1、react源码浅析(六)：创建container对应的root
• 2-2、react源码浅析(六)：创建root下的fiber树并开始初始调度
• 2-3、react源码浅析(六)：调度入口函数scheduleWork
• 2-4、react源码浅析(六)：performWork调度root双向循环链表
• 2-5、react源码浅析(六)：performWorkOnRoot调度某个root的fiber树
• 2-6-0、react源码浅析(六)：root渲染阶段renderRoot
• 2-6-1、react源码浅析(六)：对root执行updateHostRoot
• 2-6-2、react源码浅析(六)：对类组件执行updateClassComponent
• 2-6-last、react源码浅析(六)：completeUnitOfWork完成当前节点的调度
• 2-7-0、react源码浅析(六)：root提交阶段completeRoot
• 2-7-1、react源码浅析(六)：提交阶段执行getSnapshotBeforeUpdate生命周期函数
• 2-7-2、react源码浅析(六)：提交HostComponent原生HTML标签上的effect
• 2-7-3、react源码浅析(六)：最后提交阶段，执行剩余生命周期钩子

📖react-router

View contents

🍺D1

• react-router4源码浅析(一) ：matchPath
• react-router4源码浅析(二) ：Route
• react-router4源码浅析(三) ：BrowserRouter&&HashRouter
• react-router4源码浅析(四) ：Router
• react-router4源码浅析(五) ：generatePath
• react-router4源码浅析(六) ：Redirect
• react-router4源码浅析(七) ：Switch
• react-router4源码浅析(八) ：withRouter
• react-router4源码浅析(九) ：Link

📖react-transition-group

View contents

🍺D1

• react-transition-group源码浅析(一)：Transition