fix: time

Author: coderz-w

markdown/output.json

@@ -33,12 +33,29 @@
       "count": "1.1k",
       "readingTime": "5 ",
       "imageUrls": [],
-      "createdAt": null,
-      "updatedAt": null,
+      "createdAt": "2025-05-09T10:11:35.000Z",
+      "updatedAt": "2025-05-09T10:11:35.000Z",
       "modified": false
     }
   },
   "postDataList": [
+    {
+      "authors": [
+        "zhw"
+      ],
+      "title": "聊聊react-scan",
+      "tag": "react",
+      "path": "react-scan",
+      "rawFilePath": "./react-scan.md",
+      "coverImage": "https://raw.githubusercontent.com/aidenybai/react-scan/ca7746e2808408c04bcfbfc15486368e67d72bba/.github/assets/logo.svg",
+      "text": "# react - scan 核心原理剖析\r\n\r\nreact - scan 是一个用于监听react重渲染的工具，其核心原理是巧妙伪装成 React DevTools，借此成功接入 React 的内部运行机制，从而精准获取 Fiber 节点关键信息，实现对组件更新状况的实时监控。\r\n\r\nReact DevTools 在网页的 window 对象上会挂载一个特殊的全局对象：`__REACT_DEVTOOLS_GLOBAL_HOOK__`。React 在自身运行期间，于某些关键生命周期节点，会调用这个对象上的指定方法，像在 commit 阶段就会调用 `onCommitFiberRoot` 方法，并向其传入当前更新的 FiberRoot 节点作为参数。\r\n\r\nreact - scan 则利用这一点，通过劫持该 hook 上的函数，例如对 `onCommitFiberRoot` 进行重写操作，从而顺利获取整个 React 应用的 Fiber 树根节点。获取根节点后，借助 Fiber 节点的 child 属性指向第一个子节点、sibling 属性指向下一个兄弟节点，就能递归遍历整棵 Fiber 树，进而拿到每一个组件对应的 Fiber 节点详细信息。\r\n\r\n**如何判断组件是否发生更新？**\r\n\r\n  * 对于非 Host 组件（即非原生 DOM 节点）：通过位运算判断其 flags 与 PerformedWork 相与的结果是否为 PerformedWork，以此确定该 Fiber 节点是否发生更新。\r\n  * 对于 Host 组件（对应实际 DOM 节点）：\r\n    * 若不存在 alternate 节点，表明是组件的首次渲染（因为 Fiber 采用双缓冲机制，存在当前树与上一次树之分）。\r\n    * 若存在 alternate 节点，则对比当前与上一次的 memoizedProps（组件属性）、memoizedState（组件状态）、ref，判断组件是否更新。\r\n\r\n**如何定位更新组件的 DOM 元素？**\r\n\r\n一旦确定组件发生更新，可以从对应的 Fiber 节点向上查找最近的 Host 节点（即 Host Fiber），获取其关联的 DOM 元素，进而对 DOM 元素进行高亮或标记操作，方便进行调试或可视化展示。\r\n\r\n**一些其他功能：**\r\n\r\n  * 对比两棵 Fiber 树的 memoizedProps，能够精确知晓具体哪个 prop 发生了变化。\r\n  * 判断是否因 Context 变化引发的组件更新：可通过 fiber.firstContext 获取组件订阅的第一个 Context，然后凭借其 next 属性依次遍历所有订阅的 Context 节点，查找更新源头。\r\n  * 判断是否因为 Hook 更新导致组件更新：鉴于 Fiber 上的 memoizedState 存储着 hooks 链表，可据此分析是哪个 state 发生了变化。",
+      "count": "1.1k",
+      "readingTime": "5 ",
+      "imageUrls": [],
+      "createdAt": "2025-05-09T10:11:35.000Z",
+      "updatedAt": "2025-05-09T10:11:35.000Z",
+      "modified": false
+    },
     {
       "authors": [
         "zhw"
@@ -58,23 +75,6 @@
       "createdAt": "2024-11-13T12:48:31.000Z",
       "updatedAt": "2024-11-14T08:12:55.000Z",
       "modified": true
-    },
-    {
-      "authors": [
-        "zhw"
-      ],
-      "title": "聊聊react-scan",
-      "tag": "react",
-      "path": "react-scan",
-      "rawFilePath": "./react-scan.md",
-      "coverImage": "https://raw.githubusercontent.com/aidenybai/react-scan/ca7746e2808408c04bcfbfc15486368e67d72bba/.github/assets/logo.svg",
-      "text": "# react - scan 核心原理剖析\r\n\r\nreact - scan 是一个用于监听react重渲染的工具，其核心原理是巧妙伪装成 React DevTools，借此成功接入 React 的内部运行机制，从而精准获取 Fiber 节点关键信息，实现对组件更新状况的实时监控。\r\n\r\nReact DevTools 在网页的 window 对象上会挂载一个特殊的全局对象：`__REACT_DEVTOOLS_GLOBAL_HOOK__`。React 在自身运行期间，于某些关键生命周期节点，会调用这个对象上的指定方法，像在 commit 阶段就会调用 `onCommitFiberRoot` 方法，并向其传入当前更新的 FiberRoot 节点作为参数。\r\n\r\nreact - scan 则利用这一点，通过劫持该 hook 上的函数，例如对 `onCommitFiberRoot` 进行重写操作，从而顺利获取整个 React 应用的 Fiber 树根节点。获取根节点后，借助 Fiber 节点的 child 属性指向第一个子节点、sibling 属性指向下一个兄弟节点，就能递归遍历整棵 Fiber 树，进而拿到每一个组件对应的 Fiber 节点详细信息。\r\n\r\n**如何判断组件是否发生更新？**\r\n\r\n  * 对于非 Host 组件（即非原生 DOM 节点）：通过位运算判断其 flags 与 PerformedWork 相与的结果是否为 PerformedWork，以此确定该 Fiber 节点是否发生更新。\r\n  * 对于 Host 组件（对应实际 DOM 节点）：\r\n    * 若不存在 alternate 节点，表明是组件的首次渲染（因为 Fiber 采用双缓冲机制，存在当前树与上一次树之分）。\r\n    * 若存在 alternate 节点，则对比当前与上一次的 memoizedProps（组件属性）、memoizedState（组件状态）、ref，判断组件是否更新。\r\n\r\n**如何定位更新组件的 DOM 元素？**\r\n\r\n一旦确定组件发生更新，可以从对应的 Fiber 节点向上查找最近的 Host 节点（即 Host Fiber），获取其关联的 DOM 元素，进而对 DOM 元素进行高亮或标记操作，方便进行调试或可视化展示。\r\n\r\n**一些其他功能：**\r\n\r\n  * 对比两棵 Fiber 树的 memoizedProps，能够精确知晓具体哪个 prop 发生了变化。\r\n  * 判断是否因 Context 变化引发的组件更新：可通过 fiber.firstContext 获取组件订阅的第一个 Context，然后凭借其 next 属性依次遍历所有订阅的 Context 节点，查找更新源头。\r\n  * 判断是否因为 Hook 更新导致组件更新：鉴于 Fiber 上的 memoizedState 存储着 hooks 链表，可据此分析是哪个 state 发生了变化。",
-      "count": "1.1k",
-      "readingTime": "5 ",
-      "imageUrls": [],
-      "createdAt": null,
-      "updatedAt": null,
-      "modified": false
     }
   ]
 }