周报@2023-09-02

React 相关问题的总结

同构是指一种在服务器端和客户端使用相同的代码基础的编程模式。在此模式下，应用程序的首个页面渲染是在服务器上完成的，后续的页面交互则由客户端负责。同构的主要优点在于其提高了首屏加载速度，同时还有助于搜索引擎优化（SEO）。

同构架构能实现代码重用，降低维护成本，并提供更统一的用户体验。它允许服务器生成与客户端应用相同或相似的用户界面，从而实现无缝的交互。换句话说，同一份代码可以用于服务器渲染 (SSR) 和客户端渲染 (CSR)。

代码层面的例子：可能存在 useIsomorphicLayoutEffect 这样的例子，部分代码(useLayoutEffect)不能在服务端运行需要使用 useEffect 替换，到客户端缓存真正的方法。

1. 代码复用: 同一份代码可以在服务器和浏览器中运行，降低了维护成本。
2. 更快的首屏渲染: 服务器可以预先生成页面的初始状态，提供更快的页面加载速度。
3. 优化SEO: 由于内容是在服务器端生成的，搜索引擎更容易抓取和解析网站内容。

1. 服务器端渲染（SSR）: 当用户首次请求一个页面时，服务器会运行JavaScript代码并生成初始页面内容。
2. 客户端渲染（CSR）: 一旦页面被加载和执行，客户端接管页面的交互逻辑。此后的所有操作都由客户端负责。

1. 内容网站: 对于需要SEO优化的网站，同构可以显著提高搜索排名。
2. 交互复杂的应用: 对于需要快速响应用户操作的应用，客户端渲染能提供更流畅的用户体验。
3. 资源受限环境: 在网络不稳定或设备计算能力有限的场合，服务器预渲染能提供更稳定的性能。

"Hydrate" 是前端开发中的一个概念，通常用于描述客户端激活（或填充）服务器端渲染（SSR）的 HTML 的过程。简而言之，这是一个从服务器渲染的静态 HTML 到客户端动态交互的过渡过程。

Hydration 是一个过程，其中一个由服务器渲染的静态 HTML 页面在客户端被转化为一个动态的、可交互的应用。在这个过程中，React 会为服务器渲染的静态内容 "附加" 事件监听器，使其变得可交互，但不重新渲染 DOM。

为什么需要它?:既然我们已经从服务器得到了渲染好的 HTML，重新渲染整个页面会浪费性能并可能导致不必要的屏幕闪烁。Hydration 允许我们保持初始服务器渲染的 HTML 结构，只是使其变得动态和可交互。

如何使用: 在 React 中，你通常使用 ReactDOM.hydrate() 来实现此目的，而不是常见的 ReactDOM.render()。这告诉 React，该应用的部分已经在服务器上渲染，所以 React 只需附加事件监听器，而不是重新渲染整个应用。

在一个使用 React 的同构应用中，服务器端可能使用以下代码生成 HTML：

1const htmlString = ReactDOMServer.renderToString(<App />);

然后，客户端使用以下代码进行水合：

1ReactDOM.hydrate(<App />, document.getElementById('root'));

这里，ReactDOM.hydrate() 方法会接管服务器端生成的 HTML，并添加必要的事件监听器，使其成为一个完全交互式的应用。

综合来说，同构和水合是前端开发中用于提高性能和用户体验的关键概念，尤其是在使用现代的 JavaScript 框架和库（如 React、Vue 等）时。这两个概念通常是相辅相成的，目的是在保证性能和SEO的同时，提供丰富的用户交互。

1. 服务器端渲染（SSR）: 在服务器端，应用的初始状态和界面被渲染为静态HTML。
2. 客户端接管: 该静态HTML被发送到客户端。随后，JavaScript在客户端加载并运行。
3. Hydration过程: 在这一步，客户端的JavaScript代码不会重新渲染整个DOM，而是会“识别”已经存在的DOM元素，并将其与React（或其他框架）的状态绑定起来，使其变得可交互。

1. 性能提升: 由于不需要重新生成整个DOM，因此可以更快地实现客户端交互。
2. 用户体验: 用户看到的首屏内容是由服务器生成的，这样能够更快地展示内容，提升用户体验。
3. SEO优化: 服务器端渲染的内容能被搜索引擎更容易地抓取和索引。

1. 状态一致性: 在Hydration过程中，客户端的初始状态必须与服务器端渲染的HTML匹配，否则会导致错误或不一致的行为。
2. 资源消耗: 虽然Hydration提高了性能，但它也需要额外的客户端计算，这在低端设备上可能是一个问题。

