@@ -78,3 +78,75 @@ Diff 算法的整体逻辑会经历两轮遍历
7878- this.forceUpdate
7979- useState
8080- useReducer
81+
82+ 触发状态更新(根据场景调用不同方法)
83+ --> 创建 Update 对象（接下来三节详解）
84+ --> 从 fiber 到 root（markUpdateLaneFromFiberToRoot）
85+ --> 调度更新（ensureRootIsScheduled）
86+ --> render 阶段（` performSyncWorkOnRoot ` 或 ` performConcurrentWorkOnRoot ` ）
87+ --> commit 阶段（` commitRoot ` ）
88+
89+ Update：
90+ 分类有
91+
92+ ``` js
93+ ReactDOM .render -- - HostRoot;
94+ this .setState -- - ClassComponent;
95+ this .forceUpdate -- - ClassComponent;
96+ useState-- - FunctionComponent;
97+ useReducer-- - FunctionComponent;
98+ ```
99+
100+ ClassComponent 与 HostRoot 共用一套 Update 结构
101+
102+ ``` ts
103+ const : Update <*> = {
104+ eventTime , // 任务时间
105+ lane , // 优先级
106+ suspenseConfig , // Suspense 相关，暂不关注
107+ tag: UpdateState , // 更新的类型，包括 UpdateState | ReplaceState | ForceUpdate | CaptureUpdate
108+ payload: null , // 更新挂载的数据
109+ callback: null , // 更新的回调函数
110+ next: null , // 与其他Update行程链表
111+ };
112+ ```
113+
114+ FunctionComponent 是另外一套 Update 结构
115+
116+ UpdateQueue:
117+
118+ ``` ts
119+ const : UpdateQueue <State > = {
120+ baseState: fiber .memoizedState , // 原来的状态
121+ firstBaseUpdate: null , // 插队的部分头
122+ lastBaseUpdate: null , // 插队的部分尾巴
123+ shared: {
124+ // 原来那部分
125+ pending: null ,
126+ },
127+ effects: null , // 副作用，就是回调函数啦
128+ };
129+ ```
130+
131+ render 阶段的 Update 其实是一个链表，state 经过 update 链表得到新的 state；
132+ 该新的 state 更新不同的 JSX 对象
133+ 通过 DIFF 算法，在 commit 阶段渲染在页面
134+ 渲染完成之后，workInProgress Fiber 树变为 current Fiber 树，整个更新流程结束
135+
136+ 深入理解优先级
137+
138+ 1 . 对用户心中的优先级研究：
139+
140+ 生命周期方法：同步执行。
141+
142+ 受控的用户输入：比如输入框内输入文字，同步执行。
143+
144+ 交互事件：比如动画，高优先级执行。
145+
146+ 其他：比如数据请求，低优先级执行。
147+
148+ 2 .
149+
150+ ReactDOM.render
151+
152+ this.setState
0 commit comments