React相关库源码浅析[持续更新中]

[BUPTlhuanyu]

持续更新中react相关库源码浅析

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

ToDo

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

react16.6

源码实例分析：可见runlogic文件夹下的代码，打log分析react对不同组件的处理逻辑等等运行机制

D1

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

D2

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

D3

• 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中的类型，两大类型的构建过程

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

D5

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

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

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

D6

*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树

react-router

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-transition-group

D1

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

[lcoder]

赞一个

[godblessaChina]

我想和你一起学react

[BUPTlhuanyu]

我也不太会，跟着源码一起学

[BUPTlhuanyu]

更新react-reconciler相关内容，笔记放在有道云笔记，没有单独整理成md文件，以后再整理，接下来分析root的渲染与提交

[BUPTlhuanyu]

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

ToDo

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

react16.6

View contents

源码实例分析：可见runlogic文件夹下的代码，打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

[BUPTlhuanyu]

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

ToDo 深入分析

• [ ] react
  • [x] shared 整个项目通用代码
  • [x] react 核心代码，react定义、reactElement类型对象的构建过程、ReactChildren对react树的操作原理等等
  • [x] react-is 梳理react框架中两大类型：ReactElement以及Portal类型。梳理React.memo，Ref等类型的构建成ReactElementd的过程
  • [x] scheduler 规划 React 初始化，更新等等
  • [x] react-reconciler React调度器
    • [x] 到期时间是如何确定的
    • [ ] context的实现机制
    • [ ] …
  • [x] events 合成事件系统
  • [x] react的错误处理机制
    • [x] 从invokeGuardedCallbackAndCatchFirstError，invokeGuardedCallback，invokeGuardedCallbackImpl看是如何对错误进行处理的
    • [ ] …
  • [ ] react-dom DOM渲染
  • [ ] 各类型组件的运行机制
  • [ ] 总结
• [x] react-router4各个API的使用与源码分析
• [ ] react-transition-group
  • [x] 基本组件：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源码浅析(六)：最后提交阶段，执行剩余生命周期钩子
• 2-8-1、react源码浅析(六)：多次执行setState的更新机制
• 2-8-2、react源码浅析(六)：到期时间的计算规则

🍺D7 events

react事件系统是一个非常值得深入分析的部分,猜想跨平台开发框架对不同平台的事件的兼容方案莫过于此吧

• 事件绑定
• 事件触发

🍺D8 错误处理机制

• 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