总体而言，Hydration是同构应用中的一个关键步骤，它使得服务器端渲染的应用能够在客户端快速变得可交互，同时维持应用性能和用户体验。然而，开发者需要确保服务器和客户端状态的一致性，以避免潜在问题。

详见react hooks 实现原理

首先，React 使用一个称为“fiber”的结构来表示组件树中的一个单元。每个 fiber 都有一个与之关联的 hooks 链表。React 使用全局变量来保存当前正在工作的 fiber 和当前正在工作的 hook。

基本结构：

1let currentFiber = null;    // 当前的 fiber
2let workInProgressHook = null;   // 当前正在处理的 hook

当我们在组件中调用一个 hook，例如 useState，它实际上是在 currentFiber 上的 hooks 链表中查找或创建新的 hook。

useState 的简化版：

1function useState(initialValue) {
2    let hook;
3
4    // 判断当前 fiber 是否有 hook
5    if (currentFiber.alternate && currentFiber.alternate.hooks) {
6        hook = workInProgressHook = currentFiber.alternate.hooks;
7    } else {
8        hook = {
9            state: initialValue,
10            queue: [],
11            next: null
12        };
13        if (!currentFiber.alternate) {
14            // 为 fiber 创建一个 hook
15            currentFiber.alternate = {
16                hooks: hook
17            };
18        }
19
20        if (workInProgressHook) {
21            // 如果有正在工作的 hook，将新 hook 追加到链表的末尾
22            workInProgressHook = workInProgressHook.next = hook;
23        } else {
24            // 初始化第一个 hook
25            currentFiber.hooks = workInProgressHook = hook;
26        }
27    }
28
29    // ... (处理 hook 的 queue)
30
31    return [hook.state, action => {
32        hook.queue.push(action);
33        // ... (触发组件更新)
34    }];
35}

当你多次在一个组件中调用 useState，上述代码通过 workInProgressHook 链接每个 hook，确保它们的顺序和状态在重新渲染时保持不变。

useEffect 的简化版：

1function useEffect(callback, dependencies) {
2    const oldHook = workInProgressHook 
3        && currentFiber.alternate 
4        && currentFiber.alternate.hooks;
5
6    let hook = {
7        callback,
8        dependencies,
9        next: null
10    };
11
12    if (oldHook) {
13        // ... (与 useState 类似地进行 hook 重用和链接)
14    } else {
15        // ... (初始化和链接 hook)
16    }
17
18    // ... (比较 dependencies 判断是否运行回调)
19}

当组件渲染完成后，React 会检查注册的 useEffect 回调，并在适当的时机执行它。

要注意的是，这些代码是简化的，并没有考虑到 React 中的许多优化和特性，例如批处理、并发或中断的更新等。但它提供了一个高层次的视图，解释了 React 如何使用 hook 链表来维持状态和副作用。

要深入了解 Hooks 的实现，最好的方式是直接阅读 React 的源码。但希望这个简化的描述能帮助你理解其背后的基本思想和机制。

Fiber 的主要目标之一是使 React 支持中断式渲染，这是通过引入时间切片来实现的。时间切片允许 React 在多个帧之间分割渲染工作，从而不会阻塞主线程太长时间。

1. Fiber 数据结构：在 React 中，每个组件都有一个与之对应的 Fiber。每个 Fiber 是一个工作单位，存储了组件的状态、类型、子组件等信息。这是时间切片的基础，因为每个 Fiber 都可以被单独处理。
2. Work Loop：React 有一个循环，称为工作循环，它不断地检查并执行工作。它会尝试完成尽可能多的工作，但如果当前帧的时间快要用完，它会中断工作并在下一帧继续。
3. requestIdleCallback：React 利用 requestIdleCallback（或其自定义的回退实现）来决定何时开始下一个工作单元。它会在浏览器的主线程空闲时被调用，从而允许 React 在主线程空闲时进行渲染。
4. 任务的优先级：不是所有任务都是平等的。一些更新（例如由于用户交互导致的更新）具有比其他更新更高的优先级。React 根据更新的类型为其分配优先级，确保高优先级的任务先被处理。
5. 中断与恢复：由于每个 Fiber 是一个单独的工作单元，所以在处理一个 Fiber 后，React 可以决定是继续处理下一个 Fiber 还是中断。如果当前帧的时间不够，或有更高优先级的任务在队列中，React 可以中断当前的工作并稍后恢复。

当一个新的渲染或更新任务被触发时，React 将其加入工作队列。工作循环开始执行，首先检查当前的优先级和剩余时间。

React 开始处理最高优先级的工作，通常从根 Fiber 开始，然后深度优先地遍历子 Fiber。对于每个 Fiber，React 检查是否有状态更改或新的渲染工作要做。

