[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"i-ri:search-line":3,"i-ri:moon-line":8,"i-ri:sun-line":10,"i-ri:menu-3-line":12,"i-ri:close-line":14,"notes-module-items-react":16,"notes-page-react-16-advanced\u002F02-micro-frontend-governance":494,"i-ri:arrow-left-s-line":1605,"i-ri:menu-2-line":1607,"i-ri:arrow-right-s-line":1609,"i-ep:copy-document":1611},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cpath fill=\"currentColor\" d=\"m18.031 16.617l4.283 4.282l-1.415 1.415l-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9s9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617m-2.006-.742A6.98 6.98 0 0 0 18 11c0-3.867-3.133-7-7-7s-7 3.133-7 7s3.133 7 7 7a6.98 6.98 0 0 0 4.875-1.975z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"currentColor\" d=\"M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2h.1A6.98 6.98 0 0 0 10 7m-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938A8 8 0 0 0 4 12\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"currentColor\" d=\"M12 18a6 6 0 1 1 0-12a6 6 0 0 1 0 12m0-2a4 4 0 1 0 0-8a4 4 0 0 0 0 8M11 1h2v3h-2zm0 19h2v3h-2zM3.515 4.929l1.414-1.414L7.05 5.636L5.636 7.05zM16.95 18.364l1.414-1.414l2.121 2.121l-1.414 1.414zm2.121-14.85l1.414 1.415l-2.121 2.121l-1.414-1.414zM5.636 16.95l1.414 1.414l-2.121 2.121l-1.414-1.414zM23 11v2h-3v-2zM4 11v2H1v-2z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":13},"\u003Cpath fill=\"currentColor\" d=\"M3 4h18v2H3zm6 7h12v2H9zm-6 7h18v2H3z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":15},"\u003Cpath fill=\"currentColor\" d=\"m12 10.587l4.95-4.95l1.414 1.414l-4.95 4.95l4.95 4.95l-1.415 1.414l-4.95-4.95l-4.949 4.95l-1.414-1.415l4.95-4.95l-4.95-4.95L7.05 5.638z\"\u002F>",[17,22,26,30,34,38,42,46,50,54,58,62,66,70,74,78,82,86,90,94,98,102,106,110,114,118,122,126,130,134,138,142,146,150,154,158,162,166,170,174,178,182,186,190,194,198,202,206,210,214,218,222,226,230,234,238,242,246,250,254,258,262,266,270,274,278,282,286,290,294,298,302,306,310,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450,454,458,462,466,470,474,478,482,486,490],{"path":18,"title":19,"meta":20},"\u002Fnotes\u002Freact\u002F01-basics\u002F01-how-to-read-this-repo","如何阅读本仓库（学习路径与章节依赖）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},"2026-11-05T09:47:15.000Z",{"path":23,"title":24,"meta":25},"\u002Fnotes\u002Freact\u002F01-basics\u002F02-render-vs-commit","React 渲染两阶段：Render vs Commit（总览）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":27,"title":28,"meta":29},"\u002Fnotes\u002Freact\u002F01-basics\u002F03-update-pipeline-birdview","从“更新”到“页面变更”：一次 setState 的全链路鸟瞰",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":31,"title":32,"meta":33},"\u002Fnotes\u002Freact\u002F01-basics","基础入门（建议先读）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":35,"title":36,"meta":37},"\u002Fnotes\u002Freact\u002F02-event-loop\u002F01-browser-multi-process","浏览器多进程架构",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":39,"title":40,"meta":41},"\u002Fnotes\u002Freact\u002F02-event-loop\u002F02-event-loop-overview","事件循环概述",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":43,"title":44,"meta":45},"\u002Fnotes\u002Freact\u002F02-event-loop\u002F03-call-stack","函数调用栈",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":47,"title":48,"meta":49},"\u002Fnotes\u002Freact\u002F02-event-loop\u002F04-threads","线程介绍",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":51,"title":52,"meta":53},"\u002Fnotes\u002Freact\u002F02-event-loop\u002F05-refresh-rate-and-queues","刷新率与执行队列",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":55,"title":56,"meta":57},"\u002Fnotes\u002Freact\u002F02-event-loop\u002F06-settimeout","setTimeout 原理详解",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":59,"title":60,"meta":61},"\u002Fnotes\u002Freact\u002F02-event-loop\u002F07-promise","Promise 原理详解",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":63,"title":64,"meta":65},"\u002Fnotes\u002Freact\u002F02-event-loop\u002F08-event-loop-in-practice","事件循环机制（综合）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":67,"title":68,"meta":69},"\u002Fnotes\u002Freact\u002F02-event-loop\u002F09-priority-queues","优先级队列",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":71,"title":72,"meta":73},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F01-concept","并发模式：概念",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":75,"title":76,"meta":77},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F02-demo","案例演示并发模式",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":79,"title":80,"meta":81},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F03-high-priority-preemption","高优先级插队",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":83,"title":84,"meta":85},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F04-preemption-vs-interruption","插队的影响、与中断的区别",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":87,"title":88,"meta":89},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F05-shouldYield","中断条件：shouldYield",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":91,"title":92,"meta":93},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F06-react-tasks-and-queues","React 中的任务与队列",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":95,"title":96,"meta":97},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F07-ensureRootIsScheduled","ensureRootIsScheduled",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":99,"title":100,"meta":101},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F08-batch-updates-merge","合并多个更新触发",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":103,"title":104,"meta":105},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F09-taskQueue-lifecycle","taskQueue 队列循环的启动与结束",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":107,"title":108,"meta":109},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F10-time-slicing","时间切片是如何实现的",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":111,"title":112,"meta":113},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F11-workLoop-full","workLoop 循环完整逻辑",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":115,"title":116,"meta":117},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F12-priority-design","React 中的优先级设计",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":119,"title":120,"meta":121},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F13-lane-model","lane 模型",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":123,"title":124,"meta":125},"\u002Fnotes\u002Freact\u002F04-fiber\u002F01-three-node-types","三种节点对象",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":127,"title":128,"meta":129},"\u002Fnotes\u002Freact\u002F04-fiber\u002F02-fiberRootNode","FiberRootNode",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":131,"title":132,"meta":133},"\u002Fnotes\u002Freact\u002F04-fiber\u002F03-fiber-tree","Fiber 树",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":135,"title":136,"meta":137},"\u002Fnotes\u002Freact\u002F04-fiber\u002F04-initial-mount-build","Fiber 树初始构建过程",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":139,"title":140,"meta":141},"\u002Fnotes\u002Freact\u002F04-fiber\u002F05-workLoopConcurrent","workLoopConcurrent",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":143,"title":144,"meta":145},"\u002Fnotes\u002Freact\u002F04-fiber\u002F06-stack-and-workInProgress","栈结构 与 workInProgress",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":147,"title":148,"meta":149},"\u002Fnotes\u002Freact\u002F04-fiber\u002F07-executionContext","执行上下文 executionContext",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":151,"title":152,"meta":153},"\u002Fnotes\u002Freact\u002F04-fiber\u002F08-update-lanes","update lanes",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":155,"title":156,"meta":157},"\u002Fnotes\u002Freact\u002F04-fiber\u002F09-render-lanes","render lanes",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":159,"title":160,"meta":161},"\u002Fnotes\u002Freact\u002F04-fiber\u002F10-fiber-lanes","fiber lanes",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":163,"title":164,"meta":165},"\u002Fnotes\u002Freact\u002F04-fiber\u002F11-flags-appendix","附录：flags",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":167,"title":168,"meta":169},"\u002Fnotes\u002Freact\u002F05-hooks\u002F01-background","hook 背景",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":171,"title":172,"meta":173},"\u002Fnotes\u002Freact\u002F05-hooks\u002F02-categories","hook 分类",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":175,"title":176,"meta":177},"\u002Fnotes\u002Freact\u002F05-hooks\u002F03-closures","hook 与闭包",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":179,"title":180,"meta":181},"\u002Fnotes\u002Freact\u002F05-hooks\u002F04-hooks-and-fiber","hook 与 fiber",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":183,"title":184,"meta":185},"\u002Fnotes\u002Freact\u002F05-hooks\u002F05-renderWithHooks","renderWithHooks",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":187,"title":188,"meta":189},"\u002Fnotes\u002Freact\u002F05-hooks\u002F06-init-state-hook","初始化 State Hook",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":191,"title":192,"meta":193},"\u002Fnotes\u002Freact\u002F05-hooks\u002F07-init-effect-hook","初始化 effect Hook",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":195,"title":196,"meta":197},"\u002Fnotes\u002Freact\u002F05-hooks\u002F08-circular-linked-list","环形链表详解",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":199,"title":200,"meta":201},"\u002Fnotes\u002Freact\u002F05-hooks\u002F09-useReducer-vs-useState","useReducer 与 useState 的区别",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":203,"title":204,"meta":205},"\u002Fnotes\u002Freact\u002F05-hooks\u002F10-update-linked-list","update 链表",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":207,"title":208,"meta":209},"\u002Fnotes\u002Freact\u002F05-hooks\u002F11-mount-state-updates","初始阶段的状态更新",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":211,"title":212,"meta":213},"\u002Fnotes\u002Freact\u002F05-hooks\u002F12-baseQueue-vs-pending","baseQueue 与 queue.pending",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":215,"title":216,"meta":217},"\u002Fnotes\u002Freact\u002F05-hooks\u002F13-dispatch-in-update","更新阶段的 dispatch",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":219,"title":220,"meta":221},"\u002Fnotes\u002Freact\u002F05-hooks\u002F14-commitRoot","commitRoot",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":223,"title":224,"meta":225},"\u002Fnotes\u002Freact\u002F06-diff\u002F01-update-overview","React 更新机制概述",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":227,"title":228,"meta":229},"\u002Fnotes\u002Freact\u002F06-diff\u002F02-diff-strategy","diff 策略",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":231,"title":232,"meta":233},"\u002Fnotes\u002Freact\u002F06-diff\u002F03-node-compare","节点比较方式",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":235,"title":236,"meta":237},"\u002Fnotes\u002Freact\u002F06-diff\u002F04-reconcileChildFibers","reconcileChildFibers",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":239,"title":240,"meta":241},"\u002Fnotes\u002Freact\u002F06-diff\u002F05-reconcileSingleElement","reconcileSingleElement",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":243,"title":244,"meta":245},"\u002Fnotes\u002Freact\u002F06-diff\u002F06-reconcileChildrenArray","reconcileChildrenArray",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":247,"title":248,"meta":249},"\u002Fnotes\u002Freact\u002F06-diff\u002F07-why-not-number-key","为什么不建议使用数字作为 key",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":251,"title":252,"meta":253},"\u002Fnotes\u002Freact\u002F07-event-system\u002F01-overview","事件系统概述",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":255,"title":256,"meta":257},"\u002Fnotes\u002Freact\u002F07-event-system\u002F02-event-plugin","事件插件",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":259,"title":260,"meta":261},"\u002Fnotes\u002Freact\u002F07-event-system\u002F03-event-pooling","事件池",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":263,"title":264,"meta":265},"\u002Fnotes\u002Freact\u002F07-event-system\u002F04-root-listeners","根节点事件绑定",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":267,"title":268,"meta":269},"\u002Fnotes\u002Freact\u002F07-event-system\u002F05-event-dispatch","事件触发",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":271,"title":272,"meta":273},"\u002Fnotes\u002Freact\u002F08-interview\u002F01-useEffect-vs-useLayoutEffect","useEffect 与 useLayoutEffect 的区别",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":275,"title":276,"meta":277},"\u002Fnotes\u002Freact\u002F08-interview\u002F02-why-no-conditional-hooks","为什么 hook 不能写在条件判断里",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":279,"title":280,"meta":281},"\u002Fnotes\u002Freact\u002F08-interview\u002F03-understanding-concurrency","聊聊在 React 中，你对并发模式的理解",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":283,"title":284,"meta":285},"\u002Fnotes\u002Freact\u002F08-interview\u002F04-update-mechanism","聊聊 React 的更新机制原理",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":287,"title":288,"meta":289},"\u002Fnotes\u002Freact\u002F08-interview\u002F05-setState-sync-or-async","setState 是同步还是异步的？",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":291,"title":292,"meta":293},"\u002Fnotes\u002Freact\u002F08-interview\u002F06-useState-vs-useReducer","聊聊 useState 与 useReducer 的区别",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":295,"title":296,"meta":297},"\u002Fnotes\u002Freact\u002F08-interview\u002F07-closure-trap","聊聊闭包陷阱问题，以及如何解决",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":299,"title":300,"meta":301},"\u002Fnotes\u002Freact\u002F08-interview\u002F08-time-slicing-details","时间分片是如何实现的（任务拆分\u002F中断\u002F恢复）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":303,"title":304,"meta":305},"\u002Fnotes\u002Freact\u002F08-interview\u002F09-batched-updates-useState","聊聊 useState 的批处理更新机制",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":307,"title":308,"meta":309},"\u002Fnotes\u002Freact\u002F08-interview\u002F10-jsx-to-dom","JSX 是如何转变成为真实 DOM 的",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":311,"title":312,"meta":313},"\u002Fnotes\u002Freact\u002F08-interview\u002F11-useCallback-impl","useCallback 的实现原理是什么",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":315,"title":316,"meta":317},"\u002Fnotes\u002Freact\u002F08-interview\u002F12-scheduling-mechanism","详细聊聊 React 的调度机制",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":319,"title":320,"meta":321},"\u002Fnotes\u002Freact\u002F08-interview\u002F13-priority-and-lanes","聊聊 React 的优先级机制（Lane 模型）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":323,"title":324,"meta":325},"\u002Fnotes\u002Freact\u002F08-interview\u002F14-diff-algorithm","React 的 Diff 算法是什么样的",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":327,"title":328,"meta":329},"\u002Fnotes\u002Freact\u002F08-interview\u002F15-event-system","详细聊聊 React 的事件系统是如何实现的",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":331,"title":332,"meta":333},"\u002Fnotes\u002Freact\u002F08-interview\u002F16-portals-bubbling","React Portals 上的事件是否会冒泡到父组件，原理是什么",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":335,"title":336,"meta":337},"\u002Fnotes\u002Freact\u002F08-interview\u002F17-useEffect-impl","useEffect 的实现原理是什么",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":339,"title":340,"meta":341},"\u002Fnotes\u002Freact\u002F08-interview\u002F18-useContext-impl","请聊聊 useContext 的实现原理",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":343,"title":344,"meta":345},"\u002Fnotes\u002Freact\u002F09-react-18-in-practice\u002F01-automatic-batching-and-flushsync","React 18 自动批处理（Automatic Batching）与 flushSync",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":347,"title":348,"meta":349},"\u002Fnotes\u002Freact\u002F09-react-18-in-practice\u002F02-strictmode-and-idempotent-effects","React StrictMode：为什么会“双调用”？（源码\u002F机制视角）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":351,"title":352,"meta":353},"\u002Fnotes\u002Freact\u002F09-react-18-in-practice\u002F03-transition-useTransition-useDeferredValue","Transition：startTransition \u002F useTransition \u002F useDeferredValue（机制视角）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":355,"title":356,"meta":357},"\u002Fnotes\u002Freact\u002F09-react-18-in-practice\u002F04-suspense-loading-boundary-design","Suspense：加载态边界如何设计（机制\u002F架构视角）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":359,"title":360,"meta":361},"\u002Fnotes\u002Freact\u002F09-react-18-in-practice\u002F05-error-boundary-reporting-and-recovery","Error Boundary：兜底、重试与上报（自研 vs Sentry）（机制\u002F架构视角）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":363,"title":364,"meta":365},"\u002Fnotes\u002Freact\u002F09-react-18-in-practice","React 18 实战（并发特性与默认行为）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":367,"title":368,"meta":369},"\u002Fnotes\u002Freact\u002F10-routing-and-navigation\u002F01-routing-and-url-state-mental-model","路由与 URL State：统一心智模型（架构师视角）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":371,"title":372,"meta":373},"\u002Fnotes\u002Freact\u002F10-routing-and-navigation\u002F02-tanstack-router-route-tree-search-loader-prefetch","TanStack Router（Vite \u002F SPA）：Route Tree \u002F Search \u002F Loader \u002F Prefetch（落地篇）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":375,"title":376,"meta":377},"\u002Fnotes\u002Freact\u002F10-routing-and-navigation\u002F03-next-app-router-segments-layout-loading-error-not-found-prefetch","Next.js App Router：Segments \u002F Layouts \u002F Loading-Error-NotFound \u002F Prefetch（落地篇）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":379,"title":380,"meta":381},"\u002Fnotes\u002Freact\u002F10-routing-and-navigation","路由与导航（TanStack Router \u002F Next App Router）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":383,"title":384,"meta":385},"\u002Fnotes\u002Freact\u002F11-data-layer\u002F01-state-layering-ui-server-url-global","状态分层：UI \u002F Server \u002F URL \u002F Global（架构师视角）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":387,"title":388,"meta":389},"\u002Fnotes\u002Freact\u002F11-data-layer\u002F02-tanstack-query-caching-and-invalidation","TanStack Query：缓存模型与失效策略（Caching & Invalidation）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":391,"title":392,"meta":393},"\u002Fnotes\u002Freact\u002F11-data-layer\u002F03-optimistic-updates-and-consistency","TanStack Query：乐观更新与一致性（Optimistic Updates & Consistency）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":395,"title":396,"meta":397},"\u002Fnotes\u002Freact\u002F11-data-layer\u002F04-form-architecture-react-hook-form-validation-performance-testability","表单架构：React Hook Form 的受控\u002F非受控、校验、性能与可测试性（架构师视角）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":399,"title":400,"meta":401},"\u002Fnotes\u002Freact\u002F11-data-layer","数据层（Server State \u002F 表单 \u002F 状态分层）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":403,"title":404,"meta":405},"\u002Fnotes\u002Freact\u002F12-rendering-and-delivery\u002F01-hydration-mismatch","Hydration mismatch（React \u002F Next.js）：成因、检测、排查清单与工程化规避",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":407,"title":408,"meta":409},"\u002Fnotes\u002Freact\u002F12-rendering-and-delivery\u002F01-nextjs-cache-revalidate-consistency-online-not-updating","Next.js 缓存\u002F重验证与一致性：避免「线上怎么不更新」事故（App Router）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":411,"title":412,"meta":413},"\u002Fnotes\u002Freact\u002F12-rendering-and-delivery\u002F02-csr-ssr-ssg-isr-how-to-choose","CSR vs SSR vs SSG vs ISR：怎么选？边界是什么？（体验 + 成本 + 一致性）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":415,"title":416,"meta":417},"\u002Fnotes\u002Freact\u002F12-rendering-and-delivery\u002F04-streaming-ssr-with-suspense","Streaming SSR + Suspense：提升前端感知性能的利器",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":419,"title":420,"meta":421},"\u002Fnotes\u002Freact\u002F12-rendering-and-delivery","渲染与交付（CSR\u002FSSR\u002FStreaming\u002FHydration\u002F缓存）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":423,"title":424,"meta":425},"\u002Fnotes\u002Freact\u002F13-production-readiness\u002F01-observability-logging-metrics-tracing","前端可观测性体系：日志、指标与链路追踪",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":427,"title":428,"meta":429},"\u002Fnotes\u002Freact\u002F13-production-readiness\u002F02-auth-and-web-security","鉴权与 Web 安全：OAuth, JWT, XSS, CSRF, CSP",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":431,"title":432,"meta":433},"\u002Fnotes\u002Freact\u002F13-production-readiness","生产可用性（错误\u002F可观测\u002F鉴权\u002F安全）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":435,"title":436,"meta":437},"\u002Fnotes\u002Freact\u002F14-performance\u002F01-performance-playbook-and-metrics","前端性能定位 Playbook：从指标到归因",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":439,"title":440,"meta":441},"\u002Fnotes\u002Freact\u002F14-performance\u002F02-rendering-optimization-memo-context-virtualization","React 渲染性能优化：Memo, Context, 与虚拟化",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":443,"title":444,"meta":445},"\u002Fnotes\u002Freact\u002F14-performance\u002F03-asset-and-bundle-optimization","资源与 Bundle 优化：代码分割、图片与 CDN",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":447,"title":448,"meta":449},"\u002Fnotes\u002Freact\u002F14-performance","性能体系（定位 → 优化 → 度量）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":451,"title":452,"meta":453},"\u002Fnotes\u002Freact\u002F15-engineering-and-architecture\u002F01-component-system-and-design-system","组件体系与设计系统：构建规模化前端的基石",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":455,"title":456,"meta":457},"\u002Fnotes\u002Freact\u002F15-engineering-and-architecture\u002F02-testing-strategy-rtl-e2e-testability","前端测试体系：RTL, E2E 与可测性设计",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":459,"title":460,"meta":461},"\u002Fnotes\u002Freact\u002F15-engineering-and-architecture\u002F03-monorepo-and-dependency-management","Monorepo 与依赖治理：pnpm 和 Turborepo",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":463,"title":464,"meta":465},"\u002Fnotes\u002Freact\u002F15-engineering-and-architecture\u002F04-cicd-and-quality-gates","CI\u002FCD 与质量门禁：构建可靠的自动化流程",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":467,"title":468,"meta":469},"\u002Fnotes\u002Freact\u002F15-engineering-and-architecture\u002F05-bff-and-api-design","BFF 与 API 设计：前端架构师的视角",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":471,"title":472,"meta":473},"\u002Fnotes\u002Freact\u002F15-engineering-and-architecture","工程与架构治理（规模化）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":475,"title":476,"meta":477},"\u002Fnotes\u002Freact\u002F16-advanced\u002F01-rsc-and-server-actions-deep-dive","RSC\u002FServer Actions 深水区：边界、约束与缓存一致性",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":479,"title":480,"meta":481},"\u002Fnotes\u002Freact\u002F16-advanced\u002F02-micro-frontend-governance","微前端治理：样式、路由与通信",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":483,"title":484,"meta":485},"\u002Fnotes\u002Freact\u002F16-advanced\u002F03-realtime-and-offline","实时与离线：WebSocket, PWA 与 Service Worker",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":487,"title":488,"meta":489},"\u002Fnotes\u002Freact\u002F16-advanced\u002F04-a11y-i18n-compliance","a11y, i18n 与合规：构建负责任的全球化应用",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":491,"title":492,"meta":493},"\u002Fnotes\u002Freact\u002F16-advanced","进阶专题（按业务需要选做）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"id":495,"type":496,"sourcePath":497,"routePath":479,"path":479,"title":480,"updatedAt":21,"meta":498,"body":500,"toc":1591},"bm90ZTpub3Rlcy9yZWFjdC8xNi1hZHZhbmNlZC8wMi1taWNyby1mcm9udGVuZC1nb3Zlcm5hbmNlLm1k","note","notes\u002Freact\u002F16-advanced\u002F02-micro-frontend-governance.md",{"id":495,"type":496,"sourcePath":497,"slug":499,"title":480,"updatedAt":21,"lastUpdated":21},"react\u002F16-advanced\u002F02-micro-frontend-governance",{"type":501,"children":502},"root",[503,511,527,531,538,550,560,605,608,614,621,631,750,766,1151,1154,1160,1166,1171,1222,1228,1233,1296,1302,1307,1364,1370,1453,1456,1462,1474,1517,1522,1525,1531,1585],{"type":504,"tag":505,"props":506,"children":508},"element","h1",{"id":507},"微前端治理样式路由与通信",[509],{"type":510,"value":480},"text",{"type":504,"tag":512,"props":513,"children":514},"blockquote",{},[515],{"type":504,"tag":516,"props":517,"children":518},"p",{},[519,525],{"type":504,"tag":520,"props":521,"children":522},"strong",{},[523],{"type":510,"value":524},"一句话结论",{"type":510,"value":526},"：微前端架构通过将大型单体前端拆分为多个独立、可部署的应用来提升团队自治和技术异构性，但其成功与否，关键在于如何通过有效的治理策略来解决样式隔离、依赖共享、路由协作和应用间通信等固有挑战。",{"type":504,"tag":528,"props":529,"children":530},"hr",{},[],{"type":504,"tag":532,"props":533,"children":535},"h2",{"id":534},"_1-什么是微前端-micro-frontends-mfe",[536],{"type":510,"value":537},"1. 什么是微前端 (Micro-Frontends - MFE)？",{"type":504,"tag":516,"props":539,"children":540},{},[541,543,548],{"type":510,"value":542},"微前端是一种架构风格，其核心思想是",{"type":504,"tag":520,"props":544,"children":545},{},[546],{"type":510,"value":547},"将一个大型的、单体的前端应用，拆分为一系列更小、更内聚、可独立开发和部署的“微应用”",{"type":510,"value":549},"。这些微应用在用户看来是一个无缝的整体。",{"type":504,"tag":516,"props":551,"children":552},{},[553,558],{"type":504,"tag":520,"props":554,"children":555},{},[556],{"type":510,"value":557},"解决的问题",{"type":510,"value":559},"：",{"type":504,"tag":561,"props":562,"children":563},"ul",{},[564,575,585,595],{"type":504,"tag":565,"props":566,"children":567},"li",{},[568,573],{"type":504,"tag":520,"props":569,"children":570},{},[571],{"type":510,"value":572},"团队自治",{"type":510,"value":574},"：每个团队可以独立负责其业务领域（一个或多个微应用），拥有自己的代码库、开发节奏和技术栈。",{"type":504,"tag":565,"props":576,"children":577},{},[578,583],{"type":504,"tag":520,"props":579,"children":580},{},[581],{"type":510,"value":582},"增量升级",{"type":510,"value":584},"：可以逐步地用新技术栈重写老旧系统的一部分，而不是进行高风险的“大爆炸式”重构。",{"type":504,"tag":565,"props":586,"children":587},{},[588,593],{"type":504,"tag":520,"props":589,"children":590},{},[591],{"type":510,"value":592},"技术异构",{"type":510,"value":594},"：允许在同一个应用中并存多个技术栈（如一个微应用用 React，另一个用 Vue）。",{"type":504,"tag":565,"props":596,"children":597},{},[598,603],{"type":504,"tag":520,"props":599,"children":600},{},[601],{"type":510,"value":602},"更快的构建和部署",{"type":510,"value":604},"：每个微应用的 CI\u002FCD 流水线更小、更快。",{"type":504,"tag":528,"props":606,"children":607},{},[],{"type":504,"tag":532,"props":609,"children":611},{"id":610},"_2-主流实现方案",[612],{"type":510,"value":613},"2. 主流实现方案",{"type":504,"tag":615,"props":616,"children":618},"h3",{"id":617},"a-webpack-module-federation",[619],{"type":510,"value":620},"A. Webpack Module Federation",{"type":504,"tag":516,"props":622,"children":623},{},[624,629],{"type":504,"tag":520,"props":625,"children":626},{},[627],{"type":510,"value":628},"Module Federation (模块联邦)",{"type":510,"value":630}," 是 Webpack 5 引入的一项革命性功能，也是目前实现微前端的最主流、最优雅的方案。",{"type":504,"tag":561,"props":632,"children":633},{},[634,658,691],{"type":504,"tag":565,"props":635,"children":636},{},[637,642,644,649,651,656],{"type":504,"tag":520,"props":638,"children":639},{},[640],{"type":510,"value":641},"核心思想",{"type":510,"value":643},"：它允许一个 JavaScript 应用在运行时",{"type":504,"tag":520,"props":645,"children":646},{},[647],{"type":510,"value":648},"动态地加载",{"type":510,"value":650},"另一个独立部署的应用的代码，并",{"type":504,"tag":520,"props":652,"children":653},{},[654],{"type":510,"value":655},"共享依赖",{"type":510,"value":657},"。",{"type":504,"tag":565,"props":659,"children":660},{},[661,666,668],{"type":504,"tag":520,"props":662,"children":663},{},[664],{"type":510,"value":665},"角色",{"type":510,"value":667},"：\n",{"type":504,"tag":561,"props":669,"children":670},{},[671,681],{"type":504,"tag":565,"props":672,"children":673},{},[674,679],{"type":504,"tag":520,"props":675,"children":676},{},[677],{"type":510,"value":678},"Host (宿主应用)",{"type":510,"value":680},"：消费其他微应用的应用框架。",{"type":504,"tag":565,"props":682,"children":683},{},[684,689],{"type":504,"tag":520,"props":685,"children":686},{},[687],{"type":510,"value":688},"Remote (远程应用)",{"type":510,"value":690},"：暴露模块给其他应用消费的微应用。",{"type":504,"tag":565,"props":692,"children":693},{},[694,699,700],{"type":504,"tag":520,"props":695,"children":696},{},[697],{"type":510,"value":698},"优势",{"type":510,"value":667},{"type":504,"tag":561,"props":701,"children":702},{},[703,713,740],{"type":504,"tag":565,"props":704,"children":705},{},[706,711],{"type":504,"tag":520,"props":707,"children":708},{},[709],{"type":510,"value":710},"真正的运行时集成",{"type":510,"value":712},"：不同于 iframe，所有组件都运行在同一个 DOM 和 Window 环境下，体验无缝。",{"type":504,"tag":565,"props":714,"children":715},{},[716,721,723,730,732,738],{"type":504,"tag":520,"props":717,"children":718},{},[719],{"type":510,"value":720},"高效的依赖共享",{"type":510,"value":722},"：可以配置共享的依赖库（如 ",{"type":504,"tag":724,"props":725,"children":727},"code",{"className":726},[],[728],{"type":510,"value":729},"react",{"type":510,"value":731},", ",{"type":504,"tag":724,"props":733,"children":735},{"className":734},[],[736],{"type":510,"value":737},"react-dom",{"type":510,"value":739},"）。如果 Host 和 Remote 都依赖 React 18，那么 React 18 的代码只会被加载一次。",{"type":504,"tag":565,"props":741,"children":742},{},[743,748],{"type":504,"tag":520,"props":744,"children":745},{},[746],{"type":510,"value":747},"灵活性",{"type":510,"value":749},"：一个应用可以同时是 Host 和 Remote。",{"type":504,"tag":516,"props":751,"children":752},{},[753],{"type":504,"tag":520,"props":754,"children":755},{},[756,758,764],{"type":510,"value":757},"示例配置 (",{"type":504,"tag":724,"props":759,"children":761},{"className":760},[],[762],{"type":510,"value":763},"webpack.config.js",{"type":510,"value":765},")",{"type":504,"tag":767,"props":768,"children":773},"pre",{"className":769,"code":770,"language":771,"meta":772,"style":772},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F Remote App (e.g., a checkout micro-app)\nnew ModuleFederationPlugin({\n  name: 'checkout',\n  filename: 'remoteEntry.js',\n  exposes: {\n    '.\u002FCheckoutButton': '.\u002Fsrc\u002FCheckoutButton', \u002F\u002F 暴露 CheckoutButton 组件\n  },\n  shared: { react: { singleton: true }, 'react-dom': { singleton: true } },\n});\n\n\u002F\u002F Host App (e.g., the main product page)\nnew ModuleFederationPlugin({\n  name: 'product',\n  remotes: {\n    checkout: 'checkout@http:\u002F\u002Flocalhost:3001\u002FremoteEntry.js', \u002F\u002F 引用 Remote App\n  },\n  shared: { react: { singleton: true }, 'react-dom': { singleton: true } },\n});\n\n\u002F\u002F In Host App's code\nconst CheckoutButton = React.lazy(() => import('checkout\u002FCheckoutButton'));\n","javascript","",[774],{"type":504,"tag":724,"props":775,"children":776},{"__ignoreMap":772},[777,789,811,831,849,858,886,895,934,943,953,962,978,995,1004,1027,1035,1067,1075,1083,1092],{"type":504,"tag":778,"props":779,"children":782},"span",{"class":780,"line":781},"line",1,[783],{"type":504,"tag":778,"props":784,"children":786},{"style":785},"--shiki-default:#6A737D;--shiki-dark:#6A737D",[787],{"type":510,"value":788},"\u002F\u002F Remote App (e.g., a checkout micro-app)\n",{"type":504,"tag":778,"props":790,"children":792},{"class":780,"line":791},2,[793,799,805],{"type":504,"tag":778,"props":794,"children":796},{"style":795},"--shiki-default:#D73A49;--shiki-dark:#F97583",[797],{"type":510,"value":798},"new",{"type":504,"tag":778,"props":800,"children":802},{"style":801},"--shiki-default:#6F42C1;--shiki-dark:#B392F0",[803],{"type":510,"value":804}," ModuleFederationPlugin",{"type":504,"tag":778,"props":806,"children":808},{"style":807},"--shiki-default:#24292E;--shiki-dark:#E1E4E8",[809],{"type":510,"value":810},"({\n",{"type":504,"tag":778,"props":812,"children":814},{"class":780,"line":813},3,[815,820,826],{"type":504,"tag":778,"props":816,"children":817},{"style":807},[818],{"type":510,"value":819},"  name: ",{"type":504,"tag":778,"props":821,"children":823},{"style":822},"--shiki-default:#032F62;--shiki-dark:#9ECBFF",[824],{"type":510,"value":825},"'checkout'",{"type":504,"tag":778,"props":827,"children":828},{"style":807},[829],{"type":510,"value":830},",\n",{"type":504,"tag":778,"props":832,"children":834},{"class":780,"line":833},4,[835,840,845],{"type":504,"tag":778,"props":836,"children":837},{"style":807},[838],{"type":510,"value":839},"  filename: ",{"type":504,"tag":778,"props":841,"children":842},{"style":822},[843],{"type":510,"value":844},"'remoteEntry.js'",{"type":504,"tag":778,"props":846,"children":847},{"style":807},[848],{"type":510,"value":830},{"type":504,"tag":778,"props":850,"children":852},{"class":780,"line":851},5,[853],{"type":504,"tag":778,"props":854,"children":855},{"style":807},[856],{"type":510,"value":857},"  exposes: {\n",{"type":504,"tag":778,"props":859,"children":861},{"class":780,"line":860},6,[862,867,872,877,881],{"type":504,"tag":778,"props":863,"children":864},{"style":822},[865],{"type":510,"value":866},"    '.\u002FCheckoutButton'",{"type":504,"tag":778,"props":868,"children":869},{"style":807},[870],{"type":510,"value":871},": ",{"type":504,"tag":778,"props":873,"children":874},{"style":822},[875],{"type":510,"value":876},"'.\u002Fsrc\u002FCheckoutButton'",{"type":504,"tag":778,"props":878,"children":879},{"style":807},[880],{"type":510,"value":731},{"type":504,"tag":778,"props":882,"children":883},{"style":785},[884],{"type":510,"value":885},"\u002F\u002F 暴露 CheckoutButton 组件\n",{"type":504,"tag":778,"props":887,"children":889},{"class":780,"line":888},7,[890],{"type":504,"tag":778,"props":891,"children":892},{"style":807},[893],{"type":510,"value":894},"  },\n",{"type":504,"tag":778,"props":896,"children":898},{"class":780,"line":897},8,[899,904,910,915,920,925,929],{"type":504,"tag":778,"props":900,"children":901},{"style":807},[902],{"type":510,"value":903},"  shared: { react: { singleton: ",{"type":504,"tag":778,"props":905,"children":907},{"style":906},"--shiki-default:#005CC5;--shiki-dark:#79B8FF",[908],{"type":510,"value":909},"true",{"type":504,"tag":778,"props":911,"children":912},{"style":807},[913],{"type":510,"value":914}," }, ",{"type":504,"tag":778,"props":916,"children":917},{"style":822},[918],{"type":510,"value":919},"'react-dom'",{"type":504,"tag":778,"props":921,"children":922},{"style":807},[923],{"type":510,"value":924},": { singleton: ",{"type":504,"tag":778,"props":926,"children":927},{"style":906},[928],{"type":510,"value":909},{"type":504,"tag":778,"props":930,"children":931},{"style":807},[932],{"type":510,"value":933}," } },\n",{"type":504,"tag":778,"props":935,"children":937},{"class":780,"line":936},9,[938],{"type":504,"tag":778,"props":939,"children":940},{"style":807},[941],{"type":510,"value":942},"});\n",{"type":504,"tag":778,"props":944,"children":946},{"class":780,"line":945},10,[947],{"type":504,"tag":778,"props":948,"children":950},{"emptyLinePlaceholder":949},true,[951],{"type":510,"value":952},"\n",{"type":504,"tag":778,"props":954,"children":956},{"class":780,"line":955},11,[957],{"type":504,"tag":778,"props":958,"children":959},{"style":785},[960],{"type":510,"value":961},"\u002F\u002F Host App (e.g., the main product page)\n",{"type":504,"tag":778,"props":963,"children":965},{"class":780,"line":964},12,[966,970,974],{"type":504,"tag":778,"props":967,"children":968},{"style":795},[969],{"type":510,"value":798},{"type":504,"tag":778,"props":971,"children":972},{"style":801},[973],{"type":510,"value":804},{"type":504,"tag":778,"props":975,"children":976},{"style":807},[977],{"type":510,"value":810},{"type":504,"tag":778,"props":979,"children":981},{"class":780,"line":980},13,[982,986,991],{"type":504,"tag":778,"props":983,"children":984},{"style":807},[985],{"type":510,"value":819},{"type":504,"tag":778,"props":987,"children":988},{"style":822},[989],{"type":510,"value":990},"'product'",{"type":504,"tag":778,"props":992,"children":993},{"style":807},[994],{"type":510,"value":830},{"type":504,"tag":778,"props":996,"children":998},{"class":780,"line":997},14,[999],{"type":504,"tag":778,"props":1000,"children":1001},{"style":807},[1002],{"type":510,"value":1003},"  remotes: {\n",{"type":504,"tag":778,"props":1005,"children":1007},{"class":780,"line":1006},15,[1008,1013,1018,1022],{"type":504,"tag":778,"props":1009,"children":1010},{"style":807},[1011],{"type":510,"value":1012},"    checkout: ",{"type":504,"tag":778,"props":1014,"children":1015},{"style":822},[1016],{"type":510,"value":1017},"'checkout@http:\u002F\u002Flocalhost:3001\u002FremoteEntry.js'",{"type":504,"tag":778,"props":1019,"children":1020},{"style":807},[1021],{"type":510,"value":731},{"type":504,"tag":778,"props":1023,"children":1024},{"style":785},[1025],{"type":510,"value":1026},"\u002F\u002F 引用 Remote App\n",{"type":504,"tag":778,"props":1028,"children":1030},{"class":780,"line":1029},16,[1031],{"type":504,"tag":778,"props":1032,"children":1033},{"style":807},[1034],{"type":510,"value":894},{"type":504,"tag":778,"props":1036,"children":1038},{"class":780,"line":1037},17,[1039,1043,1047,1051,1055,1059,1063],{"type":504,"tag":778,"props":1040,"children":1041},{"style":807},[1042],{"type":510,"value":903},{"type":504,"tag":778,"props":1044,"children":1045},{"style":906},[1046],{"type":510,"value":909},{"type":504,"tag":778,"props":1048,"children":1049},{"style":807},[1050],{"type":510,"value":914},{"type":504,"tag":778,"props":1052,"children":1053},{"style":822},[1054],{"type":510,"value":919},{"type":504,"tag":778,"props":1056,"children":1057},{"style":807},[1058],{"type":510,"value":924},{"type":504,"tag":778,"props":1060,"children":1061},{"style":906},[1062],{"type":510,"value":909},{"type":504,"tag":778,"props":1064,"children":1065},{"style":807},[1066],{"type":510,"value":933},{"type":504,"tag":778,"props":1068,"children":1070},{"class":780,"line":1069},18,[1071],{"type":504,"tag":778,"props":1072,"children":1073},{"style":807},[1074],{"type":510,"value":942},{"type":504,"tag":778,"props":1076,"children":1078},{"class":780,"line":1077},19,[1079],{"type":504,"tag":778,"props":1080,"children":1081},{"emptyLinePlaceholder":949},[1082],{"type":510,"value":952},{"type":504,"tag":778,"props":1084,"children":1086},{"class":780,"line":1085},20,[1087],{"type":504,"tag":778,"props":1088,"children":1089},{"style":785},[1090],{"type":510,"value":1091},"\u002F\u002F In Host App's code\n",{"type":504,"tag":778,"props":1093,"children":1095},{"class":780,"line":1094},21,[1096,1101,1106,1111,1116,1121,1126,1131,1136,1141,1146],{"type":504,"tag":778,"props":1097,"children":1098},{"style":795},[1099],{"type":510,"value":1100},"const",{"type":504,"tag":778,"props":1102,"children":1103},{"style":906},[1104],{"type":510,"value":1105}," CheckoutButton",{"type":504,"tag":778,"props":1107,"children":1108},{"style":795},[1109],{"type":510,"value":1110}," =",{"type":504,"tag":778,"props":1112,"children":1113},{"style":807},[1114],{"type":510,"value":1115}," React.",{"type":504,"tag":778,"props":1117,"children":1118},{"style":801},[1119],{"type":510,"value":1120},"lazy",{"type":504,"tag":778,"props":1122,"children":1123},{"style":807},[1124],{"type":510,"value":1125},"(() ",{"type":504,"tag":778,"props":1127,"children":1128},{"style":795},[1129],{"type":510,"value":1130},"=>",{"type":504,"tag":778,"props":1132,"children":1133},{"style":795},[1134],{"type":510,"value":1135}," import",{"type":504,"tag":778,"props":1137,"children":1138},{"style":807},[1139],{"type":510,"value":1140},"(",{"type":504,"tag":778,"props":1142,"children":1143},{"style":822},[1144],{"type":510,"value":1145},"'checkout\u002FCheckoutButton'",{"type":504,"tag":778,"props":1147,"children":1148},{"style":807},[1149],{"type":510,"value":1150},"));\n",{"type":504,"tag":528,"props":1152,"children":1153},{},[],{"type":504,"tag":532,"props":1155,"children":1157},{"id":1156},"_3-微前端的治理难题与对策",[1158],{"type":510,"value":1159},"3. 微前端的治理难题与对策",{"type":504,"tag":615,"props":1161,"children":1163},{"id":1162},"a-样式隔离",[1164],{"type":510,"value":1165},"A. 样式隔离",{"type":504,"tag":516,"props":1167,"children":1168},{},[1169],{"type":510,"value":1170},"当多个团队的 CSS 被加载到同一个页面时，全局样式冲突几乎是不可避免的。",{"type":504,"tag":561,"props":1172,"children":1173},{},[1174,1184,1194,1212],{"type":504,"tag":565,"props":1175,"children":1176},{},[1177,1182],{"type":504,"tag":520,"props":1178,"children":1179},{},[1180],{"type":510,"value":1181},"对策 1: CSS-in-JS",{"type":510,"value":1183},"：像 Styled-components 或 Emotion 这样的库会为组件生成唯一的类名，天然地提供了作用域隔离。",{"type":504,"tag":565,"props":1185,"children":1186},{},[1187,1192],{"type":504,"tag":520,"props":1188,"children":1189},{},[1190],{"type":510,"value":1191},"对策 2: CSS Modules",{"type":510,"value":1193},"：与 CSS-in-JS 类似，但在构建时生成唯一的类名，没有运行时开销。",{"type":504,"tag":565,"props":1195,"children":1196},{},[1197,1202,1204,1210],{"type":504,"tag":520,"props":1198,"children":1199},{},[1200],{"type":510,"value":1201},"对策 3: Tailwind CSS + PostCSS 前缀",{"type":510,"value":1203},"：如果使用 Tailwind CSS，可以为每个微应用的 CSS 原子类添加一个独特的前缀（如 ",{"type":504,"tag":724,"props":1205,"children":1207},{"className":1206},[],[1208],{"type":510,"value":1209},"mfe1-text-blue-500",{"type":510,"value":1211},"），从而避免冲突。",{"type":504,"tag":565,"props":1213,"children":1214},{},[1215,1220],{"type":504,"tag":520,"props":1216,"children":1217},{},[1218],{"type":510,"value":1219},"对策 4: Shadow DOM",{"type":510,"value":1221},"：创建一个 Shadow Root，将微应用的整个 UI 封装在里面。这是最彻底的隔离方式，但也会带来新的复杂性（如事件冒泡、全局样式穿透）。",{"type":504,"tag":615,"props":1223,"children":1225},{"id":1224},"b-路由协作",[1226],{"type":510,"value":1227},"B. 路由协作",{"type":504,"tag":516,"props":1229,"children":1230},{},[1231],{"type":510,"value":1232},"如何让用户在不同的微应用之间导航，而 URL 保持一致和可预测？",{"type":504,"tag":561,"props":1234,"children":1235},{},[1236,1278],{"type":504,"tag":565,"props":1237,"children":1238},{},[1239,1244,1246,1251,1253],{"type":504,"tag":520,"props":1240,"children":1241},{},[1242],{"type":510,"value":1243},"方案",{"type":510,"value":1245},"：由",{"type":504,"tag":520,"props":1247,"children":1248},{},[1249],{"type":510,"value":1250},"宿主应用 (Host)",{"type":510,"value":1252}," 全权管理路由。宿主应用根据 URL 的路径前缀来决定加载哪个微应用。\n",{"type":504,"tag":561,"props":1254,"children":1255},{},[1256,1267],{"type":504,"tag":565,"props":1257,"children":1258},{},[1259,1265],{"type":504,"tag":724,"props":1260,"children":1262},{"className":1261},[],[1263],{"type":510,"value":1264},"\u002Fproducts\u002F*",{"type":510,"value":1266}," -> 加载产品微应用",{"type":504,"tag":565,"props":1268,"children":1269},{},[1270,1276],{"type":504,"tag":724,"props":1271,"children":1273},{"className":1272},[],[1274],{"type":510,"value":1275},"\u002Fcheckout\u002F*",{"type":510,"value":1277}," -> 加载结账微应用",{"type":504,"tag":565,"props":1279,"children":1280},{},[1281,1286,1288,1294],{"type":504,"tag":520,"props":1282,"children":1283},{},[1284],{"type":510,"value":1285},"实现",{"type":510,"value":1287},"：在宿主应用的 React Router 中配置路由，当匹配到特定路径时，动态加载对应的微应用组件。微应用内部可以有自己的子路由，但它必须在一个由宿主应用提供的基础路径 (",{"type":504,"tag":724,"props":1289,"children":1291},{"className":1290},[],[1292],{"type":510,"value":1293},"basename",{"type":510,"value":1295},") 下工作。",{"type":504,"tag":615,"props":1297,"children":1299},{"id":1298},"c-应用间通信",[1300],{"type":510,"value":1301},"C. 应用间通信",{"type":504,"tag":516,"props":1303,"children":1304},{},[1305],{"type":510,"value":1306},"虽然我们希望微应用是内聚的，但有时它们之间确实需要通信。",{"type":504,"tag":561,"props":1308,"children":1309},{},[1310,1320,1338,1354],{"type":504,"tag":565,"props":1311,"children":1312},{},[1313,1318],{"type":504,"tag":520,"props":1314,"children":1315},{},[1316],{"type":510,"value":1317},"对策 1: 通过 Props\u002FCallbacks (父子通信)",{"type":510,"value":1319},"：如果宿主应用渲染一个微应用组件，它可以通过 props 将数据和回调函数传递下去。这是最简单、最直接的方式。",{"type":504,"tag":565,"props":1321,"children":1322},{},[1323,1328,1330,1336],{"type":504,"tag":520,"props":1324,"children":1325},{},[1326],{"type":510,"value":1327},"对策 2: 自定义事件 (Custom Events)",{"type":510,"value":1329},"：一个微应用可以通过 ",{"type":504,"tag":724,"props":1331,"children":1333},{"className":1332},[],[1334],{"type":510,"value":1335},"window.dispatchEvent",{"type":510,"value":1337}," 派发一个自定义事件，其他微应用可以监听这个事件。这是一种松耦合的全局通信方式，但难以追踪和管理。",{"type":504,"tag":565,"props":1339,"children":1340},{},[1341,1346,1348,1353],{"type":504,"tag":520,"props":1342,"children":1343},{},[1344],{"type":510,"value":1345},"对策 3: 全局状态管理",{"type":510,"value":1347},"：可以创建一个共享的全局状态模块（如一个 Zustand store），并通过 Module Federation 将其共享。所有微应用都从同一个共享模块中导入 store，从而实现状态同步。",{"type":504,"tag":520,"props":1349,"children":1350},{},[1351],{"type":510,"value":1352},"这需要非常谨慎地设计，避免滥用导致微应用之间产生强耦合",{"type":510,"value":657},{"type":504,"tag":565,"props":1355,"children":1356},{},[1357,1362],{"type":504,"tag":520,"props":1358,"children":1359},{},[1360],{"type":510,"value":1361},"对策 4: 通过 URL 状态",{"type":510,"value":1363},"：将共享的状态反映在 URL 中，所有微应用监听 URL 变化并做出响应。",{"type":504,"tag":615,"props":1365,"children":1367},{"id":1366},"d-依赖共享与冲突",[1368],{"type":510,"value":1369},"D. 依赖共享与冲突",{"type":504,"tag":561,"props":1371,"children":1372},{},[1373,1419],{"type":504,"tag":565,"props":1374,"children":1375},{},[1376,1389,1391,1396,1397,1402,1403,1409,1411,1417],{"type":504,"tag":520,"props":1377,"children":1378},{},[1379,1381,1387],{"type":510,"value":1380},"Module Federation 的 ",{"type":504,"tag":724,"props":1382,"children":1384},{"className":1383},[],[1385],{"type":510,"value":1386},"shared",{"type":510,"value":1388}," 配置",{"type":510,"value":1390},"：这是解决依赖共享问题的关键。通过将核心库（",{"type":504,"tag":724,"props":1392,"children":1394},{"className":1393},[],[1395],{"type":510,"value":729},{"type":510,"value":731},{"type":504,"tag":724,"props":1398,"children":1400},{"className":1399},[],[1401],{"type":510,"value":737},{"type":510,"value":731},{"type":504,"tag":724,"props":1404,"children":1406},{"className":1405},[],[1407],{"type":510,"value":1408},"styled-components",{"type":510,"value":1410}," 等）标记为 ",{"type":504,"tag":724,"props":1412,"children":1414},{"className":1413},[],[1415],{"type":510,"value":1416},"singleton: true",{"type":510,"value":1418},"，可以强制所有微应用使用同一个实例，避免版本冲突和重复加载。",{"type":504,"tag":565,"props":1420,"children":1421},{},[1422,1427,1429,1435,1437,1443,1445,1451],{"type":504,"tag":520,"props":1423,"children":1424},{},[1425],{"type":510,"value":1426},"版本策略",{"type":510,"value":1428},"：团队之间需要就共享依赖的版本达成一致。使用 ",{"type":504,"tag":724,"props":1430,"children":1432},{"className":1431},[],[1433],{"type":510,"value":1434},"pnpm",{"type":510,"value":1436}," 或 ",{"type":504,"tag":724,"props":1438,"children":1440},{"className":1439},[],[1441],{"type":510,"value":1442},"yarn",{"type":510,"value":1444}," 的 ",{"type":504,"tag":724,"props":1446,"children":1448},{"className":1447},[],[1449],{"type":510,"value":1450},"resolutions",{"type":510,"value":1452}," 字段可以在 Monorepo 中强制锁定特定依赖的版本。",{"type":504,"tag":528,"props":1454,"children":1455},{},[],{"type":504,"tag":532,"props":1457,"children":1459},{"id":1458},"_4-推荐的开发模式monorepo",[1460],{"type":510,"value":1461},"4. 推荐的开发模式：Monorepo",{"type":504,"tag":516,"props":1463,"children":1464},{},[1465,1467,1472],{"type":510,"value":1466},"虽然微应用可以独立部署在不同的仓库中，但在一个 ",{"type":504,"tag":520,"props":1468,"children":1469},{},[1470],{"type":510,"value":1471},"Monorepo",{"type":510,"value":1473}," 中开发它们会带来巨大的好处：",{"type":504,"tag":561,"props":1475,"children":1476},{},[1477,1487,1497,1507],{"type":504,"tag":565,"props":1478,"children":1479},{},[1480,1485],{"type":504,"tag":520,"props":1481,"children":1482},{},[1483],{"type":510,"value":1484},"统一的开发体验",{"type":510,"value":1486},"：所有微应用都在一个地方，易于管理。",{"type":504,"tag":565,"props":1488,"children":1489},{},[1490,1495],{"type":504,"tag":520,"props":1491,"children":1492},{},[1493],{"type":510,"value":1494},"本地链接",{"type":510,"value":1496},"：通过 pnpm\u002Fyarn workspaces，可以轻松地在本地开发和调试依赖于其他本地包的微应用。",{"type":504,"tag":565,"props":1498,"children":1499},{},[1500,1505],{"type":504,"tag":520,"props":1501,"children":1502},{},[1503],{"type":510,"value":1504},"原子化变更",{"type":510,"value":1506},"：需要同时修改多个微应用的变更，可以通过一次 PR 完成。",{"type":504,"tag":565,"props":1508,"children":1509},{},[1510,1515],{"type":504,"tag":520,"props":1511,"children":1512},{},[1513],{"type":510,"value":1514},"共享类型",{"type":510,"value":1516},"：在 Monorepo 中共享 TypeScript 类型定义变得非常简单。",{"type":504,"tag":516,"props":1518,"children":1519},{},[1520],{"type":510,"value":1521},"将 Module Federation 与 Monorepo 结合，是目前构建和治理微前端项目的最佳实践。",{"type":504,"tag":528,"props":1523,"children":1524},{},[],{"type":504,"tag":532,"props":1526,"children":1528},{"id":1527},"_5-关联阅读",[1529],{"type":510,"value":1530},"5. 关联阅读",{"type":504,"tag":561,"props":1532,"children":1533},{},[1534,1552,1568],{"type":504,"tag":565,"props":1535,"children":1536},{},[1537,1542,1543],{"type":504,"tag":520,"props":1538,"children":1539},{},[1540],{"type":510,"value":1541},"Webpack 官方文档",{"type":510,"value":871},{"type":504,"tag":1544,"props":1545,"children":1549},"a",{"href":1546,"rel":1547},"https:\u002F\u002Fwebpack.js.org\u002Fconcepts\u002Fmodule-federation\u002F",[1548],"nofollow",[1550],{"type":510,"value":1551},"Module Federation",{"type":504,"tag":565,"props":1553,"children":1554},{},[1555,1560,1561],{"type":504,"tag":520,"props":1556,"children":1557},{},[1558],{"type":510,"value":1559},"Martin Fowler",{"type":510,"value":871},{"type":504,"tag":1544,"props":1562,"children":1565},{"href":1563,"rel":1564},"https:\u002F\u002Fmartinfowler.com\u002Farticles\u002Fmicro-frontends.html",[1548],[1566],{"type":510,"value":1567},"Micro Frontends",{"type":504,"tag":565,"props":1569,"children":1570},{},[1571,1576,1578],{"type":504,"tag":520,"props":1572,"children":1573},{},[1574],{"type":510,"value":1575},"Single-SPA",{"type":510,"value":1577},": 一个流行的微前端框架，提供了另一种实现思路 ",{"type":504,"tag":1544,"props":1579,"children":1582},{"href":1580,"rel":1581},"https:\u002F\u002Fsingle-spa.js.org\u002F",[1548],[1583],{"type":510,"value":1584},"single-spa.js.org",{"type":504,"tag":1586,"props":1587,"children":1588},"style",{},[1589],{"type":510,"value":1590},"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 .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);}",{"title":772,"searchDepth":791,"depth":791,"links":1592},[1593,1594,1597,1603,1604],{"id":534,"depth":791,"text":537},{"id":610,"depth":791,"text":613,"children":1595},[1596],{"id":617,"depth":813,"text":620},{"id":1156,"depth":791,"text":1159,"children":1598},[1599,1600,1601,1602],{"id":1162,"depth":813,"text":1165},{"id":1224,"depth":813,"text":1227},{"id":1298,"depth":813,"text":1301},{"id":1366,"depth":813,"text":1369},{"id":1458,"depth":791,"text":1461},{"id":1527,"depth":791,"text":1530},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1606},"\u003Cpath fill=\"currentColor\" d=\"m10.828 12l4.95 4.95l-1.414 1.415L8 12l6.364-6.364l1.414 1.414z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1608},"\u003Cpath fill=\"currentColor\" d=\"M3 4h18v2H3zm0 7h12v2H3zm0 7h18v2H3z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1610},"\u003Cpath fill=\"currentColor\" d=\"m13.172 12l-4.95-4.95l1.414-1.413L16 12l-6.364 6.364l-1.414-1.415z\"\u002F>",{"left":4,"top":4,"width":1612,"height":1612,"rotate":4,"vFlip":6,"hFlip":6,"body":1613},1024,"\u003Cpath fill=\"currentColor\" d=\"M768 832a128 128 0 0 1-128 128H192A128 128 0 0 1 64 832V384a128 128 0 0 1 128-128v64a64 64 0 0 0-64 64v448a64 64 0 0 0 64 64h448a64 64 0 0 0 64-64z\"\u002F>\u003Cpath fill=\"currentColor\" d=\"M384 128a64 64 0 0 0-64 64v448a64 64 0 0 0 64 64h448a64 64 0 0 0 64-64V192a64 64 0 0 0-64-64zm0-64h448a128 128 0 0 1 128 128v448a128 128 0 0 1-128 128H384a128 128 0 0 1-128-128V192A128 128 0 0 1 384 64\"\u002F>"]