Skip to content

Commit

Permalink
feat: 修改图片cdn
Browse files Browse the repository at this point in the history
  • Loading branch information
yk committed Sep 18, 2023
1 parent 17637bc commit d916d11
Show file tree
Hide file tree
Showing 39 changed files with 76 additions and 56 deletions.
2 changes: 1 addition & 1 deletion content/about.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ statistics: 'false'
<div class="me-basic__info--item">邮箱： [email protected]</div>
<div class="me-basic__info--item right">期望工作地： 苏州、上海</div>
<div class="me-basic__info--avatar">
<img src="https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/202301311756745.png" width="120px" height="150px">
<img src="https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/202301311756745.png" width="120px" height="150px">
</div>
</div>

Expand Down
2 changes: 1 addition & 1 deletion content/posts/algorithm/dp/动态规划之01背包.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ date: 2022-10-12T03:31:28+08:00

借用一下代码随想录的图：

![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/202210161922324.png)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/202210161922324.png)

---

Expand Down
2 changes: 1 addition & 1 deletion content/posts/algorithm/dp/动态规划之02完全背包.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ date: 2022-10-12T04:31:28+08:00

首先，继续看一下 01 背包中引用的图吧。

![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/202210161922324.png)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/202210161922324.png)

与 01 背包的区别就是 物品是无限的。在做选择时，同样也是只有两种，选择和不选择。

Expand Down
6 changes: 3 additions & 3 deletions content/posts/algorithm/dp/动态规划之状态压缩.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,11 @@ for (int i = n - 2; i >= 0; i--) {

对于上方递推公式，`dp[i][j]` 只依赖于 `dp[i+1][j-1]`,`dp[i+1][j]`,`dp[i][j-1]`，见下图。

![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/202210180953079.png)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/202210180953079.png)

记住：**空间压缩的核心思路就是，将二维数组「投影」到一维数组**：

![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/202210181835977.png)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/202210181835977.png)

> 在代码中呢，就是无脑去掉 dp[i][j] 的 [i] 这个维度，去掉维度后，可能会产生覆盖问题。
> 然后思考每个一维 dp 的含义。
Expand Down Expand Up @@ -65,7 +65,7 @@ for (int i = n - 2; i >= 0; i--) {
当遍历索引 1 时, 先把索引 1 的值用 temp 存住, 然后索引 1 会被新的值 new 去覆盖掉,
遍历到索引 2 时, 需要根据 dp[j-1] 也就是刚刚被覆盖掉后新值 new (原二维 dp[i][j-1]) 和索引 1 之前的值 temp (原二维 dp[i+1][j-1]) 以及 索引 2 被赋值之前的值 dp[j] (原二维 dp[i+1][j])来推导出。如下图 😂(画的有点简约了哈)

![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/202210182331990.png)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/202210182331990.png)

更简单的，如果 dp[i][j] 只与 dp[i-1][...] 相关，投影到一维上，那更可以压缩状态啦，而且还没有覆盖的问题。
两个注意点：
Expand Down
2 changes: 1 addition & 1 deletion content/posts/algorithm/string/厉害的KMP.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ c
- 如果 `s[i] === s[j]` ，那么 `π(i) = j + 1`;
- 如果 `s[i] !== s[j]`，那么挪动指针 `j` 到下一个最长的可能匹配的位置，即 j 指针的前一位 π 函数的位置 `j = π(j - 1)`（重难点！！！）

![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/202304141407906.svg)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/202304141407906.svg)

### 试一试：[28. 找出字符串中第一个匹配项的下标](https://leetcode.cn/problems/find-the-index-of-the-first-occurrence-in-a-string/)

Expand Down
2 changes: 1 addition & 1 deletion content/posts/algorithm/单调栈.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ var dailyTemperatures = function(temperatures) {

这道题很经典，经典中的经典，解法很多：双指针/动态规划/单调栈，此处使用单调栈的方式来解题。

![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/202301311545709.png)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/202301311545709.png)

单调栈的解法是有点绕头的，需要按照上图的方式去计算面积，这么想就容易理解点了。

Expand Down
2 changes: 1 addition & 1 deletion content/posts/algorithm/数组遍历指南.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ while (count <= 25) {
- 主对角线：左上角到有下角，坐标 i === j
- 副对角线：右上角到做下角，坐标 i + j === len - 1

![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/202303291708525.png) 如图，按照这样的顺序怎么遍历呢？
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/202303291708525.png) 如图，按照这样的顺序怎么遍历呢？

