持续更新中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
D2
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中的类型,两大类型的构建过程
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