lanyuanxiaoyao/Alfred
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复 ChatPanel 无限重渲染 — useLogger 新增 bindings 参数保证引用稳定

Browse Source
This commit is contained in:
兰缘小妖
2026-06-02 00:50:59 +08:00
parent 29bf61f7a3
commit 628b592577
4 changed files with 151 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
docs/development/frontend.md
View File

@@ -73,12 +73,12 @@ export interface Logger {
### 实现
| 实现 | 工厂函数 | 用途 |
| ----------------------- | --------------------------------------- | ------------------------------------------------------- |
| `DefaultLogger` + Sinks | `useLogger()` / `createDefaultLogger()` | 组件内使用，ConsoleSink + AntdMessageSink 双流 |
| `ConsoleLogger` | `createConsoleLogger()` | 非组件纯函数（ErrorBoundary、工具函数），仅 ConsoleSink |
| `NoopLogger` | `createNoopLogger()` | 测试中不需要日志的场景 |
| `MemoryLogger` | `createMemoryLogger()` | 测试断言日志条目 |
| 实现 | 工厂函数 | 用途 |
| ----------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------- |
| `DefaultLogger` + Sinks | `useLogger(bindings?)` / `createDefaultLogger()` | 组件内使用，ConsoleSink + AntdMessageSink 双流；传入 bindings 自动创建带作用域的子 Logger |
| `ConsoleLogger` | `createConsoleLogger()` | 非组件纯函数（ErrorBoundary、工具函数），仅 ConsoleSink |
| `NoopLogger` | `createNoopLogger()` | 测试中不需要日志的场景 |
| `MemoryLogger` | `createMemoryLogger()` | 测试断言日志条目 |
### 使用方式
@@ -88,7 +88,7 @@ export interface Logger {
import { useLogger } from "../hooks/use-logger";
function MyComponent() {
const logger = useLogger();
const logger = useLogger({ component: "MyComponent" });
logger.info("数据加载完成", { count: 42 });
logger.warn("即将超时");
logger.error("操作失败", { error: new Error("...") });
@@ -106,6 +106,15 @@ logger.debug("调试信息");
**作用域绑定：**
组件内直接通过 `useLogger` 的 `bindings` 参数传入，hook 内部保证引用稳定（值不变时多次渲染返回同一 Logger）：
```typescript
const logger = useLogger({ component: "ChatPanel", page: "workbench" });
logger.info("页面加载"); // [Alfred:INFO] 页面加载 [component=ChatPanel][page=workbench]
```
非组件场景仍可使用 `logger.child()`：
```typescript
const pageLogger = logger.child({ page: "projects" });
pageLogger.info("页面加载"); // [Alfred:INFO] 页面加载 [page=projects]