```TS
// 数组大小为 5 * 5, 斜线对应索引为 [1, 4]，所以外层for遍历斜线
Expand Down
2 changes: 1 addition & 1 deletion content/posts/base-css/SC.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ tags: [CSS]

DOM 发生重叠在垂直方向上的显示顺序：

![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/20221006131841.png)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/20221006131841.png)

从最低到最高实际上是 `装饰->布局->内容` 的变化，比如内联才比浮动的高。

Expand Down
2 changes: 1 addition & 1 deletion content/posts/base-js/EventLoop.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ HTML5 新增了 Web Worker，但完全受控于主线程，不能操作 I/O,DOM
## 代码执行

如下图，JS 内存模型分为三种，栈空间，堆空间和代码执行空间。基本类型数据和引用类型数据的指针存储在栈中，引用类型数据存储在堆中
![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/20220926221003.png)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/20220926221003.png)

之前作用域的文章里提到过三个上下文，全局上下文，函数上下文，eval 上下文。当代码执行的时候需要一个栈来存储各个上下文的，这样才能保证后进入的上下文先执行结束（这里的后是指内部的嵌套函数）。

Expand Down
6 changes: 3 additions & 3 deletions content/posts/base-js/容易混淆的API.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,14 +37,14 @@ tags: [JavaScript, DOM]
- getElementsBy\* 返回的是 HTMLCollection
- querySelectorAll 返回值是 NodeList

![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/20220918155922.png)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/20220918155922.png)

> HTMLCollection 比 NodeList 多了个 `namedItem(name)` 方法，根据 name 属性获取 dom
> NodeList 相比 HTMLCollection 多了更多的信息，比如注释，文本等
## navigator | location | history

![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/20220918151505.png)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/20220918151505.png)

### navigator

Expand All @@ -58,7 +58,7 @@ location 顾名思义，主要是对地址栏 URL 的操作。

具体如下: `location.xxx`

![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/20220918164450.png)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/20220918164450.png)

两个主要点：

Expand Down
2 changes: 1 addition & 1 deletion content/posts/base-js/老生常谈-This.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ date: 2022-09-17T01:25:06+08:00
tags: [JavaScript]
---

![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/this.png)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/this.png)

回想起刚刚进入这行的时候，被 this 没少折腾，回忆记录一下吧~

Expand Down
2 changes: 1 addition & 1 deletion content/posts/base-js/老生常谈-原型链和继承.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ date: 2022-09-17T01:20:45+08:00
tags: [JavaScript]
---

![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/prototype.png)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/prototype.png)

## 正如上图

Expand Down
2 changes: 1 addition & 1 deletion content/posts/base-js/老生常谈-闭包.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ tags: [JavaScript]
description: '清楚了作用域和变量对象，才能真正理解什么是闭包'
---

![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/closure.png)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/closure.png)

## 开门见山

Expand Down
2 changes: 1 addition & 1 deletion content/posts/base-js/设计模式--结构型.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ console.log(adaptee.request()); // Adapter: (TRANSLATED) new: Special behavior o

注意：这里的抽象与实现与编程语言的概念不是一回事。抽象指的是用户界面，实现指的是底层操作代码。

![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/202303141146609.png)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/202303141146609.png)
假设我们正在设计一个图形化编辑器，其中包括不同种类的形状，例如圆形、矩形、三角形等。同时，每个形状可以具有不同的颜色，例如红色、绿色、蓝色等。

```TS
Expand Down
2 changes: 1 addition & 1 deletion content/posts/english/en.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ material image dance lose female 这几个单词于我而言发音需要纠正

### 时态总结

![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/202308251435558.png)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/202308251435558.png)

其中有以下几个注意点：

Expand Down
6 changes: 3 additions & 3 deletions content/posts/http/TCP-IP网络模型.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,15 @@ TCP/IP 模型是互联网的基础，它是一系列网络协议的总称。这
- 网络层，地址管理与路由选择（IP...）
- 链路层，互连设备之间传送和识别数据帧。

![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/202210202335427.png)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/202210202335427.png)

---

作为前端，在应用层主要关注 http 协议，在 [http](https://yokiizx.site/posts/http/http%E5%89%8D%E4%B8%96%E4%BB%8A%E7%94%9F/) 中已经有了详细介绍。

在传输层，核心的就是 TCP 了，三次握手四次挥手那更是老生常谈的问题了。简单记录下常见面试题，详细的见文末参考文章，或者自行 google~

![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/202210210008339.png)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/202210210008339.png)

1. 为啥握手是三次
双端确认各自及对方的接收、发送能力正常。
Expand All @@ -32,7 +32,7 @@ TCP/IP 模型是互联网的基础，它是一系列网络协议的总称。这
3. SYN 攻击是什么
服务器端的资源分配是在二次握手时分配的。就是利用大量不存在的 IP 来向服务器发送连接请求，服务端回复后等待第三次连接，因为客户端 IP 根本不存在，所以会成为半连接，服务端会不断重发直至超时，大量的半连接导致正常的 SYN 请求因为队列满而被丢弃，从而引起网络拥塞甚至系统瘫痪。SYN 攻击是一种典型的 DoS/DDoS 攻击。

