〖课程介绍〗:
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>
