〖課程介紹〗:
React毫無疑問是前端界主流的框架，而框架本身就是熱點。課程以講解React實現原理為主，並在實現過程中講解這么做的原因，帶來的好處以及規避了哪些問題。理解源碼之后對於React開發過程中出現的一系列問題都可以非常輕松得進行解決，也是能力提升，晉升高級開發工程師的必備技能。) q& s2 m" Y7 O1 J. a/ R
, y+ [6 @. b3 ?/ Z2 p
〖課程目錄〗:
第1章 課程導學- [5 Z: V- i: x" c5 u
對課程整體進行講解。
' J0 h" o) {5 a( ~1 z% Y
1-1 課程導學 試看
第2章 基礎知識 React API 一覽# B) t: o C& \$ z4 F
React主要API介紹，在這里你能了解它的用法，為下一章源碼分析打基礎。
2-1 准備工作 試看
2-2 JSX到JavaScript的轉換
2-3 react-element
2-4 react-component1 y# L& G0 p" }6 K! \: o7 y* a+ O
2-5 react-ref
2-6 forward-ref+ r. @! X8 |, d$ y/ t2 o7 N
2-7 context
2-8 concurrent-mode
2-9 suspense-and-lazy8 i" Z- y$ ]0 w: v% z
2-10 hooks6 \6 B% s7 ]0 F8 t0 [0 L
2-11 children! E) ~! H9 @/ g8 M5 T& A. f; p
2-12 others3 I: K8 N' @& Q9 j0 j
第3章 React中的更新
主要講解React創建更新中的主要兩種方式ReactDOM.render和setState，他們具體做了什么。
; ]% B% o; t# x" b+ |
3-1 react-dom-render 試看
3-2 react-fiber-root! U) @! W* p% ?( K; e
3-3 react-fiber
3-4 react-update-and-updateQueue3 B2 K5 `1 @6 T8 l
3-5 react-expiration-time
3-6 different-expirtation-time# z! {/ l* C( A& }" D) L" `
3-7 react-setState-forceUpdate
第4章 Fiber Scheduler! _9 ^3 w# _: N" r0 X
創建更新之后，找到Root然后進入調度，同步和異步操作完全不同，實現更新分片的性能優化。4 h2 ~& [! {: y9 y: v R
1 q! f i5 g* e" L) G! B
4-1 總結流程概覽
4-2 scheduleWork1 G! u r9 g. h/ a# @' E
4-3 requestWork
4-4 batchedUpdates
4-5 reactScheduler（1）3 a! n1 Y/ k7 R
4-6 reactScheduler（2）+ E/ |4 |3 b; v
4-7 reactScheduler（3）' h1 u3 T; X: A, h/ {" O1 w; J3 h
4-8 reactScheduler（4）3 }) V- |9 Y1 {$ u0 ^
4-9 performWork; N+ S3 u! i- |' `+ ?
4-10 renderRoot
4-11 最后補充$ Z8 M7 j7 @. R2 e. C$ E
第5章 各類組件的Update( [4 h* S& e) Z. P, ~
講解10多種不同類型的組件的更新過程，以及如何遍歷節點形成新的Fiber樹
5-1 入口和優化
5-2 FunctionalComponent的更新9 }9 z! d* L8 ^6 H
5-3 reconcilerChildren9 ^4 S/ X0 ^+ a4 |+ n) q/ z' N
5-4 reconcilerChildren-array0 @9 |: e- X3 j8 D/ {
5-5 updateClassComponent3 W( p$ f) q/ ~! C
5-6 ClassComponent的更新, D% x# m2 F0 S; S3 S, c
5-7 IndeterminateComponent組件類型和其更新過程
5-8 HostRoot的更新: d* K, p4 O! P1 ?
5-9 HostComponent和HostText的更新* u( G! w8 w' b6 E
5-10 Poratl組件的更新
5-11 ForwardRef的更新+ z/ F" r3 T. R( s& e8 g# b8 G- S
5-12 Mode組件的更新9 D/ T+ z: D3 ~- \8 S9 l
5-13 Memo組件的更新
第6章 完成節點任務
完成節點更新之后完成節點的創建，並提供優化到最小幅度的DOM更新列表
+ ]9 r% z7 X" M
6-1 completeUnitOfWork的整體流程和意義
6-2 重設childExpirationTime4 P$ G: L* A) V" @2 s
6-3 completWork具體做了什么
6-4 初次渲染中completeWork對於DOM節點的創建和appendAllChild算法
6-5 初次渲染中如何進行DOM節點屬性初始化操作
6-6 更新DOM時進行的diff判斷
6-7 completeWork階段對於HostText的更新" R {& e3 m& o2 k
6-8 renderRoot中對於錯誤的處理
6-9 unwindWork以及React中的錯誤處理
第7章 commitRoot
根據更新列表最小幅度的改變DOM，實現UI的更新。+ p i: {3 {' ^& R6 j
7-1 commitRoot的總體工作內容) J5 Q; K3 R; B4 k3 K I. {
7-2 invokeGuardedCallback開發時的幫助方法- U& l7 C3 S1 p6 d* m
7-3 commitRoot第一個操作-獲取快照
7-4 commitAllHostEffects總體做了哪些事情5 Y' ^. R. ~ v5 G' X3 a ]$ C
7-5 commitPlacement插入新的子節點的操作' ~9 z2 w9 ^+ m" D
7-6 commitWork更新節點屬性的過程) H8 O' j# F3 w A7 o* Q7 |
7-7 commitWork刪除節點的操作過程5 L/ A* j: v& V8 J' t/ R8 z! j
7-8 commitLifecycles調用生命周期方法5 _ _: C- G+ I1 d& d9 f3 m
第8章 功能詳解：基礎, U! c& M# q( W4 v8 A
各種貫穿於更新和提交階段的功能，他們在哪里發揮作用，又是如何實現功能的
" [7 d* f7 K7 s8 Q& `/ V) u
8-1 context-stack
8-2 遺留context-api的實現過程（1）$ E4 D, N/ m; M. a5 |6 Y. k) O
8-3 遺留context-api的實現過程（2）& N5 {2 w7 f: F; ^4 W+ ^. y
8-4 新context的實現 A% [& j1 J7 T+ v9 ^
8-5 ref的實現過程# T+ g& ^( X0 b' e
8-6 hydrate-是否需要hydrate的判斷* S# i% _8 a" N) ]
8-7 hydrate-更新開始判斷節點是否可以hydrate
8-8 hydrate-再completeWork中復用可hydrate的節點
8-9 event事件系統初始化-注入平台事件插件
8-10 event事件監聽的過程" Y) G4 W! o$ }/ ]* |7 _8 M
8-11 event-事件觸發的過程
8-12 event-事件對象的生產過程( n4 Y5 U/ u3 k# Z8 G! m8 [
8-13 event查漏補缺
第9章 suspense and priority
Suspense作為下一個React的殺手功能，他又是如何實現異步渲染的呢？
9-1 優先級和任務掛起的含義（1）
9-2 優先級和任務掛起的含義（2）4 O5 H) o4 T% ~ w( h/ K4 H. @
9-3 兩個expirationTime的不同作用% Q* y2 O; R7 y; ~& G8 |* k$ o
9-4 Suspense組件同步模式下的更新/ n8 A( A8 B' W5 {; v2 i
9-5 Suspense組件同步渲染模式補充9 C9 r8 z( X5 d
9-6 Suspense組件異步模式下的更新) z+ \( i8 Q. ]% `7 s; I- g. o
9-7 retrySuspendedWork所做的事情
第10章 功能詳解：Hooks3 l- v: B( F/ f$ [& ^
Hooks顛覆原先的React組件開發模式，提供更小粒度的更新以及更加適合解耦的API。
( O2 [- J) y4 l _: W8 ~
第11章 課程總結! E R, ~9 q6 }- g
對課程整體進行回顧，以及總結。; q2 H6 q, m3 W
<ignore_js_op>