![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/202210210009002.png)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/202210210009002.png)

1. 为啥挥手是四次
因为服务端接收到 FIN 的时候，很可能并不能立刻关闭连接，所以先只回复了应答 ACK 报文，告诉服务端我知道了，等服务端报文发送完毕后，再发送 FIN 报文同步关闭。
Expand Down
4 changes: 2 additions & 2 deletions content/posts/http/http前世今生.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ http/2 是二进制协议。
> 在一条链接上可以有多个流，流与流之间是互不影响的，当一个流出现丢包影响范围非常小，从而解决队头阻塞问题
建立一个 HTTPS 的连接，先是 TCP 的三次握手，然后是 TLS 的三次握手，要整出六次网络交互，一个链接才建好，虽说 HTTP/1.1 和 HTTP/2 的连接复用解决这个问题，但是基于 UDP 后，UDP 也得要实现这个事。于是 QUIC 直接把 TCP 的和 TLS 的合并成了三次握手（对此，在 HTTP/2 的时候，是否默认开启 TLS 业内是有争议的，反对派说，TLS 在一些情况下是不需要的，比如企业内网的时候，而支持派则说，TLS 的那些开销，什么也不算了）。
![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/202210251606478.png)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/202210251606478.png)
QUIC 是一个在 UDP 之上的伪 TCP +TLS +HTTP/2 的多路复用的协议。

目前看下来，HTTP/3 目前看上去没有太多的协议业务逻辑上的东西，更多是 HTTP/2 + QUIC 协议。但，HTTP/3 因为动到了底层协议，所以，在普及方面上可能会比 HTTP/2 要慢的多的多。
Expand Down Expand Up @@ -124,7 +124,7 @@ Https 结合两种加密方式的特长，采用公开秘钥加密进行共享

<mark>https 握手过程</mark>

![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/202210272237638.jpeg)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/202210272237638.jpeg)

## 参考

Expand Down
2 changes: 1 addition & 1 deletion content/posts/http/跨域.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ CORS 把请求分为了两种，简单请求和非简单请求，其中非简单
### 为什么请求要带上 origin

主要是因为 CORS 给开发带来了便利，同时也带来了安全隐患——CSRF 攻击。
![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/202210280002617.png)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/202210280002617.png)
如果严格按照同源政策，第 2 步的跨域请求不能进行的，也就不会造成危害。所以 CORS 策略的心智模型是：所有跨域请求都是不安全的，浏览器要带上来源给服务器检验。

### html 标签的 cors 配置
Expand Down
2 changes: 1 addition & 1 deletion content/posts/http/输入url到渲染.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ tags: [http, browser]

下面是一个常见的图：`

![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/202210191532653.png)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/202210191532653.png)

TODO

Expand Down
4 changes: 2 additions & 2 deletions content/posts/java/java_2.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ a++ // 也会强制转换
> [Java 基础——成员变量、局部变量和静态变量的区别](https://blog.csdn.net/haovip123/article/details/43883109)
> 关注一下通过类创建对象时，JVM 的内存状态：
> ![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/202306262325036.png)
> ![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/202306262325036.png)
可见，JVM 内存管理主要分为 3 个部分：

Expand Down Expand Up @@ -231,6 +231,6 @@ package 包名
- `无修饰符`：对`同一个包中的类`公开，`不在同一个包内，即使继承，也不能访问`
- `private`：只能类自身访问

![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/202307042238681.png)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/202307042238681.png)

---
2 changes: 1 addition & 1 deletion content/posts/java/java_3.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ weight: 3

这里借用韩顺平老师的图：

![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/202307042055445.png)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/202307042055445.png)

> 小结：在 new 一个对象的时候，JVM 先在方法区加载类（在这里会加载类的所有祖先类），然后再在堆中分配内存，最后在主栈中创建变量引用。
Expand Down
2 changes: 1 addition & 1 deletion content/posts/java/java_7.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ weight: 7
- tray-catch-finally，捕获异常，自行处理
- throws，抛出异常，交给调用者（方法）来处理，最顶级的处理者就是 JVM

![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/202307222056115.png)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/202307222056115.png)

> 如果没有 try，那么默认就是 throws 抛出
Expand Down
4 changes: 2 additions & 2 deletions content/posts/java/java_8.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ weight: 8

包装类 -- 针对八种基本数据类型有相对应的引用类型。

![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/202307231151103.png)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/202307231151103.png)

> Character, Boolean 的父类是 Object，其他的父类是 Number
Expand Down Expand Up @@ -91,7 +91,7 @@ public final class String
- 方式一：在常量池里寻找是否存在"xxx"，存在就直接指向，否则就在常量池中创建。变量最终指向的是常量池中的空间地址
- 方式二：先在堆中开辟空间，维护了 value 属性，如果常量池中存在 value 就指向常量池空间，否在在常量池中创建。变量最终指向的是堆中的空间地址

![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/202308152311173.png)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/202308152311173.png)

```java
// 经典题
Expand Down
20 changes: 20 additions & 0 deletions content/posts/java/java_9.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
---
title: 'Java_9_集合'
date: 2023-09-14 09:53:06
tags: []
series: [java]
categories: [study notes]
weight: 9
---

