react-ai-renderer 0.1.20 → 0.1.24

package/README.md

@@ -148,11 +148,14 @@ const componentHandlers = [
     name: 'Button',
     component: Button,
     selfClosing: false,
+    onRenderStart: (item, scope) => {
+      console.log('Button 组件开始渲染:', item);
+    },
     onRenderProcess: (item, scope) => {
-      console.log('Button 组件渲染中...');
+      console.log('Button 组件渲染中:', item);
     },
     onRenderFinished: (item, scope) => {
-      console.log('Button 组件渲染完成');
+      console.log('Button 组件渲染完成:', item);
     }
   }
 ];
@@ -196,6 +199,9 @@ const componentHandlers = [
     name: 'MyComponent',
     component: MyComponent,
     selfClosing: false,
+    onRenderStart: (item, scope) => {
+      console.log('组件开始渲染:', item);
+    },
     onRenderProcess: (item, scope) => {
       console.log('组件渲染中:', item);
     },
@@ -206,12 +212,24 @@ const componentHandlers = [
 ];
 ```
 
+**ComponentHandler 配置项：**
+
+- `name`: 组件名称，用于匹配 MDX 中的标签名
+- `component`: React 组件引用
+- `selfClosing`: 是否为自闭合标签（如 `<Image />`）
+
 **生命周期钩子说明：**
 
+- `onRenderStart`: 在组件开始渲染时立即触发，此时组件已被解析但尚未生成渲染内容
 - `onRenderProcess`: 在组件流式渲染过程中触发，适用于处理渐进式渲染逻辑
 - `onRenderFinished`: 在组件完全渲染完成后触发，适用于执行后续动作如状态更新、请求发送等
 - `onRender`: （向后兼容）如果未定义 `onRenderProcess`，会在渲染过程中调用此钩子
 
+**钩子参数：**
+
+- `item`: 组件数据对象，包含 `type`、`value`（组件名）、`props`、`children`、`isComplete` 等属性
+- `scope`: 传递给组件的作用域对象
+
 ## ⚡ 性能优势
 
 ### 实时渲染