[{"data":1,"prerenderedAt":485},["ShallowReactive",2],{"markdown-doc:\u002Fguide\u002Freact":3},{"id":4,"title":5,"body":6,"description":475,"extension":476,"keywords":477,"locale":478,"meta":479,"navigation":99,"order":103,"path":480,"section":481,"seo":482,"stem":483,"__hash__":484},"docs\u002Fguide\u002Freact.zh-CN.md","React 接入",{"type":7,"value":8,"toc":469},"minimark",[9,25,29,32,63,294,316,320,327,331,334,358,385,395,399,410,438,452,465],[10,11,12,16,17,20,21,24],"p",{},[13,14,15],"code",{},"@quirekit\u002Fincremark-react"," 提供 React 19 的 ",[13,18,19],{},"QuireMarkdown","，直接依赖\n",[13,22,23],{},"@quirekit\u002Fincremark-core","。解析、后置引用、脚注、HTML 净化和缓存规则与 Vue 一致。\nReact 包使用自己的语义 DOM，不需要 Vue、QuireKit UI 或 UnoCSS。",[26,27,28],"h2",{"id":28},"工作区接入",[10,30,31],{},"当前尚未发布到 npm；在 QuireKit 工作区的 React 应用中安装：",[33,34,39],"pre",{"className":35,"code":36,"language":37,"meta":38,"style":38},"language-bash shiki shiki-themes github-light github-light github-dark","pnpm add '@quirekit\u002Fincremark-react@workspace:*' react@^19.3.0 react-dom@^19.3.0\n","bash","",[13,40,41],{"__ignoreMap":38},[42,43,46,50,54,57,60],"span",{"class":44,"line":45},"line",1,[42,47,49],{"class":48},"sgQzM","pnpm",[42,51,53],{"class":52},"s-HEn"," add",[42,55,56],{"class":52}," '@quirekit\u002Fincremark-react@workspace:*'",[42,58,59],{"class":52}," react@^19.3.0",[42,61,62],{"class":52}," react-dom@^19.3.0\n",[33,64,68],{"className":65,"code":66,"language":67,"meta":38,"style":38},"language-tsx shiki shiki-themes github-light github-light github-dark","import { QuireMarkdown } from '@quirekit\u002Fincremark-react'\nimport '@quirekit\u002Fincremark-react\u002Fstyles.css'\n\nexport function Answer({ received, messageId, receiving }: {\n  received: string\n  messageId: string\n  receiving: boolean\n}) {\n  return \u003CQuireMarkdown\n    content={received}\n    identity={messageId}\n    status={receiving ? 'receiving' : 'complete'}\n    html={{ styles: 'safe' }}\n    onError={failure => console.error(failure)}\n  \u002F>\n}\n","tsx",[13,69,70,86,94,101,140,152,162,173,179,191,203,214,240,257,283,289],{"__ignoreMap":38},[42,71,72,76,80,83],{"class":44,"line":45},[42,73,75],{"class":74},"sDD9d","import",[42,77,79],{"class":78},"sVPnS"," { QuireMarkdown } ",[42,81,82],{"class":74},"from",[42,84,85],{"class":52}," '@quirekit\u002Fincremark-react'\n",[42,87,89,91],{"class":44,"line":88},2,[42,90,75],{"class":74},[42,92,93],{"class":52}," '@quirekit\u002Fincremark-react\u002Fstyles.css'\n",[42,95,97],{"class":44,"line":96},3,[42,98,100],{"emptyLinePlaceholder":99},true,"\n",[42,102,104,107,110,113,116,120,123,126,128,131,134,137],{"class":44,"line":103},4,[42,105,106],{"class":74},"export",[42,108,109],{"class":74}," function",[42,111,112],{"class":48}," Answer",[42,114,115],{"class":78},"({ ",[42,117,119],{"class":118},"sde8i","received",[42,121,122],{"class":78},", ",[42,124,125],{"class":118},"messageId",[42,127,122],{"class":78},[42,129,130],{"class":118},"receiving",[42,132,133],{"class":78}," }",[42,135,136],{"class":74},":",[42,138,139],{"class":78}," {\n",[42,141,143,146,148],{"class":44,"line":142},5,[42,144,145],{"class":118},"  received",[42,147,136],{"class":74},[42,149,151],{"class":150},"sUNQB"," string\n",[42,153,155,158,160],{"class":44,"line":154},6,[42,156,157],{"class":118},"  messageId",[42,159,136],{"class":74},[42,161,151],{"class":150},[42,163,165,168,170],{"class":44,"line":164},7,[42,166,167],{"class":118},"  receiving",[42,169,136],{"class":74},[42,171,172],{"class":150}," boolean\n",[42,174,176],{"class":44,"line":175},8,[42,177,178],{"class":78},"}) {\n",[42,180,182,185,188],{"class":44,"line":181},9,[42,183,184],{"class":74},"  return",[42,186,187],{"class":78}," \u003C",[42,189,190],{"class":150},"QuireMarkdown\n",[42,192,194,197,200],{"class":44,"line":193},10,[42,195,196],{"class":48},"    content",[42,198,199],{"class":74},"=",[42,201,202],{"class":78},"{received}\n",[42,204,206,209,211],{"class":44,"line":205},11,[42,207,208],{"class":48},"    identity",[42,210,199],{"class":74},[42,212,213],{"class":78},"{messageId}\n",[42,215,217,220,222,225,228,231,234,237],{"class":44,"line":216},12,[42,218,219],{"class":48},"    status",[42,221,199],{"class":74},[42,223,224],{"class":78},"{receiving ",[42,226,227],{"class":74},"?",[42,229,230],{"class":52}," 'receiving'",[42,232,233],{"class":74}," :",[42,235,236],{"class":52}," 'complete'",[42,238,239],{"class":78},"}\n",[42,241,243,246,248,251,254],{"class":44,"line":242},13,[42,244,245],{"class":48},"    html",[42,247,199],{"class":74},[42,249,250],{"class":78},"{{ styles: ",[42,252,253],{"class":52},"'safe'",[42,255,256],{"class":78}," }}\n",[42,258,260,263,265,268,271,274,277,280],{"class":44,"line":259},14,[42,261,262],{"class":48},"    onError",[42,264,199],{"class":74},[42,266,267],{"class":78},"{",[42,269,270],{"class":118},"failure",[42,272,273],{"class":74}," =>",[42,275,276],{"class":78}," console.",[42,278,279],{"class":48},"error",[42,281,282],{"class":78},"(failure)}\n",[42,284,286],{"class":44,"line":285},15,[42,287,288],{"class":78},"  \u002F>\n",[42,290,292],{"class":44,"line":291},16,[42,293,239],{"class":78},[10,295,296,299,300,303,304,307,308,311,312,315],{},[13,297,298],{},"content"," 始终是已收到的权威全文。宿主负责网络分片、取消与停止，组件负责增量解析\n和呈现。停止保留当前字符串；",[13,301,302],{},"status"," 不修补标记或冻结旧段落。更换消息时改变\n",[13,305,306],{},"identity","；修改 parser 配置时替换 ",[13,309,310],{},"options"," 对象。高级宿主可传互斥的 ",[13,313,314],{},"state"," 快照。",[26,317,319],{"id":318},"可运行的-react-示例","可运行的 React 示例",[10,321,322,323,326],{},"下面挂载真实 React root；运行代码位于 ",[13,324,325],{},"react\u002Fapp.ts","，Vue 文件只是本站的挂载桥。\n重新生成时观察未完整 HTML、业务标记、后置链接和脚注；复选框可关闭渲染缓存作对照。",[328,329],"docs-demo",{"name":330},"react\u002Freading",[26,332,333],{"id":333},"组件与扩展",[10,335,336,339,340,343,344,347,348,350,351,353,354,357],{},[13,337,338],{},"components"," 按语义标签替换 React 组件或原生标签。自定义组件获得 ",[13,341,342],{},"node","、已验证属性\n和 ",[13,345,346],{},"children","；向原生元素转发 props 时先取出 ",[13,349,342],{},"。原生标签不接收该元数据。\n代码块组件另外获得 ",[13,352,13],{},"、",[13,355,356],{},"language","，不需要从 children 反推代码原文。",[10,359,360,361,364,365,368,369,372,373,376,377,380,381,384],{},"原生 Lezer ",[13,362,363],{},"options.syntax"," 和 MSFE ",[13,366,367],{},"options.extensions"," 与 Vue 共用；从 React 包导入\n",[13,370,371],{},"withMarkdownReading"," 为已有 source codec 安装返回 ReactNode 的阅读贡献。\n",[13,374,375],{},"renderInline"," \u002F ",[13,378,379],{},"renderBlocks"," 沿用源码范围校验；",[13,382,383],{},"cacheKey(document)"," 覆盖自定义读取的\n外部依赖。缺省 key 保守重投影，不能为了缓存把后置定义提前冻结。",[10,386,387,390,391,394],{},[13,388,389],{},"load(context, signal)"," 只在客户端提交后启动；更换输入、identity 或卸载会 abort，\n迟到资源也释放。自己的 ",[13,392,393],{},"render"," 回调失败保留原文，客户端的子组件错误由节点边界隔离。\nReact 服务端渲染不捕获任意子组件抛错，宿主仍须处理 SSR 根级错误；这一点遵循 React 的边界。",[26,396,398],{"id":397},"ssrhook-与缓存","SSR、hook 与缓存",[10,400,401,402,405,406,409],{},"默认 ",[13,403,404],{},"ssr=\"semantic\""," 在服务端和首次水合完成相同语义解析；",[13,407,408],{},"ssr=\"source\""," 先输出转义\n原文，再在挂载后解析。两端必须传入相同内容、identity、配置与 locale。公式和图形\n预览沿用客户端资源渲染，不在 SSR 执行 loader。",[10,411,412,415,416,353,418,421,422,425,426,428,429,434,435,437],{},[13,413,414],{},"useMarkdownSource(input, onError?)"," 供自己的 React 阅读外壳消费 ",[13,417,314],{},[13,419,420],{},"pending","、\n",[13,423,424],{},"generation"," 和 ",[13,427,279],{},"；无 UI 宿主使用",[430,431,433],"a",{"href":432},"\u002Fguide\u002Fheadless","纯解析内核","。\n",[13,436,19],{}," 已内置 hook，不需要再为它维护第二个会话。",[10,439,440,441,376,444,447,448,451],{},"React 在 render 中准备缓存帧，提交后接受；被放弃的帧不更改已提交目录，也不通知错误 observer。\n高级宿主用 ",[13,442,443],{},"MarkdownRenderer.prepare(...)",[13,445,446],{},"frame.commit()"," 接入这一合同；同步宿主\n可使用 ",[13,449,450],{},"render(...)","。StrictMode 的清理与重新连接可以安全重复。\n依赖 key 和 HTML 回调每次组件 render 重新检查，宿主改变外部数据后须触发 React 更新。",[10,453,454,455,459,460,464],{},"当前交付 core、Vue 和 React；其他框架暂不实现。缓存以完整顶层块为单位，成本边界见\n",[430,456,458],{"href":457},"\u002Fguide\u002Fperformance","性能说明","，逐项类型见 ",[430,461,463],{"href":462},"\u002Fapi\u002Freact","React API","。",[466,467,468],"style",{},"html pre.shiki code .sgQzM, html code.shiki .sgQzM{--shiki-default:#6F42C1;--shiki-light:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s-HEn, html code.shiki .s-HEn{--shiki-default:#032F62;--shiki-light:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sDD9d, html code.shiki .sDD9d{--shiki-default:#D73A49;--shiki-light:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVPnS, html code.shiki .sVPnS{--shiki-default:#24292E;--shiki-light:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sde8i, html code.shiki .sde8i{--shiki-default:#E36209;--shiki-light:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sUNQB, html code.shiki .sUNQB{--shiki-default:#005CC5;--shiki-light:#005CC5;--shiki-dark:#79B8FF}",{"title":38,"searchDepth":88,"depth":88,"links":470},[471,472,473,474],{"id":28,"depth":88,"text":28},{"id":318,"depth":88,"text":319},{"id":333,"depth":88,"text":333},{"id":397,"depth":88,"text":398},"React 组件、流式更新、SSR 和自定义节点，与 Vue 共用解析内核。","md",null,"zh-CN",{},"\u002Fguide\u002Freact","接入指南",{"title":5,"description":475},"guide\u002Freact.zh-CN","DWQtxeQdpuL4DuYRJnYcl6o9fyGU9gVmirU7xVuqFOg",1793045321582]