Java 种数组需要手动扩容，使用起来很不方便，因此，更常用的是集合。

## Collection

![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/202309161520534.png)

其通用接口见 API，感觉和 js 的 set 差不了多少。

## Map

![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/202309161519964.png)
2 changes: 1 addition & 1 deletion content/posts/node/koa洋葱模型.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ tags: [node]
> 目前 Node.js 社区较为流行的一个 Web 框架，书写比较优雅。
> [koa 常用中间件](https://www.npmjs.com/package/koa-middlewares)
![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/202302081832987.jpg)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/202302081832987.jpg)

## 简单 demo

Expand Down
6 changes: 3 additions & 3 deletions content/posts/others/一点经验.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,18 +14,18 @@ tags: [exp]

### 灵活运用

![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/issue_import.png)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/issue_import.png)

测试嫌手动输入和选择的与导入的不区分，以及是否是保存状态，我就使用了 git 中 untracked, unmodified, unstaged 的概念来类比区分情况。

### tab 接口多次调用

![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/20221009143455.png)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/20221009143455.png)

如上图：公司的组件库，开发时发现，这个 tab 有多少个，在初始化的时候，接口就会被调用多少次。

网上查了下，有的说加 `router-view` 去包裹动态组件，感觉不太靠谱。分析了一下，感觉应该因为 tab 下的组件每个都在被初始化，所有有多少个就经历了多少次，那么只要做到让切换到 tab 下时，再去初始化不就好了？

所以给 `component` 加上了 `v-if` 的判断，试了一下，完美解决，如图。

![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/20221009144306.png)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/20221009144306.png)
2 changes: 1 addition & 1 deletion content/posts/react/React基础原理.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -414,7 +414,7 @@ JSX 转为的 ReactElement 只是一个简单的数据结构，携带着 key，r
- <mark>Renderer（渲染器）</mark>—— 负责将变化的组件渲染到页面上
- 根据 Reconciler 打的标记对 DOM 进行操作
![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/202211111612280.png)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/202211111612280.png)
其中红框中的步骤随时可能由于以下原因被中断：
- 有其他更高优任务需要先更新
Expand Down
4 changes: 2 additions & 2 deletions content/posts/react/React基础原理2.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,12 +137,12 @@ function App() {
进入 render 阶段时，根据组件返回的 JSX 在内存中依次创建 Fiber 节点并连接在一起构建 Fiber 树，这就是 workInProgressFiber 树。**每次构建 workInProgressFiber 树时，都会尝试复用 currentFiber 树已有 Fiber 节点的数据，决定是否复用的过程就是 Diff 算法**。

进入 commit 阶段，把 workInProgressFiber 树渲染到页面上，fiberRoot 的 current 指向 workInProgressFiber 树，workInProgressFiber 树变成了 currentFiber 树。
![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/202211130020382.png)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/202211130020382.png)

### update

更新时，与 mount 阶段几乎一样，只不过此时的 currentFiber 的 rootFiber 已经有了子节点了，workInProgressFiber 会尽量复用 currentFiber 节点的数据。
![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/202211130020090.png)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/202211130020090.png)

## 参考

Expand Down
4 changes: 2 additions & 2 deletions content/posts/react/React基础原理5.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -262,7 +262,7 @@ export const Deletion = /* */ 0b00000000001000;
> 通过二进制表示 flags(v16叫effectTag)，可以方便的使用位操作为 fiber.flags(v16叫effectTag) 赋值多个 effect。
beginWork 的流程图：
![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/202211152222775.png)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/202211152222775.png)

### completeWork

Expand Down Expand Up @@ -404,7 +404,7 @@ rootFiber.firstEffect -----------> fiber -----------> fiber
这样，在 commit 阶段只需要遍历 effectList 就能执行所有 effect 了。

`completeWork` 大致流程图：
![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/202211170035027.png)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/202211170035027.png)

## 总结

Expand Down
2 changes: 1 addition & 1 deletion content/posts/react/React基础原理8-Scheduler.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -383,4 +383,4 @@ ifIdle(yes)->ric
- [window.requestAnimationFrame](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame)
- [IntersectionObserver API 使用教程](https://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html)

![](https://cdn.staticaly.com/gh/yokiizx/picgo@master/img/202211291457300.png)
![](https://cdn.jsdelivr.net/gh/yokiizx/picgo@main/img/202211291457300.png)
Loading

0 comments on commit d916d11

Please sign in to comment.