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