React源码深度解析 高级前端工程师必备技能(完整) ' m- ]5 l% ]) T+ L! H8 X7 K4 x
2018年M课网 高清视频+源码
〖课程介绍〗:
React毫无疑问是前端界主流的框架,而框架本身就是热点。课程以讲解React实现原理为主,并在实现过程中讲解这么做的原因,带来的好处以及规避了哪些问题。理解源码之后对于React开发过程中出现的一系列问题都可以非常轻松得进行解决,也是能力提升,晋升高级开发工程师的必备技能。" q) \7 c3 Z, x( `$ S3 q1 u( e
〖课程目录〗:
第1章 课程导学0 }& o* O8 E8 j2 |7 K3 G, i
对课程整体进行讲解。
1-1 课程导学 试看8 A4 E2 ^3 E ~+ l/ }! ^& Q" R2 r
第2章 基础知识 React API 一览/ h2 g4 D, y& x
React主要API介绍,在这里你能了解它的用法,为下一章源码分析打基础。
2-1 准备工作 试看
2-2 JSX到JavaScript的转换" p* L8 A2 T! H1 B1 A
2-3 react-element
2-4 react-component
2-5 react-ref
2-6 forward-ref6 I! y! _& o1 {6 C
2-7 context
2-8 concurrent-mode, r- ^+ k, P- N! p( h6 G
2-9 suspense-and-lazy
2-10 hooks/ _$ @1 p2 @" C- I$ @6 x
2-11 children
2-12 others5 `6 t; _8 A f" U
第3章 React中的更新
主要讲解React创建更新中的主要两种方式ReactDOM.render和setState,他们具体做了什么。; T) ]* K) f; ^
* X- Y! Y5 f6 q* t+ l7 N a! F
3-1 react-dom-render 试看) Z5 N# j* ^) N! z0 N. S3 D
3-2 react-fiber-root' b9 P: B1 G% G$ U& P' X
3-3 react-fiber
3-4 react-update-and-updateQueue9 x9 d# O8 S$ v4 c. U0 q; s9 o
3-5 react-expiration-time" I/ ?5 e# g! e6 n; T
3-6 different-expirtation-time
3-7 react-setState-forceUpdate
第4章 Fiber Scheduler0 f5 F# M3 y4 J$ u; w
创建更新之后,找到Root然后进入调度,同步和异步操作完全不同,实现更新分片的性能优化。
9 j2 M9 ?3 v" N# B: @5 O
4-1 总结流程概览
4-2 scheduleWork
4-3 requestWork4 Q3 @3 O# a- z1 m1 I4 Z2 k* O
4-4 batchedUpdates5 @# P9 E' U8 Q8 r! E4 H) F
4-5 reactScheduler(1)
4-6 reactScheduler(2). Z: j7 J: ?* I
4-7 reactScheduler(3)
4-8 reactScheduler(4)
4-9 performWork% E% ]$ B6 E- _# R
4-10 renderRoot
4-11 最后补充 n( n# G9 U) b
第5章 各类组件的Update
讲解10多种不同类型的组件的更新过程,以及如何遍历节点形成新的Fiber树' U9 O% o: H4 d: x) A3 k6 N
. H) ^8 f; J* w1 f/ ?: T. x& W* |& u
5-1 入口和优化
5-2 FunctionalComponent的更新: E/ L1 M8 ~0 u$ ]& n
5-3 reconcilerChildren+ B2 L* `: q' x# l& W2 B* c1 N
5-4 reconcilerChildren-array
5-5 updateClassComponent. I& w7 T! C/ X
5-6 ClassComponent的更新, ^: I' i, A" _$ k9 e
5-7 IndeterminateComponent组件类型和其更新过程+ Y% B* o: c4 R
5-8 HostRoot的更新4 f; D5 l2 I0 z# B
5-9 HostComponent和HostText的更新' Q) m$ r# L0 [! v: r- q5 n F2 \
5-10 Poratl组件的更新
5-11 ForwardRef的更新
5-12 Mode组件的更新8 Z& n$ y& f! p" W5 o( N1 z* ^
5-13 Memo组件的更新/ I1 }/ x% ?5 F, V: N/ ~
第6章 完成节点任务. B" z6 h' C, _2 ~) h
完成节点更新之后完成节点的创建,并提供优化到最小幅度的DOM更新列表2 ]! g# c, Z% q) ]
* @% R8 Z- ~$ U* S2 q
6-1 completeUnitOfWork的整体流程和意义
6-2 重设childExpirationTime3 A0 P2 Q+ o0 d0 n- G
6-3 completWork具体做了什么! t9 Q5 E3 R- h$ b1 ?
6-4 初次渲染中completeWork对于DOM节点的创建和appendAllChild算法5 R) g% O: y) W3 o- j4 P |
6-5 初次渲染中如何进行DOM节点属性初始化操作
6-6 更新DOM时进行的diff判断* A; G# w* j, p" u6 L$ R# F
6-7 completeWork阶段对于HostText的更新; u9 R/ p& ?, J
6-8 renderRoot中对于错误的处理
6-9 unwindWork以及React中的错误处理7 w2 J/ F; j' @+ q8 P% P" w, w
第7章 commitRoot
根据更新列表最小幅度的改变DOM,实现UI的更新。
7-1 commitRoot的总体工作内容
7-2 invokeGuardedCallback开发时的帮助方法& ]/ W( O& Y( `/ H, l7 t, l4 L
7-3 commitRoot第一个操作-获取快照3 {2 U3 ]4 B) T' Q2 i4 T
7-4 commitAllHostEffects总体做了哪些事情. E: x7 Y0 U& W* N( Z; q
7-5 commitPlacement插入新的子节点的操作) E: V& y6 j O6 p3 C8 i4 ~8 a
7-6 commitWork更新节点属性的过程9 c! `* Z- }! E. C8 T* I
7-7 commitWork删除节点的操作过程- D7 U* B; G: G5 a$ S6 ?( x. Y
7-8 commitLifecycles调用生命周期方法
第8章 功能详解:基础; z* p3 }) G4 J1 W
各种贯穿于更新和提交阶段的功能,他们在哪里发挥作用,又是如何实现功能的
8-1 context-stack
8-2 遗留context-api的实现过程(1)
8-3 遗留context-api的实现过程(2)
8-4 新context的实现8 l+ B- d' N! V- O! i
8-5 ref的实现过程+ e) u( v3 n& O9 S( W
8-6 hydrate-是否需要hydrate的判断
8-7 hydrate-更新开始判断节点是否可以hydrate; ?. o* ?& N+ |2 @
8-8 hydrate-再completeWork中复用可hydrate的节点
8-9 event事件系统初始化-注入平台事件插件$ q' f c! q9 ~* n
8-10 event事件监听的过程- Z5 ?& E$ b' w
8-11 event-事件触发的过程
8-12 event-事件对象的生产过程8 E4 U2 A* Y. p1 d' @1 k8 p
8-13 event查漏补缺
第9章 suspense and priority: K/ @* i, P( U) V
Suspense作为下一个React的杀手功能,他又是如何实现异步渲染的呢?
6 @6 O6 N! q+ C. D2 [# } e* d1 u
9-1 优先级和任务挂起的含义(1)) H$ o% H) U! a) j! Q3 [
9-2 优先级和任务挂起的含义(2)) _# o- y$ g, v% ?9 k \; I
9-3 两个expirationTime的不同作用/ U7 h+ F- m g+ q
9-4 Suspense组件同步模式下的更新
9-5 Suspense组件同步渲染模式补充
9-6 Suspense组件异步模式下的更新
9-7 retrySuspendedWork所做的事情
第10章 功能详解:Hooks
Hooks颠覆原先的React组件开发模式,提供更小粒度的更新以及更加适合解耦的API。4 D! _0 @1 P4 y! i0 p" ]
第11章 课程总结: L! t7 k! ?* Y8 F
对课程整体进行回顾,以及总结。
|