> 控制反转，是面向对象编程中的一种设计原则，可以用来减低计算机代码之间的耦合度。

## 控制反转的应用

首先来看一段常见的 React 代码

```javascript
import { useState } from "react"

const Father = () => {
  const [count, setCount] = useState(0);
  console.log("Father rendered");
  return (
    <>
      <p>I am Father p tag, {count}</p>
      <button onClick={() => setCount(count + 1)}>Add Count</button>
      <br />
      <Children />
    </>
  );
};

const Children = () => {
  console.log("Children rendered");
  return <p>I am Children p tag</p>;
};
```

这段代码最终会在屏幕上显示出几个 p 标签，打开 Chrome DevTool 中的 Console，会显示父组件和子组件在首次渲染时的打印。这里父组件和子组件分别对应 Father 和 Children，下文中统称父组件和子组件。

![代码显示效果](https://yujian-bolg-1308518379.cos.ap-guangzhou.myqcloud.com/%E4%B8%BA%E4%BB%80%E4%B9%88React%E4%B8%AD%E4%BD%BF%E7%94%A8%E6%8E%A7%E5%88%B6%E5%8F%8D%E8%BD%AC%E4%B8%8D%E4%BC%9A%E8%A7%A6%E5%8F%91%E9%87%8D%E6%96%B0%E6%B8%B2%E6%9F%93%2FReact%20%E6%8E%A7%E5%88%B6%E5%8F%8D%E8%BD%AC%E4%B8%8E%E9%87%8D%E6%96%B0%E6%B8%B2%E6%9F%931.webp)

点击 Add Count 按钮触发 state 更新，同时观察 Console 标签页，可以看到，Father 和 Children 组件都触发了重新渲染：

![state 更新](https://yujian-bolg-1308518379.cos.ap-guangzhou.myqcloud.com/%E4%B8%BA%E4%BB%80%E4%B9%88React%E4%B8%AD%E4%BD%BF%E7%94%A8%E6%8E%A7%E5%88%B6%E5%8F%8D%E8%BD%AC%E4%B8%8D%E4%BC%9A%E8%A7%A6%E5%8F%91%E9%87%8D%E6%96%B0%E6%B8%B2%E6%9F%93%2FReact%20%E6%8E%A7%E5%88%B6%E5%8F%8D%E8%BD%AC%E4%B8%8E%E9%87%8D%E6%96%B0%E6%B8%B2%E6%9F%932.webp)

**这是因为父组件 state 更新触发重新渲染，连带子组件一起重新渲染**，但是实际上在子组件中，并没有用到来自父组件的状态或是自身状态发生了变化，**既然状态并没有发生变化不存在重新渲染的需要，那么这个组件更新就是没有必要的**。如果子组件的渲染开销比较大，这可能会是一个比较严重的性能问题。

那么如何解决这个问题呢？可能第一反应是给子组件加上 `React.memo` 进行 props 浅层比较，但是秉承着能不用就不用的原则，我们探索一些其他的解决办法，比如说**控制反转（Inversion of Control）**。

从代码中可以看到，`<br />` 标签和子组件其实并不需要来自父组件的状态，仅仅是 `<p>` 标签和 `<button>` 按钮依赖 state。

我们改动一下上面的代码，在父组件和子组件之间添加一个 IOC 组件（FatherIoc）：

```javascript
import { useState } from "react";

const Father = () => {
  console.log("Father rendered");
  return (
    <FatherIoc>
      <br />
      <Children />
    </FatherIoc>
  );
};

const FatherIoc = ({ children }) => {
  const [count, setCount] = useState(0);
  return (
    <>
      <p>I am Father p tag, {count}</p>
      <button onClick={() => setCount(count + 1)}>Add Count</button>
      {children}
    </>
  );
};

const Children = () => {
  console.log("Children rendered");
  return <p>I am Children p tag</p>;
};
```

在这个 IOC 组件中，我们把原先父组件中依赖 state 的部分放在了这里，将状态进行下放，其余不依赖的部分则通过组件的 children 属性传递给 IOC 组件，这时我们再去页面上查看 DevTool：

![IOC 之后](https://yujian-bolg-1308518379.cos.ap-guangzhou.myqcloud.com/%E4%B8%BA%E4%BB%80%E4%B9%88React%E4%B8%AD%E4%BD%BF%E7%94%A8%E6%8E%A7%E5%88%B6%E5%8F%8D%E8%BD%AC%E4%B8%8D%E4%BC%9A%E8%A7%A6%E5%8F%91%E9%87%8D%E6%96%B0%E6%B8%B2%E6%9F%93%2FReact%20%E6%8E%A7%E5%88%B6%E5%8F%8D%E8%BD%AC%E4%B8%8E%E9%87%8D%E6%96%B0%E6%B8%B2%E6%9F%933.webp)

我们连续点击 5 次 Add Count  按钮，count 变成了 5，触发 5 次更新，但是 Console 始终只停留在页面第一次渲染时打印的信息，说明这 5 次更新子组件和父组件都没有重新渲染，目标达成。

## 为什么

从上面的代码中，我们并没有使用 `React.memo`，仅仅修改了一下代码就完成了减少页面渲染次数的目的，这种模式叫做控制反转，在这里我们先不讨论控制反转的具体释义，我们仅仅从 React 的角度看看为什么控制反转能达到减少渲染的目的。

### 省流描述

**因为 children 来自于父组件，子组件的重新渲染并不会导致其也重新渲染**。

### 完整描述

在 React 中组件最终会被转换为一个个 Fiber 节点，这些 Fiber 节点连起来就形成了一颗 Fiber 树（或者称为 vdom 树），在这棵树中判断节点是否可以复用有以下几个条件：

1. Fiber 节点的 type 属性是否发生变化；
2. Fiber 节点的 props 属性是否发生变化；
3. Fiber 节点的 state 是否发生变化；
4. Fiber 节点的 context 是否发生变化；

如果以上的条件都为否，那么就可以判断这个节点没有发生变化不需要重新渲染，但是由于 React 并没有采用 Vue 那样的方式可以细粒度的找出哪些节点发生了更新，**React 每次触发更新都会从头开始生成一个新的 Fiber 树，然后与上一次更新之后生成的旧 Fiber 树对比，判断上述几个条件，找出发生了变化的 Fiber 节点，再将其更新到页面上**。

这样的逻辑是可行的，但是每次都从头开始对比整颗树难免会做很多没有必要的比较，听起来也不够 React。**有没有一个办法可以在父节点对比时就提前知道其自身的子节点有没有发生变化**，如果都没有发生变化就直接跳过后续子节点的对比流程呢？这样无疑是能省下很多不必要的操作的。

所以在 React 触发更新之后，**会从当前触发更新的节点开始向上对其所有的父节点打上有子节点需要更新的标记**，这时在上面提到的用于判断能否复用的 4 个条件中要加多额外的一项：**子节点是否存在变化**，满足原有的 4 个条件，表示当前节点并没有发生变化可以进入复用逻辑，如果连同满足额外的第 5 个条件，那么表示当前节点以及其所有的子节点都可以跳过对比直接复用。

理论讲完了，我们回到代码，先从有 IOC 组件的代码开始， 父组件（Father）中满足上述原有条件中的 4 个，但是其子组件（FatherIoc）中存在状态更新，并不满足第 5 个额外条件，**所以会进入复用逻辑但不会跳过后续对比**，在复用逻辑中会复制上一次更新时它的（Father）子 Fiber 节点（FatherIoc）作为本次更新的子 Fiber 节点，这个复制的过程会连带旧节点中的 props 一起赋值给新节点。

等对比进行到 FatherIoc 子组件时，此时它的 Fiber 节点是由父组件在上一次更新中直接复制的 Fiber 节点，所以 props 会完全相同，但是自身的 state 发生了变化，不会进入复用逻辑，而是重新调用生成新的 Fiber 节点。**而 children 来自于父组件，并不会重新创建**。

等对比进行到 children 属性对应的节点也就是 `<br />` 标签和 Children 节点时，发现其完全满足上述判断的条件包括第 5 个额外条件，就会跳过其所有的子节点对比直接复用。

而在没有 IOC 组件的代码中父组件（Father）自身的状态发生变化，React 会重新调用它生成新的 Fiber 节点，子组件（Children）因为被重新创建，它的 props 也会发生变化不再相等，继而触发重新渲染。在这里你可能会疑惑，为什么子组件的 props 会发生变化？明明从代码层面来看子组件的 props 都是空的，确实，子组件的 props 是空的，但是在 JSX Element 转换成 React.createElement() 形式的时候，空的 props 会作为一个空对象传给 React.createElemen()。而对象是一个引用类型，即使两者都是空对象，它们也是不相等的。

## 参考文档

- [React 父组件刷新导致子组件重新渲染问题](https://segmentfault.com/q/1010000040771487)
- [图解 React - fiber 树构造(对比更新) - bailout 逻辑](https://7kms.github.io/react-illustration-series/main/fibertree-update/#bailout%E9%80%BB%E8%BE%91-bailout)
- [Before You memo()](https://overreacted.io/before-you-memo/)

为什么 React 中使用控制反转不会触发重新渲染

>这篇文章是 [Working with the file system on Node.js](https://2ality.com/2022/06/nodejs-file-system.html) 学习过程中的个人总结和笔记，大部分内容实际来自于原文章，如果你对 Nodejs 中的文件系统感兴趣，我更建议你直接去看原文章。

## Node.js 文件系统 APIs 具有多种不同的风格

- 同步风格的函数调用 `fs.readFileSync(path, options?): string | Buffer`
- 异步风格的函数调用
	- 异步回调 `fs.readFile(path, options?, callback): void`
	- 异步 Promise `fsPromises.readFile(path, options?): Promise<string|Buffer>`

 它们在名称上很容易区分：
 - 异步回调的函数名，如 `fs.readFile()`
 - 异步 Promise 的函数名和异步回调的函数名相同，但是在不同的模块中，如 `fsPromises.readFile()`
 - 对于同步的函数名，则是在函数结尾加上 Sync 字样，如 `fs.readFileSync`


## 访问文件的方式

1. 可以通过字符串的方式读写文件
2. 可以打开读取流或写入流，并将文件分成更小的块，一次一个。流只允许顺序访问
3. 可以使用文件描述符或文件句柄，通过一个类似流的 API 获得顺序或是随机访问
	- 文件描述符 (File descriptors) 是一个用于表示文件的整数，Nodejs 中有很多函数可以管理文件描述符
4. 只有同步风格和异步回调风格的 API 使用文件描述符，对于异步 Promise 风格的 API，则有着更加抽象的类实现：文件句柄类 (class FileHandle)，它基于文件描述符


## 文件系统中的一些重要类 (Important classes)

### URLs：字符串文件系统路径的替代方案

当 Nodejs 的一个文件系统 API 支持字符串形式的路径参数，那么它通常也会支持 URL 的实例

```javascript
fs.readFileSync('/tmp/text-file.txt')
fs.readFileSync(new URL('file:///tmp/text-file.txt'))
```

手动转换文件路径看起来很容易，但是实际上隐藏着许多坑，所以更加推荐以下函数对路径进行转换：
- [`url.pathToFileURL()`](https://nodejs.org/api/url.html#urlpathtofileurlpath)
- [`url.fileURLToPath()`](https://nodejs.org/api/url.html#urlfileurltopathurl)

### [`Buffer`](https://nodejs.org/api/buffer.html)：在 Nodejs 中表示固定长度的字节序列，它是 Uint8Array 的子类，更多的在二进制文件中使用

由于 Buffer 实际上是 Uint8Array 的子类，和 URL 与 String 的关系相同，当 Nodejs 接受一个 Buffer 的同时，它也接受 Uint8Array，考虑到 Uint8Array 具有跨平台(cross-platform) 的特性，很多时候可能会更加合适

Buffers 可以做一件 Uint8Array 不能做到的事：以各种编码方式对文本进行编码和解码，如果我们需要在 Uint8Array 中编码或解码 UTF-8，我们可以使用 `class TextEncoder` 或是 `class TextDecoder`


## 文件系统中的文件读和写

### 读取文件并将其拆分为行

>这里将会用两个读取文件并按行拆分的例子演示 fs.readFile 和 stream 读取的差异

**[`fs.readFileSync(filePath, options?)`](https://nodejs.org/api/fs.html#fsreadfilesyncpath-options)**

```javascript
import * as fs from 'node:fs';
fs.readFileSync('text-file.txt', {encoding: 'utf-8'})
```

这种方法的优缺点：
- 优点：使用简单，在大多数情况下可以满足需求
- 缺点：对大文件而言并不是一个好的选择，因为它需要完整的读取完数据

按行拆分

```javascript
// 拆分不包含换行符
const RE_SPLIT_EOL = /\r?\n/;
function splitLines(str) {
	return str.split(RE_SPLIT_EOL);
}
// ['there', 'are', 'multiple', 'lines']
splitLines('there\r\nare\nmultiple\nlines');

// 拆分包含换行符
const RE_SPLIT_AFTER_EOL = /(?<=\r?\n)/;
function splitLinesWithEols(str) {
	return str.split(RE_SPLIT_AFTER_EOL);
}
// ['there\r\n', 'are\n', 'multiple\n', 'lines']
splitLinesWithEols('there\r\nare\nmultiple\nlines')
```

**stream**

原文章中使用的是跨平台的 `web stream`，且声明了两个 class (`ChunksToLinesStream`、`ChunksToLinesTransformer`)，类的代码太长这里就不贴出来了，这两个类也是实现 `web stream` 逐行读取的关键。

```javascript
import * as fs from "node:fs";
import { Readable } from "node:stream";

const nodeReadable = fs.createReadStream(
	"text-file.txt",
	{ encoding: 'utf-8' }
);
const webReadableStream = Readable.toWeb(nodeReadable);
// 逐行读取
// const lineStream = webReadableStream.pipeThrough(
// 	new ChunksToLinesStream();
// )
for await (const line of lineStream) {
	console.log(line);
}
```

`web stream` 是异步可迭代的，这也是为什么上述代码中使用 `for-await-of`

这种方法的优缺点：
- 优点：对大文件友好，因为我们并不需要等到所有数据读取完
- 缺点：使用复杂且都是异步操作

### 同步的将字符串写入到文件中

>和上面相同，这里也会使用两个例子演示 `fs.writeFile` 和 `stream` 的差异

**[`fs.writeFileSync(filePath, str, options?)`](https://nodejs.org/api/fs.html#fswritefilesyncfile-data-options)**

使用这种办法写入时，如果文件已经存在于路径上，那么会被覆盖掉

```javascript
import * as fs from 'node:fs';

fs.writeFileSync(
	'existing-file.txt',
	'Appended line\n',
	{ encoding: 'utf-8' }
);
```

如果并不希望已经存在的文件被覆盖掉，那么需要在 `fs.writeFileSync` 的 `options` 参数中添加一个属性: `flag: "a"`，这个属性表示我们需要追加而不是覆盖文件，

ps: 在有些 fs 函数中，这个属性名叫做 `flag`，但是另外一些函数中会被叫做 `flags`

**stream**

```javascript
import * as fs from "node:fs";
import { Writable } from "node:stream";

// 使用 fs.createWriteStream 创建一个 Nodejs srteam
const nodeWritable = fs.createWriteStream("text-file.txt", {
	encoding: "utf-8",
});
// 转换为 web stream
const webWritableStream = Writable.toWeb(nodeWritable);
const writer = webWritableStream.getWriter();

try {
	await writer.write("First line\n");
	await writer.write("Second line\n");
	await writer.close();
} finally {
	writer.releaseLock();
}
```

以上代码和 `fs.writeFileSync` 相同：如果路径上依旧存在文件，那么写入的内容会将原文件的内容覆盖掉，如果需要追加而不是覆盖，操作和 `fs.writeFile` 是相同的，在 `fs.createReadStream` 的 `options` 参数中添加一个属性 `flag: "a"`


## 遍历和创建目录

### 遍历目录

```javascript
import * as fs from "node:fs";
import * as path from "node:path";

function* traverseDirectory(dirPath) {
	const dirEntries = fs.readdirSync(
		dirPath,
		{ withFileTypes: true }
	);
	dirEntries.sort((a, b) => a.name.localeCompare(b.name, "en"));
	for (const dirEntry of dirEntries) {
		const fileName = dirEntry.name;
		const pathName = path.join(dirPath, fileName);
		yield pathName;
		
		if (dirEntry.isDirectory()) {
			yield* traverseDirectory(pathName);
		}
	}
}

for (const filePath of traverseDirectory("../../../")) {
	console.log(filePath);
}
```

在以上代码中我们用到了 `fs.readdirSync` 用来返回子目录路径，其中当 option 参数中的 `withFileTypes` 为 `true` 时，它会返回一个可迭代的 `fs.Dirent` 实例 (directory entries)，如果 `withFileTypes` 为 false 或者不传，那么会以字符串类型返回字符串

### 创建目录

我们可以使用 [`fs.mkdirSync(thePath, options?)`](https://nodejs.org/api/fs.html#fsmkdirsyncpath-options) 来创建一个目录，其中 `options.recursive` 参数用于确定如何在 `thePath` 上创建目录：
- 如果 `recursive` 参数缺失或者为 false，那么 `fs.mkidrSync` 会返回 `undefined`，且在一些情况下会抛出异常：
	- 目录已经存在于 `thePath` 上
	- `thePath` 的父目录不存在
- 如果 `recursive` 为 true
	- 即使目录已经存在于 `thePath` 上也不会抛出错误
	- 如果父目录不存在，那么会一起创建父目录，并返回第一个创建成功的目录 path

### 确保父目录存在

如果我们希望按需设置嵌套文件结构 (nested file structure)，我们就没法总是在创建新文件时确保其祖先目录存在，以下代码就是为了解决这个问题

```javascript
import * as fs from "node:fs";
import * as path from "node:path";

const ensureParentDirectory = (filePath) => {
	const parentDir = path.dirname(filePath);
	if (!fs.existsSync(parentDir)) {
		fs.mkdirSync(parentDir, { recursive: true });
	}
};
```

### 创建临时目录

在有些场景，我们需要创建一个临时目录，那么这时我们可以使用 [`fs.mkdtempSync(pathPrefix, options?)`](https://nodejs.org/api/fs.html#fsmkdtempsyncprefix-options)，它会在 `pathPrefix` 目录下创建一个随机6位字符串作为名称的目录，并返回路径

如果我们需要在系统的全局临时目录中创建临时目录，我们可以借助 `os.tmpdir()`

```javascript
import * as os from "node:os";
import * as fs from "node:fs";
import * as path from "node:path";

const pathPrefix = path.resolve(os.tmpdir(), "my-app");
const tmpPath = fs.mkdtempSync(pathPrefix);
```

需要注意的是，创建的临时目录并不会在 Nodejs 脚本结束后被删除，我们需要自己手动的去删除它，或是依赖系统自己的定期清除(不太可靠)


## 复制、重命名、移动文件或是目录

### 复制目录结构

[`fs.cpSync(srcPath, destPath, options?)`](https://nodejs.org/api/fs.html#fscpsyncsrc-dest-options) 可以帮助我们同步地将整个目录结构从src 复制到 dest，包括子目录和文件，而其中的 `options` 有如下一些有意思的参数：
-  `recursive (default: false)`：如果该参数为 `true` 则递归复制目录（包括空目录），ps：在我的测试中，这个参数如果为 `false` 是一定会抛出异常的
- `force (default: true)`：为 true 时则覆盖已经有文件

### 重命名或移动文件或文件夹

[`fs.renameSync(oldPath, newPath)`](https://nodejs.org/api/fs.html#fsrenamesyncoldpath-newpath) 它可以重命名或者移动文件或文件夹从 `oldPath` 到 `newPath`，对于目录而言，该函数仅能实现重命名，而对于文件则可以重命名或是移动

### 移除 (Remove) 文件或是目录

[`fs.rmSync(thePath, options?)`](https://nodejs.org/api/fs.html#fsrmsyncpath-options) 在 `thePath` 上删除一个文件或是目录，就像是 `rm, rm -rf` `options` 中一些有意思的参数：
- `recursive (default: false)`：只有该参数为 `true` 时，才会删除目录（包含空目录）
- `force (default: false)`：如果该参数为 `false`，`thePath` 上不存在文件或是目录时会抛出异常

[`fs.rmdirSync(thePath, options?)`](https://nodejs.org/api/fs.html#fsrmdirsyncpath-options) 则用来专门删除空的目录，如果目录并不是空的，则会抛出异常

在有些场景中，一些脚本执行之前需要清理它们的输出(output)目录的所有文件，这时可以用到一个简单的工具(utils)函数：

```javascript
const clearDirectory = (dirPath) => {
	for (const fileName of fs.readdirSync(dirPath)) {
		const pathName = path.join(dirPath, fileName);
		fs.rmSync(pathName, { recursive: true });
	}
};
```

以上代码中我们用到了 `fs.readdirSync()` 函数，然后遍历其返回值并调用 `fs,rmSync()` 递归删除目录


## 读取和更改文件系统条目 (entries)

### 检查文件或者目录是否存在

[`fs.existsSync(thePath)`](https://nodejs.org/api/fs.html#fsexistssyncpath)，早在之前的章节中我们就已经使用过这个 API 了，如果 `thePath` 文件或者目录已经存在则会返回 `true`

### 检查文件详细信息，如创建时间

[`fs.statSync(thePath, options?)`](https://nodejs.org/api/fs.html#fsstatsyncpath-options) 会返回一个 `fs.stats` 的实例，`thePath` 上文件或者目录的详细信息，一些有意思的 `options`：
- `throwIfNoEntry (default: true)`：该参数用于控制 `thePath` 上不存在目录或文件的时候的行为
	- 如果参数为 `true`，则会抛出异常
	- 如果参数为 `false`，则会返回 `undefined`
- `bigint (default: false)`：如果该参数为 `true`，函数将用 bigints 表示数值，如时间戳

[`fs.Stats`](https://nodejs.org/api/fs.html#class-fsstats) 实例的一些属性：
- 系统条目(system entry) 属于哪种类型
	- `stats.isFile()`
	- `stats.isDirectory()`
	- `stats.isSymbolicLink()`
- `stats.size` 按字节为单位显示大小
- 时间戳 (Timestamps)
	- 总共有三种时间戳：
		- `stats.atime` 最后存取时间
		- `stats.mtime` 最后修改时间
		- `stats.birthtime` 创建时间
	- 这三种时间戳都有三种不同的单位表示，以 atime 为例
		- `stats.atime` Date 的实例
		- `stats.atimeMS` 自 POSIX Epoch 起的毫秒数
		- `stats.atimeNs` 纳秒自 POSIX，需要 `bigint` 参数为 `true`

### 修改文件属性：权限、所有者、组、时间戳

[`fs.chmodSync(path, mode)`](https://nodejs.org/api/fs.html#fschmodsyncpath-mode) 用于修改文件权限
[`fs.chownSync(path, uid, gid)`](https://nodejs.org/api/fs.html#fschownsyncpath-uid-gid) 用于修改文件的所有者和组
[`fs.utimesSync(path, atime, mtime)`](https://nodejs.org/api/fs.html#fsutimessyncpath-atime-mtime) 修改文件的时间戳


## 使用链接 (links)

Nodejs 文件系统(File System) 还提供了一些用于链接的 API

### 硬链接 （hard links） API

[`fs.linkSync(existingPath, newPath)`](https://nodejs.org/api/fs.html#fslinksyncexistingpath-newpath) 创建一个硬链接
[`fs.unlinkSync(path)`](https://nodejs.org/api/fs.html#fsunlinksyncpath) 移除一个硬链接以及它指向的文件（如果这是指向那个文件的最后一个硬链接）

### 符号链接（symbolic links） API

[`fs.symlinkSync(target, path, type?)`](https://nodejs.org/api/fs.html#fssymlinksynctarget-path-type) 创建一个符号链接
[`fs.readlinkSync(path, options?)`](https://nodejs.org/api/fs.html#fsreadlinksyncpath-options) 返回位于 `path` 的符号链接的目标

还有一些函数用于在不解除符号链接引用的情况下进行操作（它们的函数名实际上就是普通文件的操作 API 前用 “l” 开头）

[`fs.lchmodSync(path, mode)`](https://nodejs.org/api/fs.html#fslchmodsyncpath-mode) 更改 `path` 上符号链接的权限
[`fs.lchownSync(path, uid, gid)`](https://nodejs.org/api/fs.html#fslchownsyncpath-uid-gid) 更改 `path` 上符号链接的用户和组
[`fs.lutimesSync(path, atime, mtime)`](https://nodejs.org/api/fs.html#fslutimessyncpath-atime-mtime) 更改 `path` 上符号链接的时间戳
[`fs.lstatSync(path, options?)`](https://nodejs.org/api/fs.html#fslstatsyncpath-options) 返回 `path` 上符号链接的 stats

还有一些有用的函数：
[`fs.realpathSync(path, options?)`](https://nodejs.org/api/fs.html#fsrealpathsyncpath-options) 通过解析(.)、(..) 和 符号链接计算并返回规范路径名 (canonical pathname)


## 关于 `existsSync` 的一些补充

>这些补充来自原文章的评论区，在作者的文章之外做了一些有意思的补充

`existsSync` 是一个比较特殊的 API，因为 `exists` 已经被废弃，但是 `existsSync` 却没有，并且在 `fsPromise` 中也没有相应的实现，有的只是 `fsPromises.access`：如果文件不可访问则抛出错误

因为 Nodejs 团队认为，在使用文件或目录之前检查是否存在是一个反模式 (anti-pattern)，它会使用户暴露在 TOCTOU 的风险当中，相应的，Nodejs 团队推荐直接尝试访问、读/写文件，并在目录不存在时处理错误

详情请参阅 [`fs.access`](https://disq.us/url?url=https%3A%2F%2Fnodejs.org%2Fapi%2Ffs.html%23fspromisesaccesspath-mode%3APpN2_GmmtjnrYBAhPu0Xob7JfRw&cuid=611304 "https://nodejs.org/api/fs.html#fspromisesaccesspath-mode") 关于推荐和不推荐("recommended" "not recommended")的部分

Nodejs 文件系统（fs）学习笔记

>原型 (prototype)：为其他对象提供共享属性的对象。

JavaScript 是一门基于原型的语言，它靠着原型这一个特殊的概念实现了面对对象，在一众基于“类”的面对对象语言中脱颖而出，可以说原型就是 JavaScript 语言的基石。

那么原型是什么？开头那句话是 ECMAScript 5.1 中对原型做出的概述，但是深入到 JavaScript 的学习中会看到关于原型总会有不同的样子出现例如 `prototype`、`__proto__` ，它们分别代表着什么？在 JavaScript 中又有着怎样的作用？

## `prototype`、`[[prototype]]` 和 `__proto__` 都是什么？

`[[prototype]]` 是所有对象都具有的私有属性，这个属性的实现方式取决于各个平台，而对于浏览器环境而言，以 Chrome 为例，定义了 `__proto__` 访问器属性(getter、setter) 指向 `[[prototype]]`，也就是说在对象中，通过 `__proto__` 访问到的就是 `[[prototype]]` 私有属性

**注意： 这个属性由浏览器实现，且在 Web 标准中被删除，为保证 Web 浏览器的兼容性，建议使用 `Object.getPrototypeOf()` 替代**

`prototype` 是函数独有的属性，无论什么时候只要创建了新的函数，就会根据特定的规则为该函数创建一个 `prototype` 属性，这个属性指向一个私有的对象，这个对象也有着一个 `constructor` 属性指回该函数，同时这个对象也具有 `__proto__` 属性指向 `Object.prototype`

当一个对象通过 new 被实例化出来，那么这个对象的 `[[prototype]]` 属性也就是 `__proto__` 会被指向该函数的 `prototype` 属性，这是 JavaScript 实现面对对象的基石

>ECMAScript 5.1:
>当构造函数创建一个对象后，该对象隐式引用构造函数的 `prototype` 属性用以解决对象的属性引用。构造函数的 `prototype` 属性可以通过 `constructor.prototype` 表达式来访问，同时添加在该对象的原型里的属性会通过继承的方式与所有继承此原型的对象共享。或者，可以使用内置函数 `Object.create()` 明确指定原型来创建一个新对象

补充：并非所有对象都会具有 `[[prototype]]` 属性，你可以用 Object.create(null) 方法创建出一个没有原型的对象

![](https://yujian-bolg-1308518379.cos.ap-guangzhou.myqcloud.com/%E5%9B%BE%E8%A7%A3%20JavaScript%20%E7%9A%84%E5%8E%9F%E5%9E%8B%E5%85%B3%E7%B3%BB.webp)

![](https://yujian-bolg-1308518379.cos.ap-guangzhou.myqcloud.com/%E6%B7%B1%E5%85%A5%20JavaScript%20%E5%8E%9F%E5%9E%8B%E6%80%9D%E8%80%83%20%E5%9B%BE%E7%89%87.webp)

参考文档：
- [\_\_proto\_\_ 和 prototype 到底有什么区别](https://juejin.cn/post/6844903869428793358)
- [所有javascript对象都有prototype还是仅仅函数对象有prototype？](https://segmentfault.com/q/1010000007980024)
- [ECMAScript5.1中文版](http://yanhaijing.com/es5/#book)
- [MDN Object.prototype.\_\_proto\_\_](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/proto)

深入 JavaScript 原型思考

>相信就算过去很久很久，每次回首的时候2021都会是一个相当难忘的一年，这一年发生了很多的事情，每一篇都值得我单独写一篇长长的文章，但奈何词藻匮乏没法支撑起心里的波涛汹涌。

今年年初，刚刚踏出校园的我压力是很大很大的，有来自家里的也有来自自身的，但都指向一点：我需要找一份工作。其实找一份工作很简单，但是找一份心仪的满意的真的很难很难，自己非常清楚自己的能力界限在哪里，所拥有的能力还不足以支撑我找到一份专业对口的工作，拿着一份东拼西凑的简历，和一点点浅薄的前端知识，带着那些从视频中临时学到的所谓“前端必备基础”，就出来找工作了，顶着焦虑在 BOSS 直聘上不断地投递前端相关的工作，大多数都如同石沉大海一般没有一丝波澜，真的非常让人灰心丧气，但就和瞎猫碰上死耗子一样，这个世界上免不了有那么几只“瞎猫”—— 我得到了一个对口工作的面试。刚收到面试邀请的时候其实我是非常紧张的，想去又畏惧的矛盾心理一直来回反复横跳，最后迫于现实的压力和面试机会的宝贵，我还是选择了正面面对，第一份面试的机会好巧不巧在家附近，没有一点互联网产业痕迹的小镇上找到一家专业对口的公司真的是很让我惊讶的一件事。面试的那天其实我什么也没有准备，连临时抱佛脚去刷前端“面经”都没有，现在回过头来看，不知道是太过于自信还是已经是一副破罐子破摔的心态去面对。第一次坐在面试官面前，心情很忐忑，有些怯场，手心已经开始出汗了，大脑飞快地运转思考接下来可能会面对的问题，我想我那个时候的耳朵应该已经红透了吧，面试官问我的问题我依稀还记得一些，问了我一些 Vue 框架的使用和开发时候可能会遇到的情景题，其实考察的知识点也很简单，就是非常非常基础的JS和框架知识，问题并没有多少深度，但是很遗憾，缺乏实际开发经验的我没有一个能答得上来，后来面试官问我薪资的时候我甚至没有底气说出我期望的薪酬，悻悻而归。

这一次面试失利，无疑是对自信心的又一次打击，让本来就像被压着一座大山一样的我更加的喘不过气来。好在运气不错，没过多久我就又收到了一个面试邀请，这次的公司地址在离家比较远的地方，我需要坐快三个小时的车才能到那个公司，因为害怕面试的时候迟到，所有我提前了好几个小时，到达公司大门的时候甚至还没有到约定好的时间，这一次面试出乎意料的顺利，与其说是顺利不如说是在面试的时候几乎没有问我什么问题，问了我对 React 和 Socket.io 的了解程度，我说我不知道，这是实话，我那时对前端框架的了解程度仅限于知道一个叫 Vue 的框架和仅仅会使用而已，React 之流仅仅存在于“听到过”的层次，但是我的回答好像并没有对面试官的判断造成什么影响，他似乎并不关心我是否熟悉这些技术栈，转而开始和我讨论薪资，没错，我通过了面试，在我还在一脸懵逼的时候

“每周单休，试用期 3K，时长一个月，转正加 1K，半年后涨到 5K，而且涨薪时间可以酌情提前”，随着这一段话的话音落下，我的第一个与专业相关的 offer 就这样拿到了手，说完他还补充了两句：“我们这里是包住的，但是不包吃”，似乎是怕我有所顾虑，紧接着说：“但是饭堂的饭菜很便宜”，走出面试办公室，面试官带着我参观公司的产品，这是一家做无人零售的初创公司，面试官本人就是公司的技术主管，一手包办了公司里面的前端和后端技术，在那时的我眼里无疑就是大佬级别的存在。

回到家里，心里在犹豫和纠结，我清楚我现在的能力再拿到一个 offer 是非常困难的，现在的机会错过可能就要再找好久了，但是一方面又对这个 offer 的技术栈感到畏惧，毕竟是一个完全不熟悉的技术，万一我学不会怎么办，万一我干不了怎么办，就这样想去和不想去的想法在心里不断地交织，最后还是对新技术的渴望战胜了其他的担忧（这是真的，决定的一大原因就是因为对 React 和 Webscoket 的好奇），我最后接下了这个 offer。

刚入职的时候真的非常的痛苦，因为技术的贫瘠，看代码就像是在看天书一样，一个很小很小的功能我足足改了一天，接到的任务其实都是很简单的小任务，但是每一个都让我压力倍增，在那段时间里，甚至晚上做梦都会梦到在敲代码在解决任务，然后被惊醒吓出一身冷汗，我甚至好几次的怀疑自己是不是不适合程序员这条路，每天在边学边用的环境下工作，其实这还不是那个时候的最困难的事情，最困难的是无边无际的孤独，实际上我并不是第一次走出家门在外工作，但是全身都被孤独笼罩的时候很容易让人变得手足无措，那段时间我喜欢在晚上出去骑自行车，这是一个很不明智的选择，人在晚上会变得容易想很多事情，会让孤独感变得越来越深。

这样的日子持续了快一个多月，这要感谢我的宝宝，那个时候每天最期待的事情就是周末和她见面充电，安慰我陪我度过难关，慢慢的我对工作上的业务开始熟悉，写代码也脱离现学现卖的窘境开始能游刃有余起来，借助上班时间的空闲我得以有时间能更加深入的学习工作所需要的技术栈，对欠缺的基础进行查缺补漏，除此之外在下班时间，在晚上我也不再一个人骑自行车，而是和朋友一起，工作和健身两不误，每天都有着不错的运动量，日子一天比一天好了起来，但是我并没有就此停下脚步，因为早在我决定入职的那天起，我就想好了跳槽的时间，朝着更高的薪资上努力，是的，我并不满足于现在的条件，在我的展望中，有着更加宏大的目标，我必须朝着那个目标不断地前进，就这样我开始了“带薪学习”，完成工作任务的情况下完善自己的知识体系朝着更加深入的方向前进，我对 React 的理解越来越深，对它的哲学和思想愈发的认可，对 JS 的使用愈发的熟练，可能是领导看到了我对业务的熟悉，也可能是同事的接连离职，他在5月底的时候主动给我提前涨薪了，但是这并没能收买到我，因为在我的计划中，薪资要比这要高得多，我始终相信自己可以。

在6月份的时候，我切身的感受到了新冠带来的影响和心理上的恐惧，公司对面的医院出现了一个确诊病例，全市开始了核酸检查，第一次排了4个小时的队伍，第一次捅嗓子做核酸，但是就算如此我的每日自行车计划也没有停止，和朋友在骑行过程的谈资还多了一个关于疫情，只是每周最期待的周末去找女朋友的日程被迫终止了，学校封校，学生不允许外出，给本来就灰暗疫情生活再加了点难过。

疫情持续了快一个月，在7月中旬我向领导提了下个月的辞职，他似乎已经猜到了我的离职，没有做过多的挽留，就这样我的离职进入倒计时阶段，说来也很有意思，早在入职的时候就已经计划好了离职的时间，并且在工作的这几个月里边也无数次的出现想要离职的念头，但在终于要走的时候总会有些许不舍。日子过的很快，就这样来到8月份，到了离职的时间，花了点时间收拾完宿舍里的东西，走之前回头看了一眼住了半年多的宿舍，想到不出意外的话以后都不会再回来了，竟然还有点伤感，叫了辆顺风车把东西搬回家，打算给自己放一个短暂的小假。

休息最多是肉体上的，精神上并没有得到缓解，我需要找到下一份工作缓解这种心情上的焦虑，大概休息了两三天之后，没能压住心中的焦虑，我又开始找工作，都说面试是检验自己这段时间是否有进步的最好方法之一，面试中的我不再答非所问，而是非常流畅自然的回答出面试官提出的技术问题，甚至在询问自己的薪资要求的时候也非常有底气，同时我也感觉到在这一座并没多少互联网味道的城市里，我似乎快要触摸到了上限：面试官问的问题同质化严重，问的知识点大同小异，这实际上是很值得我思考的问题，最后，经过两个星期的不断面试，我如愿以偿的拿到了一个满意的 offer，说我很满意的原因除了薪资之外最重要的是它的待遇在那时的我看起来相当不错：是我心心念念的双休和不加班。

找到工作之后紧接着就需要找一个居住的地方，这是我第一次租房子自己一个人生活，脱离父母一个人在外，经过一番纠结最终在生活质量和经济质量中选择了妥协经济，就这样我的新生活开始了。

都说在一年的年度总结里需要展望一下未来，但是实际上这篇文章最后完工的时候已经到22年的7月份了，是的你没有听错，我在22年已经过了一半多的时候才写完了对21年的回顾，要问我对22年有什么展望，不如说是问我对于22下半年有什么计划，我希望我能更加的深入 JS 深入前端这个领域，多去了解自己感兴趣的事物，有空的话能在下半年的时候带着女朋友出去走走，去看看这个缤纷多彩的世界，同时也希望在写22年年度总结的时候不要再拖那么久：）

2021 年度总结 - 长风破浪会有时 直挂云帆济沧海

最近在写基于 React 和 Antd 的后台管理系统，用在我的博客管理上，在参考其他开源项目的时候有一个功能我很感兴趣，就是在管理后台中加入一个像浏览器的 Tabs 功能，让它能实现标签页的快速切换，虽然现在的管理系统的页面总数不多其实没有什么快速切换的需求 = =

刚看到这个问题的时候，我的第一反应是有没有一个 API 可以记录并获取路由栈中的所有路由，再将其给渲染出来，就解决了标签页的显示问题，但是我找了一下似乎并没有这样的 API，所以这篇文章会用 Context + useEffect 监听路由的方式来实现标签页的显示。

## 大致的思路

外层用 Context 包裹，在 Context 内部用 useEffect 监听路由是否发生变化，如果发生了变化就在 Tabs 列表中加入变化的路由属性，因为要实现显示Tab名称、Tab 跳转和保存路由的查询参数，所以记录的时候这些信息要一起保存起来。

其实这个功能也可以不用 Context 实现，在 Tabs 组件内部只使用 useEffect 也能实现相同的功能，但是我考虑到将来管理后台中或许会有别的页面也会需要用到类似的功能，就把它抽离出来方便复用。

## Tabs 添加路由

有思路之后实现起来就很容易了，首先要写一个 Context ，这个很简单在这里直接跳过，然后实现一个路由的监听记录函数，这里用 useEffect 来做，具体的代码逻辑可以看函数的注释

```javascript
// react-router 的 useLocation Hook
const { pathname, search } = useLocation();
// useEffect 监听路由是否发生变化
useEffect(() => addTabItem(pathname, search), [pathname, search]);

// 记录路由的 State，Tab列表
const [tabList, setTabList] = useState(
	[{ name: "Dashboard", path: "/", search: "" }]
);

// 路由添加函数
const addTabItem = (path, search) => {
	// 判断路由是不是已经存在于 State 中，不存在就添加到 Tab 列表中
	if (tabList.findIndex((item) => item.path === path) === -1) {
		// 这里主要是为了保存 Tab 对应的路由名称，flattenArray 是数组扁平化函数
		// 由于我的路由是用 useRoutes 实现的约定式路由，路由的名称也记录在里边
		// 所以这里需要将其扁平化和找到对应的路由名称
		// 文章后边会有这个扁平化函数的代码
		const flattenList = flattenArray(routerConfig);
		const routerIndex = flattenList.findIndex((item) => {
			item.path === path
		});

		// 最后将其一起保存在 Tab 列表中
		if (routerIndex !== -1) {
			setTabList([
				...tabList,
				{ path, name: flattenList[routerIndex].name, search },
			]);
		}
	}

	// 存在就切换路由，后面会写到
	switchTab(path, search);
};
```

以上的逻辑就是最核心的部分，通过监听路由变化，我们得到了一个 Tabs 列表，后续只需要渲染出它那么 Tabs 显示的问题就解决了

## Tabs 切换路由和关闭路由

解决了 Tab 添加的问题，接下来要解决的就是 Tab 的切换和关闭，总不能只能开不能关吧，切换和关闭的代码逻辑很简单，代码量也很少，没有什么难点

对于 Tab 的切换，我们需要一个新的状态来保存当前被选中的 Tab，这里叫作 activeTab

```javascript
// 用于保存当前选中 Tabs 的状态
const [activeTab, setActiveTab] = useState("");

const switchTab = (path, search = "") => {
	// 切换选中的 Tabs
	setActiveTab(path);
	// 跳转路由
	navigate(path + search);
};
```

而对于 Tab 的关闭，就没什么好说的了，非常简单的查找然后删除，这里有一个特殊的处理，就是判断关闭的 Tab 是不是当前选中的 Tab，对于关闭当前选中 Tab 的操作，这里会把当前选中的 Tab 向前移动，保证页面上不会出现关闭了 Tab 但是页面还停留在原地的问题

```javascript
const closeTab = (path) => {
	const index = tabList.findIndex((item) => item.path === path);
	if (index === -1 || path === "/") return;

	const newTabList = [...tabList];
	newTabList.splice(index, 1);

	// 判断是否关闭当前选中的 Tab
	if (path === activeTab) switchTab(newTabList[index - 1].path);

	setTabList(newTabList);
};
```

## 上边的数组扁平化函数

```javascript
export const flattenArray = (data, key = "children") => {
  const flatRouter: any[] = [];
  const flattenRecursion = (data: any) => {
    data.forEach((item: any) => {
      if (item[key]) flattenRecursion(item[key]);
      flatRouter.push(item);
    });
  };
  flattenRecursion(data);
  return flatRouter;
};
```

## End

至此，整个 Tabs 功能的基本逻辑就已经实现了，完整的代码可以看[这里](https://github.com/YuJian920/YuJian-Blog/blob/Remake/YuJianBlog-Admin/src/context/TabContext.tsx)，其实完整的 Tabs 功能还没有结束，例如还有对 Tabs 长度的限制，避免打开的 Tab 太多导致长度过长，还有完备的 Tabs 应该有一个右键菜单，可以实现关闭其他、关闭所有之类更多的功能，这里就不展开谈了，如果有时间的话后边会再写一篇文章补全上述提到的这些功能


使用 Context + useEffect 实现管理后台中的 Tab 功能

最近在学习 React + TypeScript 仿 Jira 项目，不得不说这个课程是真的好，可能因为比较新的缘故，老师在一些库的选择上都会比较新，最最让我惊喜的是这门课程还用到了ReactRoute6，正好苦于网上没有清晰明了的教程，这不就来了。

在课程里面，有一个自定义 Hook 的小示例，就是用 React Hook 实现 Debounce 的功能，Debounce 的功能要求很简单，就是通过一些手段控制接口的请求次数，用定时器实现的Debounce 就是一个很典型的例子，课程里边的 Debounce Hook 也是使用定时器的方式实现，不过在编写这个自定义 Hook 的时候，用到了 React 自带的 useEffetc 这个 Hook，这不免让我有些好奇，这个Hook是怎么个原理，能够做些简单的逻辑就实现 Debounce 的呢？
首先先来捋清 useEffetc 这个 Hook 的参数和含义，useEffetc 第一个参数接收一个回调函数，第二个参数是一个数组，在数组中传入的值会作为函数的执行条件，什么意思呢，就是说第二个参数的值会在下一次 useEffect 执行的时候被比较，如果每个值都相同，那么 useEffect 就不执行，如果值发生了变化，useEffetc 就会被执行，这个数组还可以是一个空数组，表示 useEffect 只在函数组件初始化的时候执行。

接下来就是有意思的地方了，还记得前面说到的第一个参数回调函数吗？这个回调函数可以 return 一个函数，这个被 return 的函数，会在下一次 useEffect 被执行之前执行，用于清除上一个函数的副作用，至于什么是副作用，这个其实是函数式编程专有的名词，在这里不展开讲，以后写个新的文章讨论什么是函数式编程，到这里，就已经把 useEffect 的基本功能给说清楚了 ，这个时候可以回过头来看，useEffect 的执行时机是什么时候，默认情况下，useEffect 会在每轮的渲染结束之后执行，并且 React 为了保证严格的 render -> useEffect 顺序，所以在下一次 render 执行之前一定会执行一次 useEffect，那么我在 useEffect 的第一个参数回调函数中放一个定时器，并在 return 中返回一个清除定时器的函数，那么我不就可以在每一次 render 执行之后 useEffect 执行之前清除上一次在 useEffect 中存放的定时器了吗？这里为了保证每一次都会有 render 触发 useEffect，还需要用到 useState，这样不就是很典型的 Debounce 实现思路吗？

具体代码如下图

![useEffect和Debounce](https://yujian-bolg-1308518379.cos.ap-guangzhou.myqcloud.com/useEffect和Debounce.png)


useEffect 和 Debounce

在一些需要连续更新状态的场景下，useReducer 会比 useState 更加的合适

```javascript
const [state, dispatch] = useReducer(reducer, initialArg, init);
```

React 官网的 useReducer

```javascript
const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}
```

最简的 useReducer 实践

```javascript
const [state, dispatch] = useReducer((state, action) => (
	{ ...state, action }),
	initState
)
```

在这个最简单的事件中，useReducer 就充当了 useState 的替代，dispatch 修改状态，返回最新的 state


简单的 React 思考: useReducer

useCallback 和 useMemo 都是 React 里边比较简单的 Hook，先看看官网对于这两个 Hook 的介绍。

```javascript
// useCallback
const memoizedCallback = useCallback(
  () => { doSomething(a, b) },
  [a, b]
);

// useMemo
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
```

useCallback 会返回一个 memoized 函数，而 useMemo 会返回一个 memoized 值
他们的第二个参数接受一个依赖项数组，回调函数只会在依赖项发生改变的时候才会更新，它的比较算法和 Object.is 的一致，即引用对比。
他们都是作为性能优化的一个方法提供，他们的不同之处在于，useCallback 返回一个函数，而useMemo 会返回一个值，这个值由传入 useMemo 的回调函数在渲染期间执行。

上 React 源码，结合[简单的 React 思考 - Fiber 创建](https://yujian.icu/Article/3)一起看

![useCallback](https://yujian-bolg-1308518379.cos.ap-guangzhou.myqcloud.com/useCallback.png)

useCallback 在 mount 和 update 阶段都会对 deps 也就是依赖项做简单的 underfined 判断，在 update 的时候会用 areHookInputsEqual 对依赖项做对比，如果依赖项没有变就返回 memorizedState 中存储的回调函数

![useMemo](https://yujian-bolg-1308518379.cos.ap-guangzhou.myqcloud.com/useMemo.png)

和 useCallback 相同，useMemo 也会在 mount 和 update 的时候对 deps 依赖项参数做简单的underfined 判断，但是与 useCallback 在 mounte 阶段直接将 函数和 deps 一起存入 memoizedState 不同，useMemo 会执行传入的回调函数，并将函数的返回值和 deps 一起存入memoizedState，在 update 阶段的处理和 useCallback 几乎是一样的。


简单的 React 思考: useCallback / useMemo

首先先来看一段代码

![Fiber](https://yujian-bolg-1308518379.cos.ap-guangzhou.myqcloud.com/Fiber创建.png)

这是 React 中创建 memorizedState 链表的过程，注意其中 if 代码块中，赋值都使用到了两个等于号，因为这个函数的作用是在 Fiber 链表中创建一个新的 memorizedState 对象，那么这个函数的最终目的也是需要把创建好的 memorizedState 给返回出来，这里的两个连续等于号就相当于一直引用最新 Fiber 节点的 memorizedState 对象，最终给返回出来，看懂的时候感觉是真的牛逼

简单的源码解析：

1. 创建一个 hook 对象，这个创建的 hook 对象最终需要插入到 Fiber 节点中，用 next 连接起来形成一个链表，链接的下一个节点就是下一个被使用的 hook
2. 判断 workInProgressHook 是否为空，这个 workInProgressHook 永远指向最新的 Fiber 节点中的 memorizedState
   - 如果为空表示当前是 Fiber 的第一个 hook，那么就会在当前 Fiber 中初始化 memorizedState 属性并传入创建的 hook 对象用于初始化，并返回最新的 Fiber memorizedState 对象的引用
   - 如果不为空，表示之前已经初始化过 hook，会在最新的 Fiber 中创建新的链接 next，并传入创建的 hook 对象用于初始化，返回最新的 Fiber memorizedState 对象的引用


简单的 React 思考: Fiber 创建

```javascript
const MyContext = React.createContext(defaultValue)
```

createContext 会创建一个 Context 对象，每个 Context 对象都会返回一个 Provieder 组件，它的子组件会订阅 Context 的变化

```javascript
<MyContext.Provider value={value} />
```

订阅了 Context 的组件会在组件树中查找离自己最近的 Provider 中读取到 Context 值也就是 Provider 中的 value 属性，只有在找不到 Provider 时，createContext 中的 defaultValue 参数才会生效，但是将 underfined 传递给 Provider 的时候，defaultValue 并不会生效。
多个 Provider 可以嵌套使用，里层的会覆盖外层的数据。
当 Provider 中的 value 值发生变化时，它内部的所有消费组件也就是子组件都会重新渲染，这个用于判断值是否发生变化的方法和 Object.is 使用了同样的算法， 也就是说如果 value 是一个引用类型，可能会导致一些意外的问题。

### Class.contextType / Context.Consumer

在 Hook 之前，在 React 组件中使用和消费 Context 的值可以使用 contextType 和 Consumer。

```javascript
class MyClass extends React.Component {
	render() {
		const value = this.context;
	}
};

MyClass.contextType = MyContext;
```

contextType 属性可以让类组件使用 this.context 来获取**最近**的 Context 上的值，并且可以在任何生命周期中访问到它

```javascript
<MyContext.Consumer>
	{ value => /* 基于 context 值进行渲染*/ }
</MyContext.Consumer>
```

Consumer 是函数式组件订阅 Context 的方法。

### Hook

之前说了，contextType 和 Consumer 都是在 Hook 出现之前订阅和消费 Context 的方法，那么在 Hook 出现之后，函数式组件自然也有了 Hook 的方法用于消费 Context

```javascript
const value = useContext(MyContext);
```

useContext 接受一个 Context 对象，并返回该 Context 的当前值，和 contextType 中相同，Context 上的值由最近的 Provider 决定，当组件最上层的 Provider 更新时，该 Hook 会触发重新渲染，并使用最新传递的 value，且无视上层父组件使用了 React.memo，也就是说使用了 useContext 的组件总会在 context 值变化的时候重新渲染。
如果重新渲染组件的开销较大，可以将组件放在 useMemo 中来优化

```javascript
return useMemo(() => {
	const appContextValue = useContext(AppContext);
	return <ExpensiveTree className={appContextValue.theme} />;
}, [theme])
```

useContext Hook 相当于 class 组件中 Class.contextType / Context.Consumer，但是对于函数式组件，提供了更加优雅的 Context 使用方案，但是只是提供了 Context 的读取和订阅，你仍然需要在上层组件树中使用 Context.Provider


简单的 React 思考: Context

在组件间传值是一个老生常谈的问题，对于大型且复杂的项目来说，有许多优秀的状态管理库例如： Redux、Mobx之类的工具帮助统一的管理和分发状态，但是在小型的个人项目当中，引入复杂的状态管理不但不会提高项目的开发效率还可能会提高开发者的心智负担，如果只是需要简单的在兄弟组件层级中传递参数，React 也提供了 Context 这样的方案用于组件共享值，在这里是对常见的状态管理工具做一个简单的思考

## 1. Redux

Redux 是我在写 React 应用的时候状态管理的首选方案，只是因为我比较熟悉，Redux 可以应用但不限于在 React 框架甚至还可以运用在 Vue 和 VanillaJS 当中，Redux 的再封装库非常多，React-Redux、Redux-Toolkit、Dva等

## 2.Context

Context 是 React 官方提供的组件间传值共享值的解决方案，对于一些小心应用，Context 就已经足够满足状态传递的需求，但是这也会导致一些问题，比如说组件的复用性变差，React 官网中也有写到：如果你只是想避免使用状态提示的过程中出现的值层层传递的问题，可能控制反转的组件组合会相较于 Context 更加适合，什么是组件组合？就是说原先在组件间层层传递的参数，变为传递一个组件自身，这种对组件的控制反转减少了需要传递的 props 数量，关于 Context 的更深入的思考可以看这里 [[简单的 React 思考 - Context]]

## 3. React Query / Swr

这两个工具实际上相较于前两个有较大的不同，Redux 和 Context 可以同时管理用户交互的中间状态，但是对于这两个工具而言，主要是负责服务端状态的管理，或许也可以将其称作为管理缓存。

简单的 React 思考: 状态管理工具

##  写在前面

**阅读Vue的源码对深入学习Vue框架是非常有必要的，只知道它表面的用法，而不知道它内部的原理那就说不上是真正熟悉掌握了这一门框架，常常出了问题一头雾水**

**Vue的\$emit、\$on和 Node.js 的 EventEmitter 的使用方法非常类似。**

## 正式开始

### \$on绑定事件

> Vue中的\$on是一种将函数与事件绑定的方法。

通过Vue的源代码可以看到，\$on 调用时需要两个参数，第一个是字符串或数组类型作为事件的名称，第二个是触发事件执行的回调函数。\$on 第一步会对第一个参数做一个是否为数组的判断，这里可以看出 \$on 允许为多个事件绑定同一个回调函数。

如果参数为数组，那么它会使用for遍历这个数组，并进行递归。
如果参数为字符串，那么它会在已有的事件(\_events)中寻找是否已经存在相同的事件，如果没有会创建并初始化为空数组同时将传递的第二个参数也就是事件被触发时需要执行的回调函数添加进去。

![](https://yujian-bolg-1308518379.cos.ap-guangzhou.myqcloud.com/%E9%80%9A%E8%BF%87%E6%BA%90%E4%BB%A3%E7%A0%81%E8%A7%A3%E6%9E%90Vue%E4%B8%AD%E7%9A%84%24on%E3%80%81%24emit%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%2F%24on%E6%96%B9%E6%B3%95.webp)

> 总结：$on方法允许为多个事件绑定同一个回调函数，还在里面使用了递归~~自己日自己~~



### $emit 触发事件

> Vue中的$emit是一种触发事件的方法。

它接受的第一个参数是一个字符串类型，这个字符串参数也就是需要触发的事件名称，第二个参数是触发事件时需要传递的数据。

第一步\$emit会将传递的事件名称转换成小写，并进行一系列的检查判断是否符合语法标准，然后它会在事件列表(\_events)中寻找事件对应的回调函数，也就是在\$on中传递并添加的回调函数，这里如果没有找到会直接返回，找到了会先进行一次判断，判断回调函数是否大于1，如果大于就把它转换成一个数组。

这时候第一个参数事件名已经不再需要了，\$emit会将其舍弃，并把剩下的数据转换成数组。传递给一个带有 try&catch 的 invokeWithErrorHandling() 方法，并在其中使用apply() 或 call() 来调用事件回调函数。

![](https://yujian-bolg-1308518379.cos.ap-guangzhou.myqcloud.com/%E9%80%9A%E8%BF%87%E6%BA%90%E4%BB%A3%E7%A0%81%E8%A7%A3%E6%9E%90Vue%E4%B8%AD%E7%9A%84%24on%E3%80%81%24emit%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%2F%E8%B0%83%E7%94%A8invokeWithErrorHandling%E6%96%B9%E6%B3%95.webp)

**invokeWithErrorHandling()方法源代码**

![](https://yujian-bolg-1308518379.cos.ap-guangzhou.myqcloud.com/%E9%80%9A%E8%BF%87%E6%BA%90%E4%BB%A3%E7%A0%81%E8%A7%A3%E6%9E%90Vue%E4%B8%AD%E7%9A%84%24on%E3%80%81%24emit%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%2FinvokeWithErrorHandling%E6%96%B9%E6%B3%95.webp)

>总结：用$emit方法触发事件允许一个事件有多个回调函数，它们会变成数组被遍历，同时也允许携带参数，它使用了apply()或call()更改作用域来保证参数有效

**( 注意：看源代码可以发现如果回调函数中有返回，invokeWithErrorHandling()方法是能拿到并会返回res，但是$emit中没有对这个返回的res进行赋值。)**

## 最后

别看了，这里我实在不知道写什么好了

通过源代码解析 Vue 中的 $on、$emit 实现原理

## 写在前面

>最近在深入学习Vue框架，想试着模仿[echo回声](https://www.app-echo.com/ "echo回声")的移动端网页写一个网页出来，参考了 uncleLian 大佬的[vue2-echo](https://github.com/uncleLian/vue2-echo "uncleLian/vue2-echo")的一些实现。在这之中遇到了一个问题：uncleLian大佬使用Mint UI组件库来实现页面的下拉加载更多功能，但是我的项目并没有使用Mint UI，所以自然这个功能我就没法直接使用，没有就没有吧，大不了自己动手写，于是就有了这么一篇文章。

## 实现思路

实现的思路很简单，就是判断 滚动高度 + 可视高度 是否大于文档高度

```javascript
const { pageYOffset, innerHeight } = window
pageYOffset + innerHeight >= document.documentElement.scrollHeight
```

如果判断结果为真，就向后端请求更多数据，再使用push方法添加新请求返回的数据

## 实现过程

实现每次下拉都返回不同的数据，就要对内容进行分页，根据页数返回不同的数据，但是这个项目并没有后端，后端返回的数据用的是 Mock.js 模拟，那么问题来了 Mock.mock 在拦截 GET 请求的时候是无法拦截到 url 后面带的参数的，这样一来就没法在 Mock.js 对传入的参数进行判断，这时候有两种解决思路，一种是数据分6页就写6个 Mock.mock 分别拦截不同的页数，使用这种方法的代码会很冗余，还有一种是 uncleLian 大佬的实现方法：使用 for 循环一次生成 6个 Mock.mock 拦截不同的页数

```javascript
for (let Page = 1; Page <= 6; Page++) {
  let params = {
    'data': []
  }
  Mock.mock(`${baseURL}/list?Page=${Page}`, function () {
    return params
  })
}
```

这样一来就实现了 Mock.js 对 GET 请求分页参数的模拟，光是这样还不行，需要对mock模拟的数据进行拆分，根据页数的不同返回的内容也不同，这里用到了array.prototype.slice() 方法对数据进行拆分

```javascript
for (let Page = 1; Page <= 6; Page++) {
  let params = {
    'data': []
  }
  Mock.mock(`${baseURL}/list?Page=${Page}`, function () {
    params.data = listJson.slice((Page - 1) * 6, Page * 6)
    return params
  })
}
```

获取到了返回的分页数据，下一步就是要把数据给渲染出来，这里直接使用 push(params) 添加数据是不行的，因为params是一个数组，这里需要用到JS的展开运算

```javascript
this.MusicListJson.push(...params);
```

这样就完成了请求数据的添加操作

## 最后

解决了实际代码编写时可能遇到的一些难点，剩下的就是添加页数控制，事件触发之类的操作，这样无插件实现JS下拉加载的功能就完成了。

纯JS实现下拉加载

## 写在前面

>网上关于使用WordPress搭建个人网站的教程有很多，我的水平也没有那些真正的dalao高，写这一篇主要是为了帮还不会建站的朋友们入门门槛低一些，顺带复习一下语文，你可以问我问题，但没准你知道的比我还多

## 正文部分
### 第一步，注册一个域名
国内比较出名的有万网，腾讯云。国外比较出名的有GoDaddy，选好合适的然后付钱就可以了( • ̀ω•́ )✧

### 第二步，购买一台云服务器
**这一步要注意，国内主机用于网站搭建需要备案**
国内可以选择阿里云，腾讯云之类的比较出名的服务商
国外的涉及部分原因不予说明，请自行百度(￣ ￣)／

腾讯云有学生优惠套餐，最低只需要10元一个月，但只有国内主机可选

阿里云学生认证之后也有学生优惠套餐，9.5一个月，年费还送.xin域名，只有国内主机可选

### 第三步，安装必要环境和WordPress
###### * 以下步骤全部都在CentOS下完成,并在CentOS6.8下测试通过


#### 搭建LAMP环境
>LAMP是Linux，Apache，MySQL，PHP的缩写，是WordPress博客系统的基础运行环境

###### 安装Apache
```shell
yum install httpd -y
```

![](https://yujian-bolg-1308518379.cos.ap-guangzhou.myqcloud.com/%E9%9B%B6%E5%9F%BA%E7%A1%80%E6%95%99%E4%BD%A0%E7%94%A8WordPress%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E7%BD%91%E7%AB%99%2F1.webp)

###### 安装完后启动Apache服务
```shell
service httpd start
```

###### 将Apache设置为开机自启动
```shell
chkconfig httpd on
```


#### 安装MySQL
```shell
yum install mysql-server -y
```

![](https://yujian-bolg-1308518379.cos.ap-guangzhou.myqcloud.com/%E9%9B%B6%E5%9F%BA%E7%A1%80%E6%95%99%E4%BD%A0%E7%94%A8WordPress%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E7%BD%91%E7%AB%99%2F2.webp)

###### 安装完成后启动MySQL服务
```shell
service mysqld restart
```

###### 将MySQL设置为开机自启动
```shell
chkconfig mysqld on
```

###### 设置 MySQL 账户 root 密码
```shell
/usr/bin/mysqladmin -u root password '输入密码'
```

###### 进入MySQL
```shell
mysql -uroot --password='你设置的密码'
```

###### 为 WordPress 创建一个名为WordPress的数据库
```shell
CREATE DATABASE wordpress;
```

###### 成功后退出
```shell
exit
```

#### 安装PHP和PHPMySQL(分两行输入)
#### *由于部分服务商的CentOS6可能自带php-mysql，所以可能会提示已经安装.不用理会就好了
```shell
yum install php -y
yum install php-mysql -y
```


###### 在/var/www/html目录下新建一个hellowrold.php文件来检查Apache是否支持php，输入
```php
<?php phpinfo(); ?>
```

###### 重启Apache服务
```shell
service httpd restart
```

###### 浏览器输入
http://外网IP/hellowrold.php
![](https://yujian-bolg-1308518379.cos.ap-guangzhou.myqcloud.com/%E9%9B%B6%E5%9F%BA%E7%A1%80%E6%95%99%E4%BD%A0%E7%94%A8WordPress%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E7%BD%91%E7%AB%99%2F4.webp)
###### 应该就可以看到刚刚新建的PHP页面了



#### 安装WordPress博客系统

###### 下载最新版WordPress中文版
```shell
wget -c https://cn.wordpress.org/wordpress-4.9.1-zh_CN.tar.gz
```

###### 解压WordPress
```shell
tar -xzvf wordpress-4.9.1-zh_CN.tar.gz
```

###### 移动WordPress
```shell
mv wordpress /var/www/html/
```

*如果在后面的五分钟配置环节提示需要手动写入wp-config.php文件，则输入以下指令更改权限
```shell
chown -hR www-data /var/www/html/wordpress
```
如果还是不行，需要手动修改wp-config-sample.php

###### 接着浏览器输入
http://外网IP/wordpress
###### 应该就能看到WordPress五分钟配置页面了
![](https://yujian-bolg-1308518379.cos.ap-guangzhou.myqcloud.com/%E9%9B%B6%E5%9F%BA%E7%A1%80%E6%95%99%E4%BD%A0%E7%94%A8WordPress%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E7%BD%91%E7%AB%99%2F5.webp)

### 第四步，绑定域名解析
域名解析这一步比较简单，基本上跟着步骤就可以啦

##### 主机名
www 是指解析之后域名为www.域名这样的形式,例如www.yujian.icu
@ 是指解析之后域名直接显示为 域名这样的形式，例如yujian.com
\*是将所有的次级域名均指向同一IP地址
##### 记录类型
A记录  用来指定域名的IPv4地址，如需要指向一个IP地址，则需要增加A记录
CNAME记录  如果将域名指向一个域名，实现与被指向域名相同的访问效果，则需要增加CNAME记录

##### 记录值
填你的服务器的IPv4地址

#### TTL
因为DNS是有缓存的，所以TTL就是表示DNS记录在DNS服务器上的缓存时间
一般保持默认就好啦

*尝试Ping你的域名，看看域名指向是否正确，DNS解析需要时间，添加完域名时间后需要等待一段时间

### 接下来就是花费时间把自己的网站建设的美观一点啦ヾ(。￣□￣)ツ

### 一些WordPress主题推荐
我用的MD主题MDx：[传送门](https://flyhigher.top/develop/788.html)
###### 最后，感谢Axton

### END

*以上内容大部分来自互联网ㄟ(▔ ,▔)ㄏ
*不来自的那就是我乱说的ㄟ(▔ ,▔)ㄏ



青梅枯萎，竹马老去，从此我爱的人都像你
晚安

零基础教你用 WordPress 搭建个人网站