react相关代码库以及框架的源码解析

持续更新中react相关库源码浅析， react ts3 项目

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

ToDo 深刻分析

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

📖react16.6

View contents

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

🍺D1 项目目录

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

🍺D2 shared

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

🍺D3 react

• 一、react源码浅析(三)：react文件夹-源码入口
• 二、react源码浅析(三)：ReactNoopUpdateQueue
• 三、react源码浅析(三)：ReactBaseClasses
• 四、react源码浅析(三)：Ref-Context-Lazy-forwardRef-memo
• 五、react源码浅析(三)：ReactElement
• 六、react源码浅析(三)：ReactDebugCurrentFrame
• 七、react源码浅析(三)：ReactChildren
• 八、react源码浅析(三)：Hook
• 九、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文件

• 一、react源码浅析(六)：react的fiber树与页面节点树的关系
• 2-0、react源码浅析(六)：ReactDOM.render流程概览
• 2-一、react源码浅析(六)：建立container对应的root
• 2-二、react源码浅析(六)：建立root下的fiber树并开始初始调度
• 3-三、react源码浅析(六)：调度入口函数scheduleWork
• 3-四、react源码浅析(六)：performWork调度root双向循环链表
• 3-五、react源码浅析(六)：performWorkOnRoot调度某个root的fiber树
• 3-6-0、react源码浅析(六)：root渲染阶段renderRoot
• 3-6-一、react源码浅析(六)：对root执行updateHostRoot
• 3-6-二、react源码浅析(六)：对类组件执行updateClassComponent
• 3-6-last、react源码浅析(六)：completeUnitOfWork完成当前节点的调度
• 3-7-0、react源码浅析(六)：root提交阶段completeRoot
• 3-7-一、react源码浅析(六)：提交阶段执行getSnapshotBeforeUpdate生命周期函数
• 3-7-二、react源码浅析(六)：提交HostComponent原生HTML标签上的effect
• 3-7-三、react源码浅析(六)：最后提交阶段，执行剩余生命周期钩子
• 3-8-一、react源码浅析(六)：屡次执行setState的更新机制
• 3-8-二、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