Update docs and sort content

src/content/post/react-scan的用法.md

@@ -0,0 +1,75 @@
+---
+title: react-scan的用法
+date: 2024-12-17T00:00:00.000Z
+author: KazooTTT
+type: Post
+status: Published
+tags:
+  - react-scan
+  - devtool
+  - components
+  - re-render
+  - performance优化
+finished: true
+published: true
+category: null
+slug: react-scan
+description: >-
+  react-scan 是一个用于查看 React 代码中的 re-render
+  信息的工具。安装方式可以分为开发环境安装和使用浏览器插件两种，后者允许自定义配置。使用 react-scan 的时候，可以看到当前元素的
+  props、context 和 state，以及是否发生了 re-render，并且会标记出可能存在性能优化问题的 bad render。
+toAstro: true
+---
+
+在本地运行 follow 的源代码的时候是我第一次接触到 react-scan, 后来又在 x 的首页山上面刷到了原作者以及其他人对于 [react-scan](https://react-scan.com/) 的推荐。
+
+下面来介绍一下它的用法，以及我个人认为它好用的原因。
+
+## 安装
+
+安装方式可以分为两种，开发环境安装，使用浏览器插件。[官方文档](https://github.com/aidenybai/react-scan?tab=readme-ov-file#install) 有比较详细的教程，这里不做赘述。
+
+如果通过 npm 安装，可以自定义更多的配置，可以参考这里的 [API Reference](https://github.com/aidenybai/react-scan?tab=readme-ov-file#api-reference-1)
+
+## 使用
+
+react-scan 有三个按钮
+
+1. 是否查看元素的开关
+2. 是否查看 re-render 的开关
+3. 是否开启声音的开关
+
+<img src="https://pictures.kazoottt.top/2024/12/20241217-f7e2b39db39e5cbf21c0efc0e08656aa.png"/>
+
+### 开启元素查看
+
+会在面板上显示当前的元素，以及它的 props,context,state。
+
+如果发生变化，会变为紫色，这样可以方便你排查是什么值的变化导致了 re-render。
+
+在某些元素的 props 中会显示一个⚠️警告标志（isBadRender），提醒开发者这里可能存在性能优化的空间
+
+``` ts
+const isBadRender =
+    isChanged &&
+    ['object', 'function'].includes(typeof lastValue) &&
+    fastSerialize(lastValue) === fastSerialize(contextObj[key]);
+```
+
+为什么情况下会出现：
+
+- 组件发生了重新渲染（isChanged 为 true）
+- 变化的值是对象或函数类型（['object', 'function'].includes(typeof lastValue)）
+- 但是当我们序列化新旧值时，它们是完全相同的（fastSerialize(lastValue) === fastSerialize(contextObj[key])）
+
+### 开启 re-render 查看
+
+会显示当前的 re-render 的次数，以及每个 re-render 的组件。
+
+## 为什么觉得好用
+
+虽然 devtool 也可以查看 re-render 的情况，但是 react-scan 把 component 的 props,context,state 都显示出来并且标记了 bad render,让问题的排查更加方便。
+
+并且 react-scan 自带面板，不需要像 devtool 一样首先需要打开 devtool 再勾选上 re-render 的画面闪烁监听。
+
+![image.png](https://pictures.kazoottt.top/2024/12/20241217-1db17bd2dcccf168976cdc833df6f6a3.png)

src/content/post/编程/前端/zustand 使用备忘.md

@@ -12,7 +12,7 @@ tags:
   - 最小粒度原则
 finished: true
 published: true
-category: 
+category: 编程-前端
 slug: zustand-use-record
 description: zustand 是一个状态管理库，简单易用。它可以通过使用 single selector 或 shallow 来获取 state，避免所有组件都重新渲染。当 state 更新时，可以通过 useShallow 来只获取需要的数据。同时，应该遵循最小粒度原则，只获取需要的数据，而不是使用多个 store 去存储不同的 state。另外，与 UI 无关的 state 不需要通过 selector 获取，正确的做法是直接在 handleSave 方法内部访问 store。
 toAstro: true