[{"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-15-engineering-and-architecture\u002F01-component-system-and-design-system":494,"i-ri:arrow-left-s-line":1604,"i-ri:menu-2-line":1606,"i-ri:arrow-right-s-line":1608},{"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":451,"path":451,"title":452,"updatedAt":21,"meta":498,"body":500,"toc":1585},"bm90ZTpub3Rlcy9yZWFjdC8xNS1lbmdpbmVlcmluZy1hbmQtYXJjaGl0ZWN0dXJlLzAxLWNvbXBvbmVudC1zeXN0ZW0tYW5kLWRlc2lnbi1zeXN0ZW0ubWQ","note","notes\u002Freact\u002F15-engineering-and-architecture\u002F01-component-system-and-design-system.md",{"id":495,"type":496,"sourcePath":497,"slug":499,"title":452,"updatedAt":21,"lastUpdated":21},"react\u002F15-engineering-and-architecture\u002F01-component-system-and-design-system",{"type":501,"children":502},"root",[503,511,527,531,538,543,550,678,684,808,814,915,921,965,971,992,995,1001,1006,1095,1098,1104,1109,1322,1332,1335,1341,1346,1352,1446,1452,1462,1505,1508,1514],{"type":504,"tag":505,"props":506,"children":508},"element","h1",{"id":507},"组件体系与设计系统构建规模化前端的基石",[509],{"type":510,"value":452},"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},"：建立一个分层清晰、边界明确、由设计系统驱动的组件体系，是解决大型应用 UI 开发中“混乱、重复、不一致”三大顽疾的系统性方案，它能极大提升开发效率与产品体验。",{"type":504,"tag":528,"props":529,"children":530},"hr",{},[],{"type":504,"tag":532,"props":533,"children":535},"h2",{"id":534},"_1-组件体系的分层-layering-the-system",[536],{"type":510,"value":537},"1. 组件体系的分层 (Layering the System)",{"type":504,"tag":516,"props":539,"children":540},{},[541],{"type":510,"value":542},"一个健康的组件体系不是扁平的，而是像金字塔一样分层。每一层都有清晰的职责，上层复用下层。",{"type":504,"tag":544,"props":545,"children":547},"h3",{"id":546},"a-原子基础组件-atoms-base-components",[548],{"type":510,"value":549},"A. 原子\u002F基础组件 (Atoms \u002F Base Components)",{"type":504,"tag":551,"props":552,"children":553},"ul",{},[554,565,613],{"type":504,"tag":555,"props":556,"children":557},"li",{},[558,563],{"type":504,"tag":520,"props":559,"children":560},{},[561],{"type":510,"value":562},"定义",{"type":510,"value":564},"：UI 中最基础、不可再分的元素。它们是构成一切的“原子”。",{"type":504,"tag":555,"props":566,"children":567},{},[568,573,575,582,584,590,591,597,598,604,605,611],{"type":504,"tag":520,"props":569,"children":570},{},[571],{"type":510,"value":572},"示例",{"type":510,"value":574},"：",{"type":504,"tag":576,"props":577,"children":579},"code",{"className":578},[],[580],{"type":510,"value":581},"Button",{"type":510,"value":583},", ",{"type":504,"tag":576,"props":585,"children":587},{"className":586},[],[588],{"type":510,"value":589},"Input",{"type":510,"value":583},{"type":504,"tag":576,"props":592,"children":594},{"className":593},[],[595],{"type":510,"value":596},"Icon",{"type":510,"value":583},{"type":504,"tag":576,"props":599,"children":601},{"className":600},[],[602],{"type":510,"value":603},"Avatar",{"type":510,"value":583},{"type":504,"tag":576,"props":606,"children":608},{"className":607},[],[609],{"type":510,"value":610},"Checkbox",{"type":510,"value":612},"。",{"type":504,"tag":555,"props":614,"children":615},{},[616,621,623],{"type":504,"tag":520,"props":617,"children":618},{},[619],{"type":510,"value":620},"职责",{"type":510,"value":622},"：\n",{"type":504,"tag":551,"props":624,"children":625},{},[626,636,646],{"type":504,"tag":555,"props":627,"children":628},{},[629,634],{"type":504,"tag":520,"props":630,"children":631},{},[632],{"type":510,"value":633},"样式封装",{"type":510,"value":635},"：封装最基础的样式和交互（如 hover, focus, disabled 状态）。",{"type":504,"tag":555,"props":637,"children":638},{},[639,644],{"type":504,"tag":520,"props":640,"children":641},{},[642],{"type":510,"value":643},"无业务逻辑",{"type":510,"value":645},"：完全不包含任何业务逻辑。",{"type":504,"tag":555,"props":647,"children":648},{},[649,654,656,662,663,669,670,676],{"type":504,"tag":520,"props":650,"children":651},{},[652],{"type":510,"value":653},"通过 props 控制",{"type":510,"value":655},"：所有状态（如 ",{"type":504,"tag":576,"props":657,"children":659},{"className":658},[],[660],{"type":510,"value":661},"loading",{"type":510,"value":583},{"type":504,"tag":576,"props":664,"children":666},{"className":665},[],[667],{"type":510,"value":668},"size",{"type":510,"value":583},{"type":504,"tag":576,"props":671,"children":673},{"className":672},[],[674],{"type":510,"value":675},"variant",{"type":510,"value":677},"）都通过 props 传入。",{"type":504,"tag":544,"props":679,"children":681},{"id":680},"b-分子复合组件-molecules-composite-components",[682],{"type":510,"value":683},"B. 分子\u002F复合组件 (Molecules \u002F Composite Components)",{"type":504,"tag":551,"props":685,"children":686},{},[687,696,760],{"type":504,"tag":555,"props":688,"children":689},{},[690,694],{"type":504,"tag":520,"props":691,"children":692},{},[693],{"type":510,"value":562},{"type":510,"value":695},"：由多个基础组件组合而成，构成一个有具体功能的小单元。",{"type":504,"tag":555,"props":697,"children":698},{},[699,703,704,710,712,717,719,724,726,732,733,738,739,745,747,752,753,759],{"type":504,"tag":520,"props":700,"children":701},{},[702],{"type":510,"value":572},{"type":510,"value":574},{"type":504,"tag":576,"props":705,"children":707},{"className":706},[],[708],{"type":510,"value":709},"SearchForm",{"type":510,"value":711}," (由 ",{"type":504,"tag":576,"props":713,"children":715},{"className":714},[],[716],{"type":510,"value":589},{"type":510,"value":718}," 和 ",{"type":504,"tag":576,"props":720,"children":722},{"className":721},[],[723],{"type":510,"value":581},{"type":510,"value":725}," 组成), ",{"type":504,"tag":576,"props":727,"children":729},{"className":728},[],[730],{"type":510,"value":731},"Alert",{"type":510,"value":711},{"type":504,"tag":576,"props":734,"children":736},{"className":735},[],[737],{"type":510,"value":596},{"type":510,"value":583},{"type":504,"tag":576,"props":740,"children":742},{"className":741},[],[743],{"type":510,"value":744},"Typography",{"type":510,"value":746},", 和 ",{"type":504,"tag":576,"props":748,"children":750},{"className":749},[],[751],{"type":510,"value":581},{"type":510,"value":725},{"type":504,"tag":576,"props":754,"children":756},{"className":755},[],[757],{"type":510,"value":758},"Pagination",{"type":510,"value":612},{"type":504,"tag":555,"props":761,"children":762},{},[763,767,768],{"type":504,"tag":520,"props":764,"children":765},{},[766],{"type":510,"value":620},{"type":510,"value":622},{"type":504,"tag":551,"props":769,"children":770},{},[771,781,799],{"type":504,"tag":555,"props":772,"children":773},{},[774,779],{"type":504,"tag":520,"props":775,"children":776},{},[777],{"type":510,"value":778},"组合与布局",{"type":510,"value":780},"：将基础组件按特定方式组合和布局。",{"type":504,"tag":555,"props":782,"children":783},{},[784,789,791,797],{"type":504,"tag":520,"props":785,"children":786},{},[787],{"type":510,"value":788},"轻量状态管理",{"type":510,"value":790},"：可能包含一些自身的 UI 状态（例如，一个 ",{"type":504,"tag":576,"props":792,"children":794},{"className":793},[],[795],{"type":510,"value":796},"Dropdown",{"type":510,"value":798}," 组件需要管理自己的展开\u002F折叠状态）。",{"type":504,"tag":555,"props":800,"children":801},{},[802,807],{"type":504,"tag":520,"props":803,"children":804},{},[805],{"type":510,"value":806},"仍然是通用、无业务的",{"type":510,"value":612},{"type":504,"tag":544,"props":809,"children":811},{"id":810},"c-组织区块组件-organisms-block-components",[812],{"type":510,"value":813},"C. 组织\u002F区块组件 (Organisms \u002F Block Components)",{"type":504,"tag":551,"props":815,"children":816},{},[817,826,862],{"type":504,"tag":555,"props":818,"children":819},{},[820,824],{"type":504,"tag":520,"props":821,"children":822},{},[823],{"type":510,"value":562},{"type":510,"value":825},"：由多个基础或复合组件组合而成，构成一个页面中相对独立的、复杂的区域。",{"type":504,"tag":555,"props":827,"children":828},{},[829,833,834,840,841,847,848,854,855,861],{"type":504,"tag":520,"props":830,"children":831},{},[832],{"type":510,"value":572},{"type":510,"value":574},{"type":504,"tag":576,"props":835,"children":837},{"className":836},[],[838],{"type":510,"value":839},"Header",{"type":510,"value":583},{"type":504,"tag":576,"props":842,"children":844},{"className":843},[],[845],{"type":510,"value":846},"ProductCard",{"type":510,"value":583},{"type":504,"tag":576,"props":849,"children":851},{"className":850},[],[852],{"type":510,"value":853},"CommentList",{"type":510,"value":583},{"type":504,"tag":576,"props":856,"children":858},{"className":857},[],[859],{"type":510,"value":860},"DataTable",{"type":510,"value":612},{"type":504,"tag":555,"props":863,"children":864},{},[865,869,870],{"type":504,"tag":520,"props":866,"children":867},{},[868],{"type":510,"value":620},{"type":510,"value":622},{"type":504,"tag":551,"props":871,"children":872},{},[873,890],{"type":504,"tag":555,"props":874,"children":875},{},[876,881,883,888],{"type":504,"tag":520,"props":877,"children":878},{},[879],{"type":510,"value":880},"上下文感知",{"type":510,"value":882},"：开始与数据和业务逻辑产生关联。一个 ",{"type":504,"tag":576,"props":884,"children":886},{"className":885},[],[887],{"type":510,"value":860},{"type":510,"value":889}," 可能需要接收数据、处理排序和筛选。",{"type":504,"tag":555,"props":891,"children":892},{},[893,898,900,905,907,913],{"type":504,"tag":520,"props":894,"children":895},{},[896],{"type":510,"value":897},"数据获取与传递",{"type":510,"value":899},"：通常是数据注入的边界，例如，一个 ",{"type":504,"tag":576,"props":901,"children":903},{"className":902},[],[904],{"type":510,"value":853},{"type":510,"value":906}," 内部会获取评论数据并传递给 ",{"type":504,"tag":576,"props":908,"children":910},{"className":909},[],[911],{"type":510,"value":912},"CommentItem",{"type":510,"value":914},"（分子）。",{"type":504,"tag":544,"props":916,"children":918},{"id":917},"d-模板页面布局-templates-layouts",[919],{"type":510,"value":920},"D. 模板\u002F页面布局 (Templates \u002F Layouts)",{"type":504,"tag":551,"props":922,"children":923},{},[924,933,956],{"type":504,"tag":555,"props":925,"children":926},{},[927,931],{"type":504,"tag":520,"props":928,"children":929},{},[930],{"type":510,"value":562},{"type":510,"value":932},"：定义了页面的宏观布局结构，但不包含具体内容。它们是页面的“骨架”。",{"type":504,"tag":555,"props":934,"children":935},{},[936,940,941,947,948,954],{"type":504,"tag":520,"props":937,"children":938},{},[939],{"type":510,"value":572},{"type":510,"value":574},{"type":504,"tag":576,"props":942,"children":944},{"className":943},[],[945],{"type":510,"value":946},"TwoColumnLayout",{"type":510,"value":583},{"type":504,"tag":576,"props":949,"children":951},{"className":950},[],[952],{"type":510,"value":953},"DashboardLayout",{"type":510,"value":955}," (包含侧边栏和主内容区)。",{"type":504,"tag":555,"props":957,"children":958},{},[959,963],{"type":504,"tag":520,"props":960,"children":961},{},[962],{"type":510,"value":620},{"type":510,"value":964},"：提供页面级别的插槽 (slots)，让页面组件可以把内容“填充”进去。",{"type":504,"tag":544,"props":966,"children":968},{"id":967},"e-页面-pages",[969],{"type":510,"value":970},"E. 页面 (Pages)",{"type":504,"tag":551,"props":972,"children":973},{},[974,983],{"type":504,"tag":555,"props":975,"children":976},{},[977,981],{"type":504,"tag":520,"props":978,"children":979},{},[980],{"type":510,"value":562},{"type":510,"value":982},"：一个具体的页面实例，将区块组件和布局组合在一起，并注入真实的业务数据和逻辑。",{"type":504,"tag":555,"props":984,"children":985},{},[986,990],{"type":504,"tag":520,"props":987,"children":988},{},[989],{"type":510,"value":620},{"type":510,"value":991},"：连接路由、获取页面级数据、处理页面级状态和业务逻辑。",{"type":504,"tag":528,"props":993,"children":994},{},[],{"type":504,"tag":532,"props":996,"children":998},{"id":997},"_2-复用边界何时抽象",[999],{"type":510,"value":1000},"2. 复用边界：何时抽象？",{"type":504,"tag":516,"props":1002,"children":1003},{},[1004],{"type":510,"value":1005},"过度抽象和过少抽象同样有害。定义清晰的复用边界至关重要。",{"type":504,"tag":551,"props":1007,"children":1008},{},[1009,1019,1052],{"type":504,"tag":555,"props":1010,"children":1011},{},[1012,1017],{"type":504,"tag":520,"props":1013,"children":1014},{},[1015],{"type":510,"value":1016},"“三次法则” (Rule of Three)",{"type":510,"value":1018},"：当一段 UI 或逻辑在三个或更多地方出现时，就应该考虑将其抽象成一个独立的组件。",{"type":504,"tag":555,"props":1020,"children":1021},{},[1022,1027,1029],{"type":504,"tag":520,"props":1023,"children":1024},{},[1025],{"type":510,"value":1026},"通用性 vs. 特定性",{"type":510,"value":1028},"：在抽象时，思考这个组件是真正通用的，还是只是看起来相似但服务于非常特定的业务场景？\n",{"type":504,"tag":551,"props":1030,"children":1031},{},[1032,1042],{"type":504,"tag":555,"props":1033,"children":1034},{},[1035,1040],{"type":504,"tag":520,"props":1036,"children":1037},{},[1038],{"type":510,"value":1039},"通用组件",{"type":510,"value":1041},"：通过 props 设计使其灵活，适应不同场景。",{"type":504,"tag":555,"props":1043,"children":1044},{},[1045,1050],{"type":504,"tag":520,"props":1046,"children":1047},{},[1048],{"type":510,"value":1049},"特定组件",{"type":510,"value":1051},"：不要强行抽象。保持其局部性，甚至可以接受少量代码重复，这比创建一个“错误”的、难以维护的抽象要好。",{"type":504,"tag":555,"props":1053,"children":1054},{},[1055,1060,1062],{"type":504,"tag":520,"props":1056,"children":1057},{},[1058],{"type":510,"value":1059},"所有权 (Ownership)",{"type":510,"value":1061},"：这个组件属于谁？\n",{"type":504,"tag":551,"props":1063,"children":1064},{},[1065,1075,1085],{"type":504,"tag":555,"props":1066,"children":1067},{},[1068,1073],{"type":504,"tag":520,"props":1069,"children":1070},{},[1071],{"type":510,"value":1072},"共享组件库",{"type":510,"value":1074},"：通用性高、业务无关的组件（原子、分子）。",{"type":504,"tag":555,"props":1076,"children":1077},{},[1078,1083],{"type":504,"tag":520,"props":1079,"children":1080},{},[1081],{"type":510,"value":1082},"业务领域",{"type":510,"value":1084},"：与特定业务领域强相关的组件（组织）。",{"type":504,"tag":555,"props":1086,"children":1087},{},[1088,1093],{"type":504,"tag":520,"props":1089,"children":1090},{},[1091],{"type":510,"value":1092},"页面级别",{"type":510,"value":1094},"：一次性的、仅用于某个页面的组件。",{"type":504,"tag":528,"props":1096,"children":1097},{},[],{"type":504,"tag":532,"props":1099,"children":1101},{"id":1100},"_3-样式策略-styling-strategy",[1102],{"type":510,"value":1103},"3. 样式策略 (Styling Strategy)",{"type":504,"tag":516,"props":1105,"children":1106},{},[1107],{"type":510,"value":1108},"选择合适的样式方案对组件体系的可维护性至关重要。",{"type":504,"tag":1110,"props":1111,"children":1112},"table",{},[1113,1143],{"type":504,"tag":1114,"props":1115,"children":1116},"thead",{},[1117],{"type":504,"tag":1118,"props":1119,"children":1120},"tr",{},[1121,1128,1133,1138],{"type":504,"tag":1122,"props":1123,"children":1125},"th",{"align":1124},"left",[1126],{"type":510,"value":1127},"方案",{"type":504,"tag":1122,"props":1129,"children":1130},{"align":1124},[1131],{"type":510,"value":1132},"优点",{"type":504,"tag":1122,"props":1134,"children":1135},{"align":1124},[1136],{"type":510,"value":1137},"缺点",{"type":504,"tag":1122,"props":1139,"children":1140},{"align":1124},[1141],{"type":510,"value":1142},"适用场景",{"type":504,"tag":1144,"props":1145,"children":1146},"tbody",{},[1147,1207,1264],{"type":504,"tag":1118,"props":1148,"children":1149},{},[1150,1161,1185,1202],{"type":504,"tag":1151,"props":1152,"children":1153},"td",{"align":1124},[1154,1159],{"type":504,"tag":520,"props":1155,"children":1156},{},[1157],{"type":510,"value":1158},"CSS-in-JS",{"type":510,"value":1160}," (e.g., Styled-components, Emotion)",{"type":504,"tag":1151,"props":1162,"children":1163},{"align":1124},[1164,1169,1171,1176,1178,1183],{"type":504,"tag":520,"props":1165,"children":1166},{},[1167],{"type":510,"value":1168},"组件化",{"type":510,"value":1170},"：样式与组件逻辑绑定，作用域隔离。",{"type":504,"tag":520,"props":1172,"children":1173},{},[1174],{"type":510,"value":1175},"动态样式",{"type":510,"value":1177},"：基于 props 动态生成 CSS。",{"type":504,"tag":520,"props":1179,"children":1180},{},[1181],{"type":510,"value":1182},"DX 好",{"type":510,"value":1184},"：在 JS 中写 CSS。",{"type":504,"tag":1151,"props":1186,"children":1187},{"align":1124},[1188,1193,1195,1200],{"type":504,"tag":520,"props":1189,"children":1190},{},[1191],{"type":510,"value":1192},"运行时开销",{"type":510,"value":1194},"：需要在运行时解析 JS 生成 CSS，可能影响性能。",{"type":504,"tag":520,"props":1196,"children":1197},{},[1198],{"type":510,"value":1199},"Bundle 体积",{"type":510,"value":1201},"：增加 JS bundle 大小。",{"type":504,"tag":1151,"props":1203,"children":1204},{"align":1124},[1205],{"type":510,"value":1206},"需要大量基于 props 的动态样式、对 JS 开发体验要求高的团队。",{"type":504,"tag":1118,"props":1208,"children":1209},{},[1210,1218,1242,1259],{"type":504,"tag":1151,"props":1211,"children":1212},{"align":1124},[1213],{"type":504,"tag":520,"props":1214,"children":1215},{},[1216],{"type":510,"value":1217},"Tailwind CSS",{"type":504,"tag":1151,"props":1219,"children":1220},{"align":1124},[1221,1226,1228,1233,1235,1240],{"type":504,"tag":520,"props":1222,"children":1223},{},[1224],{"type":510,"value":1225},"开发效率高",{"type":510,"value":1227},"：通过原子类快速构建 UI。",{"type":504,"tag":520,"props":1229,"children":1230},{},[1231],{"type":510,"value":1232},"性能好",{"type":510,"value":1234},"：最终生成极小的 CSS 文件。",{"type":504,"tag":520,"props":1236,"children":1237},{},[1238],{"type":510,"value":1239},"约束性强",{"type":510,"value":1241},"：强制使用设计系统中的值。",{"type":504,"tag":1151,"props":1243,"children":1244},{"align":1124},[1245,1250,1252,1257],{"type":504,"tag":520,"props":1246,"children":1247},{},[1248],{"type":510,"value":1249},"HTML 臃肿",{"type":510,"value":1251},"：类名非常长。",{"type":504,"tag":520,"props":1253,"children":1254},{},[1255],{"type":510,"value":1256},"学习曲线",{"type":510,"value":1258},"：需要记忆原子类。",{"type":504,"tag":1151,"props":1260,"children":1261},{"align":1124},[1262],{"type":510,"value":1263},"追求极致开发效率和性能、推崇 Utility-First 理念的团队。",{"type":504,"tag":1118,"props":1265,"children":1266},{},[1267,1275,1292,1317],{"type":504,"tag":1151,"props":1268,"children":1269},{"align":1124},[1270],{"type":504,"tag":520,"props":1271,"children":1272},{},[1273],{"type":510,"value":1274},"CSS Modules",{"type":504,"tag":1151,"props":1276,"children":1277},{"align":1124},[1278,1283,1285,1290],{"type":504,"tag":520,"props":1279,"children":1280},{},[1281],{"type":510,"value":1282},"作用域隔离",{"type":510,"value":1284},"：自动为类名生成唯一 hash，无全局污染。",{"type":504,"tag":520,"props":1286,"children":1287},{},[1288],{"type":510,"value":1289},"零运行时",{"type":510,"value":1291},"：纯静态 CSS，无性能开销。",{"type":504,"tag":1151,"props":1293,"children":1294},{"align":1124},[1295,1300,1302,1308,1310,1315],{"type":504,"tag":520,"props":1296,"children":1297},{},[1298],{"type":510,"value":1299},"动态样式麻烦",{"type":510,"value":1301},"：需要通过 JS 操作 ",{"type":504,"tag":576,"props":1303,"children":1305},{"className":1304},[],[1306],{"type":510,"value":1307},"style",{"type":510,"value":1309}," 属性或切换 class。",{"type":504,"tag":520,"props":1311,"children":1312},{},[1313],{"type":510,"value":1314},"DX 一般",{"type":510,"value":1316},"：需要在 JS 和 CSS 文件间切换。",{"type":504,"tag":1151,"props":1318,"children":1319},{"align":1124},[1320],{"type":510,"value":1321},"对运行时性能要求极高、偏爱原生 CSS 和 webpack 生态的团队。",{"type":504,"tag":516,"props":1323,"children":1324},{},[1325,1330],{"type":504,"tag":520,"props":1326,"children":1327},{},[1328],{"type":510,"value":1329},"现代趋势",{"type":510,"value":1331},"：许多团队正在从 CSS-in-JS 转向零运行时的方案，如 Tailwind CSS 或使用编译时 CSS-in-JS 库（如 Linaria, vanilla-extract）。",{"type":504,"tag":528,"props":1333,"children":1334},{},[],{"type":504,"tag":532,"props":1336,"children":1338},{"id":1337},"_4-设计系统-design-system",[1339],{"type":510,"value":1340},"4. 设计系统 (Design System)",{"type":504,"tag":516,"props":1342,"children":1343},{},[1344],{"type":510,"value":1345},"设计系统是组件体系的“灵魂”和“说明书”。它不仅仅是一个组件库。",{"type":504,"tag":544,"props":1347,"children":1349},{"id":1348},"a-核心构成",[1350],{"type":510,"value":1351},"A. 核心构成",{"type":504,"tag":1353,"props":1354,"children":1355},"ol",{},[1356,1366,1416,1426,1436],{"type":504,"tag":555,"props":1357,"children":1358},{},[1359,1364],{"type":504,"tag":520,"props":1360,"children":1361},{},[1362],{"type":510,"value":1363},"设计语言\u002F原则 (Design Language\u002FPrinciples)",{"type":510,"value":1365},"：定义品牌、价值观和设计的基本原则。",{"type":504,"tag":555,"props":1367,"children":1368},{},[1369,1374,1376],{"type":504,"tag":520,"props":1370,"children":1371},{},[1372],{"type":510,"value":1373},"设计令牌 (Design Tokens)",{"type":510,"value":1375},"：设计的原子单位。将颜色、间距、字体大小、阴影等硬编码的值抽象成与具体实现无关的“令牌”。",{"type":504,"tag":551,"props":1377,"children":1378},{},[1379,1388,1397,1406],{"type":504,"tag":555,"props":1380,"children":1381},{},[1382],{"type":504,"tag":576,"props":1383,"children":1385},{"className":1384},[],[1386],{"type":510,"value":1387},"color-primary-500: #3b82f6",{"type":504,"tag":555,"props":1389,"children":1390},{},[1391],{"type":504,"tag":576,"props":1392,"children":1394},{"className":1393},[],[1395],{"type":510,"value":1396},"spacing-4: 1rem",{"type":504,"tag":555,"props":1398,"children":1399},{},[1400],{"type":504,"tag":576,"props":1401,"children":1403},{"className":1402},[],[1404],{"type":510,"value":1405},"font-size-lg: 1.125rem",{"type":504,"tag":555,"props":1407,"children":1408},{},[1409,1414],{"type":504,"tag":520,"props":1410,"children":1411},{},[1412],{"type":510,"value":1413},"优势",{"type":510,"value":1415},"：实现技术无关（可在 CSS, JS, iOS, Android 间共享），一处修改，处处生效（如实现暗黑模式）。",{"type":504,"tag":555,"props":1417,"children":1418},{},[1419,1424],{"type":504,"tag":520,"props":1420,"children":1421},{},[1422],{"type":510,"value":1423},"组件库 (Component Library)",{"type":510,"value":1425},"：上文提到的组件体系的实现，通常在一个独立的环境中开发和展示。",{"type":504,"tag":555,"props":1427,"children":1428},{},[1429,1434],{"type":504,"tag":520,"props":1430,"children":1431},{},[1432],{"type":510,"value":1433},"模式与指南 (Patterns & Guidelines)",{"type":510,"value":1435},"：如何使用组件来解决常见的设计问题（如表单设计、数据展示、空状态处理）。提供最佳实践。",{"type":504,"tag":555,"props":1437,"children":1438},{},[1439,1444],{"type":504,"tag":520,"props":1440,"children":1441},{},[1442],{"type":510,"value":1443},"文档网站 (Documentation Site)",{"type":510,"value":1445},"：将以上所有内容整合在一起，提供给设计师和开发者使用。",{"type":504,"tag":544,"props":1447,"children":1449},{"id":1448},"b-工具链storybook",[1450],{"type":510,"value":1451},"B. 工具链：Storybook",{"type":504,"tag":516,"props":1453,"children":1454},{},[1455,1460],{"type":504,"tag":520,"props":1456,"children":1457},{},[1458],{"type":510,"value":1459},"Storybook",{"type":510,"value":1461}," 是构建、测试和文档化 UI 组件的行业标准工具。",{"type":504,"tag":551,"props":1463,"children":1464},{},[1465,1475,1485,1495],{"type":504,"tag":555,"props":1466,"children":1467},{},[1468,1473],{"type":504,"tag":520,"props":1469,"children":1470},{},[1471],{"type":510,"value":1472},"独立开发环境",{"type":510,"value":1474},"：让你在应用之外孤立地开发和测试组件。",{"type":504,"tag":555,"props":1476,"children":1477},{},[1478,1483],{"type":504,"tag":520,"props":1479,"children":1480},{},[1481],{"type":510,"value":1482},"可视化测试",{"type":510,"value":1484},"：交互式地查看组件在不同 props 和状态下的表现。",{"type":504,"tag":555,"props":1486,"children":1487},{},[1488,1493],{"type":504,"tag":520,"props":1489,"children":1490},{},[1491],{"type":510,"value":1492},"自动生成文档",{"type":510,"value":1494},"：从组件的 props, JSDoc 中自动生成文档。",{"type":504,"tag":555,"props":1496,"children":1497},{},[1498,1503],{"type":504,"tag":520,"props":1499,"children":1500},{},[1501],{"type":510,"value":1502},"插件生态",{"type":510,"value":1504},"：通过插件支持 A11y 测试、响应式预览、设计集成等。",{"type":504,"tag":528,"props":1506,"children":1507},{},[],{"type":504,"tag":532,"props":1509,"children":1511},{"id":1510},"_5-关联阅读",[1512],{"type":510,"value":1513},"5. 关联阅读",{"type":504,"tag":551,"props":1515,"children":1516},{},[1517,1536,1553,1569],{"type":504,"tag":555,"props":1518,"children":1519},{},[1520,1525,1527],{"type":504,"tag":520,"props":1521,"children":1522},{},[1523],{"type":510,"value":1524},"原子设计理论 (Atomic Design)",{"type":510,"value":1526}," by Brad Frost: ",{"type":504,"tag":1528,"props":1529,"children":1533},"a",{"href":1530,"rel":1531},"https:\u002F\u002Fatomicdesign.bradfrost.com\u002F",[1532],"nofollow",[1534],{"type":510,"value":1535},"atomicdesign.bradfrost.com",{"type":504,"tag":555,"props":1537,"children":1538},{},[1539,1544,1546],{"type":504,"tag":520,"props":1540,"children":1541},{},[1542],{"type":510,"value":1543},"Storybook 官方文档",{"type":510,"value":1545},": ",{"type":504,"tag":1528,"props":1547,"children":1550},{"href":1548,"rel":1549},"https:\u002F\u002Fstorybook.js.org\u002Fdocs\u002Freact\u002Fget-started\u002Fintroduction",[1532],[1551],{"type":510,"value":1552},"storybook.js.org",{"type":504,"tag":555,"props":1554,"children":1555},{},[1556,1561,1562],{"type":504,"tag":520,"props":1557,"children":1558},{},[1559],{"type":510,"value":1560},"Design Tokens W3C 社区组",{"type":510,"value":1545},{"type":504,"tag":1528,"props":1563,"children":1566},{"href":1564,"rel":1565},"https:\u002F\u002Fwww.w3.org\u002Fcommunity\u002Fdesign-tokens\u002F",[1532],[1567],{"type":510,"value":1568},"designtokens.org",{"type":504,"tag":555,"props":1570,"children":1571},{},[1572,1577,1578],{"type":504,"tag":520,"props":1573,"children":1574},{},[1575],{"type":510,"value":1576},"Tailwind CSS 官网",{"type":510,"value":1545},{"type":504,"tag":1528,"props":1579,"children":1582},{"href":1580,"rel":1581},"https:\u002F\u002Ftailwindcss.com\u002F",[1532],[1583],{"type":510,"value":1584},"tailwindcss.com",{"title":1586,"searchDepth":1587,"depth":1587,"links":1588},"",2,[1589,1597,1598,1599,1603],{"id":534,"depth":1587,"text":537,"children":1590},[1591,1593,1594,1595,1596],{"id":546,"depth":1592,"text":549},3,{"id":680,"depth":1592,"text":683},{"id":810,"depth":1592,"text":813},{"id":917,"depth":1592,"text":920},{"id":967,"depth":1592,"text":970},{"id":997,"depth":1587,"text":1000},{"id":1100,"depth":1587,"text":1103},{"id":1337,"depth":1587,"text":1340,"children":1600},[1601,1602],{"id":1348,"depth":1592,"text":1351},{"id":1448,"depth":1592,"text":1451},{"id":1510,"depth":1587,"text":1513},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1605},"\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":1607},"\u003Cpath fill=\"currentColor\" d=\"M3 4h18v2H3zm0 7h12v2H3zm0 7h18v2H3z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1609},"\u003Cpath fill=\"currentColor\" d=\"m13.172 12l-4.95-4.95l1.414-1.413L16 12l-6.364 6.364l-1.414-1.415z\"\u002F>"]