如果当前帧的时间用完，或有更高优先级的任务进入队列，React 会中断当前的工作并标记它为未完成。在下一个帧或当有空闲时间时，React 会从上次中断的地方继续。

一旦所有工作都完成，React 进入提交阶段，将计算的变化应用到实际的 DOM 上。

这种切片和调度的方式确保了即使有大量的渲染任务，用户界面也仍然响应迅速。

尽管 requestIdleCallback 是理想的 API，但不是所有浏览器都支持它，而且在某些情况下其表现可能并不稳定。因此，React 实现了自己的任务调度器。

React 的调度器的目标是确保高优先级任务被快速处理，同时为低优先级任务找到一个合适的时间窗口。例如，动画或输入应该立即响应，而隐藏屏幕上的组件的更新可以推迟。

Fiber 既是一种数据结构也是一种算法。在数据结构上，每个 Fiber 节点代表一个组件实例的工作单位，并包含关于该组件的信息。

Fiber 节点有以下关键字段：

• type: 组件的类型（例如，div、span或任何自定义组件）。
• key: 一个用于跟踪节点的字符串。
• child: 第一个子 Fiber。
• sibling: 下一个兄弟 Fiber。
• return: 父 Fiber。
• alternate: 表示该 Fiber 在当前树和工作中树之间的替代版本。

通过这些字段，React 可以形成一个 Fiber 树，它与组件树相对应。

React 的渲染和更新工作被分成两个主要阶段：

• Reconciliation: 在这个阶段，React 会遍历 Fiber 树来确定哪些部分需要更改。这个过程可以被中断。
• Commit: 一旦确定了所有更改，React 将在这个阶段一次性将它们应用到 DOM 上。这个过程是连续的，不能被打断。

React 根据任务的类型和来源为其分配优先级。例如，由于用户交互产生的更新（如输入或点击事件）具有更高的优先级，因此它们将比由于网络请求产生的更新获得更快的处理。

Fiber 的一个独特之处在于其双缓冲技术。每个 Fiber 节点都有一个 alternate，用来在正在构建的树（工作中的树）和当前在屏幕上的树之间进行交替。

这意味着，当 React 在构建一个新的更新时，它不会立即影响到屏幕上的树。而是在构建一个完整的更新树后，一次性地交换这两棵树，使新树成为屏幕上的树。这确保了屏幕上的 UI 是一致的，避免了可能的不一致状态。

在时间切片内，如果多次 setState 调用发生在同一事件循环中，React 会尝试批量处理这些更新，以避免不必要的渲染和计算。这可以提高性能并确保一致性。

传统的递归确实是不能中断的。如果你尝试在深度优先遍历（DFS）的中间直接中断一个递归函数，你将无法在中断的地方继续执行。这正是为什么 React 在 Fiber 架构中对其进行了重大改变。

在 React 的早期版本中，它确实使用了递归来遍历组件树，但这种方法在大型应用中可能会导致长时间的阻塞，因为一旦开始，就无法中断遍历过程。

Fiber 的引入改变了这一点。React Fiber 为每个组件创建了一个 Fiber 数据结构（可以看作是一个表示组件工作的单元）。这种方法的关键在于，虽然 Fiber 使用了深度优先遍历的概念，但它不是递归实现的。相反，它使用了迭代和循环，这使得在任何给定的工作单元之后都可以中断和恢复。

React 通过维护自己的“堆栈”和使用循环来模拟深度优先遍历的行为。这样，React 在完成一个 Fiber 的工作后可以保存其位置，中断渲染过程，然后在必要时返回并从上次离开的地方继续。这是通过 Fiber 数据结构中的几个字段（例如 child，sibling 和 return）来实现的，这些字段帮助 React 知道下一步去哪里。

所以，虽然 Fiber 仍使用 DFS 的概念，但它已经摆脱了传统递归的限制，从而允许中断和恢复工作，这是实现时间切片功能的关键。

为了解释 React Fiber 的工作方式，我会为你提供一个非常简化的版本，用于模拟深度优先遍历（DFS）的行为，但不使用传统的递归，从而允许中断和恢复。请注意，这只是为了说明，并不代表 React 源代码的真实实现。

首先，定义一个简单的 Fiber 数据结构：

1function FiberNode(component, props) {
2  this.component = component;
3  this.props = props;
4  this.child = null;
5  this.sibling = null;
6  this.return = null;
7}

• child 是组件的首个子节点。
• sibling 是组件的下一个兄弟节点。
• return 是父组件。

接下来，定义一个简单的工作循环：

