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

#1

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

:fire::fire::fire:对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

D2

D3

D4

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

D5

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

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

D6

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

react-router

D1

react-transition-group

D1

4 Likes
#2

:+1: 赞一个

#3

我想和你一起学react

#4

我也不太会,跟着源码一起学:grin:

#5

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

#6

:fire::fire::fire:对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副作用,尽可能使组件为纯函数

:open_book:react16.6

View contents
源码实例分析:可见runlogic文件夹下的代码,打log分析react对不同组件的处理逻辑等等运行机制
🍺D1 项目目录
🍺D2 shared
🍺D3 react
🍺D4 react-is
梳理react中的类型,两大类型的构建过程
🍺D5 scheduler
scheduler调度器原理,大致基本流程已给出图示,以后再给出更详细具体的调度解析,其实知道了设计思想,往后的内容都基本没问题了。
tracing及其TracingSubscriptions实现的是一个订阅监听者设计模式,暂时不对其总结
🍺D6 react-reconciler
react-reconciler源码分析,直接记在我的有道云笔记中,之后会整理成md文件

:open_book:react-router

View contents
🍺D1

:open_book:react-transition-group

View contents
🍺D1
#7

:fire::fire::fire:对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副作用,尽可能使组件为纯函数

:open_book:react16.6

View contents
源码实例分析:可见runlogic文件夹下的代码,断点分析(console.log不是一快照的方式打印结果,对引用对象的调试会不和预期)react对不同组件的处理逻辑等等运行机制
🍺D1 项目目录
🍺D2 shared
🍺D3 react
🍺D4 react-is
梳理react中的类型,两大类型的构建过程
🍺D5 scheduler
scheduler调度器原理,大致基本流程已给出图示,以后再给出更详细具体的调度解析,其实知道了设计思想,往后的内容都基本没问题了。
tracing及其TracingSubscriptions实现的是一个订阅监听者设计模式,暂时不对其总结
🍺D6 react-reconciler
react-reconciler源码分析,直接记在我的有道云笔记中,之后会整理成md文件
🍺D7 events
react事件系统是一个非常值得深入分析的部分,猜想跨平台开发框架对不同平台的事件的兼容方案莫过于此吧
🍺D8 错误处理机制

:open_book:react-router

View contents
🍺D1

:open_book:react-transition-group

View contents
🍺D1