1
0
Fork 0
Browse Source

vault backup: 2022-04-20 11:00:31

master
YuJian 3 years ago
parent
commit
2bc25f49fe
  1. 8
      React 的源码深入/React Reconciler - Fiber 创建.md

8
React 的源码深入/React Reconciler - Fiber 创建.md

@ -91,6 +91,8 @@ createInstance 会调用 createElement 方法创建一个 DOM 实例,并调用 @@ -91,6 +91,8 @@ createInstance 会调用 createElement 方法创建一个 DOM 实例,并调用
之后就进入 diffProperties 最主要的任务:对新旧 props 进行对比然后生成 updateQueue
这里有两个 for in 循环:循环旧 `props` 属性和循环新 `props` 属性
**警告:以下解析受限于我的表达能力,可能会有读起来一头雾水的情况,建议和源码一起看**
循环旧 props 属性:
- 以下条件跳出当前循环:
1. 新 props 自身不存在相同属性
@ -107,11 +109,13 @@ createInstance 会调用 createElement 方法创建一个 DOM 实例,并调用 @@ -107,11 +109,13 @@ createInstance 会调用 createElement 方法创建一个 DOM 实例,并调用
3. 新旧 props 属性值都为 null
- 当找到 style 属性:
- 如果新 props 属性值存在且值合法(就是转换成 boolean 不为 false),会调用 Object.freeze 函数冻结当前属性值
- 如果旧 props 也存在 style 属性:
- 如果旧 props 也存在 style 属性且不等于 null
- 开始遍历旧 props style
- 如果出现旧 `props style` 有 style 样式,但是新 `props style` 没有的也就是新增样式的情况,那么会初始化 `styleUpdates` 对象为空(如果已经初始化过就会跳过),并在上边新增当前 style 属性的 key 并赋值空字符串
- 开始遍历新 props style
- 如果找到新 `props style` 存在,但是与旧 `props style` 不同,也就是样式发生修改的情况,那么会初始化 `styleUpdates` 对象为空(如果已经初始化过就会跳过),并在上边对当前 style 属性的 key 做新增或是修改,值为 `props style`
- 如果找到新 `props style` 属性存在,但是与旧 `props style` 属性不同,也就是样式发生修改的情况,那么会初始化 `styleUpdates` 对象为空(如果已经初始化过就会跳过),并在上边对当前 style 属性的 key 做新增或是修改,值为新 `props style` 属性
- 如果旧 props 不存在 style 属性或者等于 null:
-
## 第二次触发更新和后续触发更新

Loading…
Cancel
Save