1let nextUnitOfWork = null; // 下一个工作单元
2
3function workLoop(deadline) {
4  while (nextUnitOfWork && deadline.timeRemaining() > 0) {
5    nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
6  }
7  requestIdleCallback(workLoop);
8}
9
10requestIdleCallback(workLoop);
11
12function performUnitOfWork(fiber) {
13  // 这里会执行组件的渲染或其他相关工作
14  console.log(`Working on ${fiber.component}`);
15
16  // 假设我们有一个函数来确定子节点
17  const children = createChildFibers(fiber);
18  
19  if (children.length > 0) {
20    fiber.child = children[0];
21    
22    // 为子 Fiber 设置 sibling 和 return 连接
23    let previousSibling = null;
24    children.forEach((child, index) => {
25      if (index > 0) {
26        previousSibling.sibling = child;
27      }
28      child.return = fiber;
29      previousSibling = child;
30    });
31
32    return fiber.child;
33  } else {
34    // 如果没有子节点，我们继续到 sibling，如果没有 sibling，我们返回到父节点。
35    let nextFiber = fiber;
36    while (nextFiber) {
37      if (nextFiber.sibling) {
38        return nextFiber.sibling;
39      }
40      nextFiber = nextFiber.return;
41    }
42  }
43  return null;
44}

上述代码中，我们使用 requestIdleCallback 来执行 workLoop，它会处理每个 Fiber 单元，直到达到帧的时间限制。一旦时间结束，我们就会退出循环，并在有空闲时间时继续工作。

performUnitOfWork 函数执行当前 Fiber 的工作，并返回下一个要处理的 Fiber。如果一个 Fiber 有子节点，我们首先处理子节点。如果没有子节点，我们转到兄弟节点，如果没有兄弟节点，我们返回到父节点。

这种方式确保了深度优先遍历，同时通过使用循环而不是递归，允许我们在任何时候中断和恢复渲染过程。

再次强调，这只是为了说明原理的简化模型，并不完全代表 React 的真实实现。实际的 React 源代码包含许多优化和额外的特性，但上述代码为你提供了一个基本的概念，帮助你理解 Fiber 如何工作。

链路追踪（Link Tracing）在 Node.js 应用中是用于监控和诊断应用性能、调试以及安全审计的一种关键技术。通常，链路追踪是通过在应用的每一层（包括接口请求、中间件、数据库调用等）插入唯一的标识符来实现的。

1. 追踪标识符: 首先，当一个请求进入系统时，一个唯一的追踪标识符（通常称为 Trace ID）会被生成或获取（如果请求中已经附带有）。
2. 传播机制: 该标识符会在整个链路调用中传播。每次系统内部进行服务调用时，这个标识符都会作为参数或者在 HTTP 头中传递。
3. 数据收集: 在链路中的各个节点，相关的信息（包括但不限于执行时间、状态等）会被记录下来，与 Trace ID 关联。
4. 存储和可视化: 收集到的数据通常会被存储在专门的追踪数据库中，并通过可视化工具进行分析。

tar 是一个常用于 Linux 和 UNIX 系统的工具，用于处理归档文件。归档文件是一个文件，其中包含了多个文件和目录（可能与其层次结构），通常用于备份和文件传输。

tar 命令的名称来源于 "tape archive"，尽管现在很少有人使用磁带进行备份，但这个命令仍然非常有用。

• -c：创建新的归档文件。
• -x：从归档文件中提取文件。
• -t：列出归档文件的内容。
• -f：用于指定归档文件的名称。
• -v：详细模式，显示操作过程。
• -z：使用 gzip 对归档进行压缩或解压。
• -j：使用 bzip2 对归档进行压缩或解压。
• -J：使用 xz 对归档进行压缩或解压。
• -p：保留文件的原始权限。
• --exclude：排除文件或目录。

1. 创建一个归档文件:

   bash

   Copy Code

   1tar -cvf output.tar foldername/

2. 创建一个 gzip 压缩的归档文件:

   bash

   Copy Code

   1tar -czvf output.tar.gz foldername/

3. 创建一个 bzip2 压缩的归档文件:

   bash

   Copy Code

   1tar -cjvf output.tar.bz2 foldername/

4. 创建一个 xz 压缩的归档文件:

   bash

   Copy Code

   1tar -cJvf output.tar.xz foldername/

5. 从归档文件中提取内容:

   bash

   Copy Code

   1tar -xvf output.tar

6. 从 gzip 压缩的归档文件中提取内容:

   bash

   Copy Code

   1tar -xzvf output.tar.gz

7. 列出归档文件的内容:

   bash

   Copy Code

   1tar -tvf output.tar

8. 从归档中排除文件或目录:

   bash

   Copy Code

   1tar -czvf output.tar.gz foldername/ --exclude=foldername/somefile --exclude=foldername/somedir/

这只是 tar 命令的一部分功能。为了掌握所有功能和选项，可以查阅 tar 的手册页：man tar。