[{"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-09-react-18-in-practice\u002F03-transition-useTransition-useDeferredValue":494,"i-ri:arrow-left-s-line":1833,"i-ri:menu-2-line":1835,"i-ri:arrow-right-s-line":1837,"i-ep:copy-document":1839},{"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":351,"path":351,"title":352,"updatedAt":21,"meta":498,"body":500,"toc":1812},"bm90ZTpub3Rlcy9yZWFjdC8wOS1yZWFjdC0xOC1pbi1wcmFjdGljZS8wMy10cmFuc2l0aW9uLXVzZVRyYW5zaXRpb24tdXNlRGVmZXJyZWRWYWx1ZS5tZA","note","notes\u002Freact\u002F09-react-18-in-practice\u002F03-transition-useTransition-useDeferredValue.md",{"id":495,"type":496,"sourcePath":497,"slug":499,"title":352,"updatedAt":21,"lastUpdated":21},"react\u002F09-react-18-in-practice\u002F03-transition-useTransition-useDeferredValue",{"type":501,"children":502},"root",[503,511,536,543,548,573,578,592,597,620,626,631,654,659,689,695,702,707,720,725,748,753,778,784,805,810,826,832,837,860,865,871,877,1277,1289,1295,1392,1423,1429,1462,1467,1500,1505,1518,1524,1530,1535,1554,1559,1565,1578,1583,1596,1602,1613,1621,1632,1653,1664,1672,1678,1722,1727,1806],{"type":504,"tag":505,"props":506,"children":508},"element","h1",{"id":507},"transitionstarttransition-usetransition-usedeferredvalue机制视角",[509],{"type":510,"value":352},"text",{"type":504,"tag":512,"props":513,"children":514},"blockquote",{},[515],{"type":504,"tag":516,"props":517,"children":518},"p",{},[519,521,527,529,534],{"type":510,"value":520},"一句话结论：Transition 的本质是",{"type":504,"tag":522,"props":523,"children":524},"strong",{},[525],{"type":510,"value":526},"把一部分更新标记为“非紧急”",{"type":510,"value":528},"（低优先级 lane），从而让 React 在并发渲染中优先保证输入\u002F点击等紧急更新，必要时",{"type":504,"tag":522,"props":530,"children":531},{},[532],{"type":510,"value":533},"中断正在进行的渲染并先响应用户",{"type":510,"value":535},"；代价是这些“非紧急更新”可能被延后、重做，甚至被更高优先级更新覆盖。",{"type":504,"tag":537,"props":538,"children":540},"h2",{"id":539},"_1-react-为什么需要-transition",[541],{"type":510,"value":542},"1. React 为什么需要 Transition？",{"type":504,"tag":516,"props":544,"children":545},{},[546],{"type":510,"value":547},"在真实业务里最常见的卡顿来自两类工作：",{"type":504,"tag":549,"props":550,"children":551},"ol",{},[552,563],{"type":504,"tag":553,"props":554,"children":555},"li",{},[556,561],{"type":504,"tag":522,"props":557,"children":558},{},[559],{"type":510,"value":560},"大渲染",{"type":510,"value":562},"：列表很大、组件树很深、每次输入都触发昂贵的 re-render",{"type":504,"tag":553,"props":564,"children":565},{},[566,571],{"type":504,"tag":522,"props":567,"children":568},{},[569],{"type":510,"value":570},"大计算",{"type":510,"value":572},"：过滤\u002F排序\u002F聚合等 CPU 工作跟着输入同步跑",{"type":504,"tag":516,"props":574,"children":575},{},[576],{"type":510,"value":577},"如果把这些更新都当成“同等紧急”，用户会感受到：",{"type":504,"tag":579,"props":580,"children":581},"ul",{},[582,587],{"type":504,"tag":553,"props":583,"children":584},{},[585],{"type":510,"value":586},"输入掉帧（INP 变差）",{"type":504,"tag":553,"props":588,"children":589},{},[590],{"type":510,"value":591},"点击无响应",{"type":504,"tag":516,"props":593,"children":594},{},[595],{"type":510,"value":596},"Transition 提供了一个“架构级语义”：",{"type":504,"tag":579,"props":598,"children":599},{},[600,610],{"type":504,"tag":553,"props":601,"children":602},{},[603,608],{"type":504,"tag":522,"props":604,"children":605},{},[606],{"type":510,"value":607},"交互必须立即响应",{"type":510,"value":609},"（urgent updates）",{"type":504,"tag":553,"props":611,"children":612},{},[613,618],{"type":504,"tag":522,"props":614,"children":615},{},[616],{"type":510,"value":617},"UI 的细节更新可以稍后跟上",{"type":510,"value":619},"（non-urgent updates）",{"type":504,"tag":537,"props":621,"children":623},{"id":622},"_2-心智模型urgent-vs-transition",[624],{"type":510,"value":625},"2. 心智模型：Urgent vs Transition",{"type":504,"tag":516,"props":627,"children":628},{},[629],{"type":510,"value":630},"你可以把一次交互拆成两种状态更新：",{"type":504,"tag":579,"props":632,"children":633},{},[634,644],{"type":504,"tag":553,"props":635,"children":636},{},[637,642],{"type":504,"tag":522,"props":638,"children":639},{},[640],{"type":510,"value":641},"Urgent（紧急）",{"type":510,"value":643},"：输入框字符、按钮按下态、hover 等",{"type":504,"tag":553,"props":645,"children":646},{},[647,652],{"type":504,"tag":522,"props":648,"children":649},{},[650],{"type":510,"value":651},"Transition（过渡）",{"type":510,"value":653},"：筛选结果列表、页面内容区切换、复杂图表刷新",{"type":504,"tag":516,"props":655,"children":656},{},[657],{"type":510,"value":658},"典型例子：输入框联想",{"type":504,"tag":579,"props":660,"children":661},{},[662,676],{"type":504,"tag":553,"props":663,"children":664},{},[665,667,674],{"type":510,"value":666},"urgent：",{"type":504,"tag":668,"props":669,"children":671},"code",{"className":670},[],[672],{"type":510,"value":673},"setText(nextText)",{"type":510,"value":675},"（必须立刻）",{"type":504,"tag":553,"props":677,"children":678},{},[679,681,687],{"type":510,"value":680},"transition：",{"type":504,"tag":668,"props":682,"children":684},{"className":683},[],[685],{"type":510,"value":686},"setQuery(nextText)",{"type":510,"value":688}," → 触发昂贵列表过滤（可以稍后）",{"type":504,"tag":537,"props":690,"children":692},{"id":691},"_3-机制transition-在调度里发生了什么",[693],{"type":510,"value":694},"3. 机制：Transition 在调度里发生了什么？",{"type":504,"tag":696,"props":697,"children":699},"h3",{"id":698},"_31-更新是如何被打标签的lane-视角",[700],{"type":510,"value":701},"3.1 更新是如何被“打标签”的（Lane 视角）",{"type":504,"tag":516,"props":703,"children":704},{},[705],{"type":510,"value":706},"React 内部会把不同来源的更新映射到不同优先级（Lane）。你在仓库里已经有：",{"type":504,"tag":579,"props":708,"children":709},{},[710,715],{"type":504,"tag":553,"props":711,"children":712},{},[713],{"type":510,"value":714},"Scheduler 的优先级（Immediate\u002FUserBlocking\u002FNormal\u002FLow\u002FIdle）",{"type":504,"tag":553,"props":716,"children":717},{},[718],{"type":510,"value":719},"React 的 Lane 位图模型（pendingLanes \u002F suspendedLanes \u002F pingedLanes \u002F expiredLanes ...）",{"type":504,"tag":516,"props":721,"children":722},{},[723],{"type":510,"value":724},"Transition 做的关键事情就是：",{"type":504,"tag":579,"props":726,"children":727},{},[728],{"type":504,"tag":553,"props":729,"children":730},{},[731,733,739,741,746],{"type":510,"value":732},"在 ",{"type":504,"tag":668,"props":734,"children":736},{"className":735},[],[737],{"type":510,"value":738},"startTransition(() => { ...setState })",{"type":510,"value":740}," 包裹的更新里，React 会把这些更新放入 ",{"type":504,"tag":522,"props":742,"children":743},{},[744],{"type":510,"value":745},"Transition 语义的 lane",{"type":510,"value":747},"（低于输入\u002F点击等更新）。",{"type":504,"tag":516,"props":749,"children":750},{},[751],{"type":510,"value":752},"这意味着：",{"type":504,"tag":579,"props":754,"children":755},{},[756,768,773],{"type":504,"tag":553,"props":757,"children":758},{},[759,761,766],{"type":510,"value":760},"如果此时用户继续输入（更高优先级），React 可以",{"type":504,"tag":522,"props":762,"children":763},{},[764],{"type":510,"value":765},"中断当前渲染",{"type":510,"value":767},"（render 阶段可中断）",{"type":504,"tag":553,"props":769,"children":770},{},[771],{"type":510,"value":772},"先处理高优先级 lane",{"type":504,"tag":553,"props":774,"children":775},{},[776],{"type":510,"value":777},"再回来继续（或重做）Transition lane",{"type":504,"tag":696,"props":779,"children":781},{"id":780},"_32-可中断的边界在哪里render-可中断commit-不可中断",[782],{"type":510,"value":783},"3.2 “可中断”的边界在哪里？（render 可中断，commit 不可中断）",{"type":504,"tag":579,"props":785,"children":786},{},[787,800],{"type":504,"tag":553,"props":788,"children":789},{},[790,792,798],{"type":510,"value":791},"render 阶段：可以 time slicing，检查 ",{"type":504,"tag":668,"props":793,"children":795},{"className":794},[],[796],{"type":510,"value":797},"shouldYield()",{"type":510,"value":799},"，中断\u002F恢复\u002F重做",{"type":504,"tag":553,"props":801,"children":802},{},[803],{"type":510,"value":804},"commit 阶段：一次性提交到 DOM，不可中断",{"type":504,"tag":516,"props":806,"children":807},{},[808],{"type":510,"value":809},"Transition 利用的就是：",{"type":504,"tag":579,"props":811,"children":812},{},[813,821],{"type":504,"tag":553,"props":814,"children":815},{},[816],{"type":504,"tag":522,"props":817,"children":818},{},[819],{"type":510,"value":820},"让昂贵的 UI 更新尽量发生在可中断的 render 阶段",{"type":504,"tag":553,"props":822,"children":823},{},[824],{"type":510,"value":825},"让主线程在需要时可以立刻让出给输入\u002F点击",{"type":504,"tag":696,"props":827,"children":829},{"id":828},"_33-为什么-transition-更新可能被重做",[830],{"type":510,"value":831},"3.3 为什么 Transition 更新可能“被重做”？",{"type":504,"tag":516,"props":833,"children":834},{},[835],{"type":510,"value":836},"因为并发渲染允许：",{"type":504,"tag":579,"props":838,"children":839},{},[840,845,850,855],{"type":504,"tag":553,"props":841,"children":842},{},[843],{"type":510,"value":844},"一个低优先级渲染进行中",{"type":504,"tag":553,"props":846,"children":847},{},[848],{"type":510,"value":849},"途中来了更高优先级更新",{"type":504,"tag":553,"props":851,"children":852},{},[853],{"type":510,"value":854},"React 丢弃当前 workInProgress，先做高优先级",{"type":504,"tag":553,"props":856,"children":857},{},[858],{"type":510,"value":859},"然后重新基于最新 state 再做低优先级",{"type":504,"tag":516,"props":861,"children":862},{},[863],{"type":510,"value":864},"这就是为什么你不能把“必须只执行一次的副作用”放到 render 里（StrictMode 与并发会放大问题）。",{"type":504,"tag":537,"props":866,"children":868},{"id":867},"_4-apistarttransition-usetransition-usedeferredvalue-分别解决什么",[869],{"type":510,"value":870},"4. API：startTransition \u002F useTransition \u002F useDeferredValue 分别解决什么？",{"type":504,"tag":696,"props":872,"children":874},{"id":873},"_41-starttransition给更新降级",[875],{"type":510,"value":876},"4.1 startTransition：给更新降级",{"type":504,"tag":878,"props":879,"children":884},"pre",{"className":880,"code":881,"language":882,"meta":883,"style":883},"language-ts shiki shiki-themes github-light github-dark","import { startTransition, useState } from 'react'\n\nfunction Search() {\n  const [text, setText] = useState('')\n  const [query, setQuery] = useState('')\n\n  function onChange(e: React.ChangeEvent\u003CHTMLInputElement>) {\n    const next = e.target.value\n\n    \u002F\u002F urgent：立刻更新输入\n    setText(next)\n\n    \u002F\u002F transition：昂贵更新可延后\n    startTransition(() => {\n      setQuery(next)\n    })\n  }\n\n  \u002F\u002F query 用于昂贵的过滤\u002F请求\u002F渲染\n}\n","ts","",[885],{"type":504,"tag":668,"props":886,"children":887},{"__ignoreMap":883},[888,917,927,947,1006,1056,1064,1123,1147,1155,1165,1179,1187,1196,1220,1233,1242,1251,1259,1268],{"type":504,"tag":889,"props":890,"children":893},"span",{"class":891,"line":892},"line",1,[894,900,906,911],{"type":504,"tag":889,"props":895,"children":897},{"style":896},"--shiki-default:#D73A49;--shiki-dark:#F97583",[898],{"type":510,"value":899},"import",{"type":504,"tag":889,"props":901,"children":903},{"style":902},"--shiki-default:#24292E;--shiki-dark:#E1E4E8",[904],{"type":510,"value":905}," { startTransition, useState } ",{"type":504,"tag":889,"props":907,"children":908},{"style":896},[909],{"type":510,"value":910},"from",{"type":504,"tag":889,"props":912,"children":914},{"style":913},"--shiki-default:#032F62;--shiki-dark:#9ECBFF",[915],{"type":510,"value":916}," 'react'\n",{"type":504,"tag":889,"props":918,"children":920},{"class":891,"line":919},2,[921],{"type":504,"tag":889,"props":922,"children":924},{"emptyLinePlaceholder":923},true,[925],{"type":510,"value":926},"\n",{"type":504,"tag":889,"props":928,"children":930},{"class":891,"line":929},3,[931,936,942],{"type":504,"tag":889,"props":932,"children":933},{"style":896},[934],{"type":510,"value":935},"function",{"type":504,"tag":889,"props":937,"children":939},{"style":938},"--shiki-default:#6F42C1;--shiki-dark:#B392F0",[940],{"type":510,"value":941}," Search",{"type":504,"tag":889,"props":943,"children":944},{"style":902},[945],{"type":510,"value":946},"() {\n",{"type":504,"tag":889,"props":948,"children":950},{"class":891,"line":949},4,[951,956,961,966,971,976,981,986,991,996,1001],{"type":504,"tag":889,"props":952,"children":953},{"style":896},[954],{"type":510,"value":955},"  const",{"type":504,"tag":889,"props":957,"children":958},{"style":902},[959],{"type":510,"value":960}," [",{"type":504,"tag":889,"props":962,"children":964},{"style":963},"--shiki-default:#005CC5;--shiki-dark:#79B8FF",[965],{"type":510,"value":510},{"type":504,"tag":889,"props":967,"children":968},{"style":902},[969],{"type":510,"value":970},", ",{"type":504,"tag":889,"props":972,"children":973},{"style":963},[974],{"type":510,"value":975},"setText",{"type":504,"tag":889,"props":977,"children":978},{"style":902},[979],{"type":510,"value":980},"] ",{"type":504,"tag":889,"props":982,"children":983},{"style":896},[984],{"type":510,"value":985},"=",{"type":504,"tag":889,"props":987,"children":988},{"style":938},[989],{"type":510,"value":990}," useState",{"type":504,"tag":889,"props":992,"children":993},{"style":902},[994],{"type":510,"value":995},"(",{"type":504,"tag":889,"props":997,"children":998},{"style":913},[999],{"type":510,"value":1000},"''",{"type":504,"tag":889,"props":1002,"children":1003},{"style":902},[1004],{"type":510,"value":1005},")\n",{"type":504,"tag":889,"props":1007,"children":1009},{"class":891,"line":1008},5,[1010,1014,1018,1023,1027,1032,1036,1040,1044,1048,1052],{"type":504,"tag":889,"props":1011,"children":1012},{"style":896},[1013],{"type":510,"value":955},{"type":504,"tag":889,"props":1015,"children":1016},{"style":902},[1017],{"type":510,"value":960},{"type":504,"tag":889,"props":1019,"children":1020},{"style":963},[1021],{"type":510,"value":1022},"query",{"type":504,"tag":889,"props":1024,"children":1025},{"style":902},[1026],{"type":510,"value":970},{"type":504,"tag":889,"props":1028,"children":1029},{"style":963},[1030],{"type":510,"value":1031},"setQuery",{"type":504,"tag":889,"props":1033,"children":1034},{"style":902},[1035],{"type":510,"value":980},{"type":504,"tag":889,"props":1037,"children":1038},{"style":896},[1039],{"type":510,"value":985},{"type":504,"tag":889,"props":1041,"children":1042},{"style":938},[1043],{"type":510,"value":990},{"type":504,"tag":889,"props":1045,"children":1046},{"style":902},[1047],{"type":510,"value":995},{"type":504,"tag":889,"props":1049,"children":1050},{"style":913},[1051],{"type":510,"value":1000},{"type":504,"tag":889,"props":1053,"children":1054},{"style":902},[1055],{"type":510,"value":1005},{"type":504,"tag":889,"props":1057,"children":1059},{"class":891,"line":1058},6,[1060],{"type":504,"tag":889,"props":1061,"children":1062},{"emptyLinePlaceholder":923},[1063],{"type":510,"value":926},{"type":504,"tag":889,"props":1065,"children":1067},{"class":891,"line":1066},7,[1068,1073,1078,1082,1088,1093,1098,1103,1108,1113,1118],{"type":504,"tag":889,"props":1069,"children":1070},{"style":896},[1071],{"type":510,"value":1072},"  function",{"type":504,"tag":889,"props":1074,"children":1075},{"style":938},[1076],{"type":510,"value":1077}," onChange",{"type":504,"tag":889,"props":1079,"children":1080},{"style":902},[1081],{"type":510,"value":995},{"type":504,"tag":889,"props":1083,"children":1085},{"style":1084},"--shiki-default:#E36209;--shiki-dark:#FFAB70",[1086],{"type":510,"value":1087},"e",{"type":504,"tag":889,"props":1089,"children":1090},{"style":896},[1091],{"type":510,"value":1092},":",{"type":504,"tag":889,"props":1094,"children":1095},{"style":938},[1096],{"type":510,"value":1097}," React",{"type":504,"tag":889,"props":1099,"children":1100},{"style":902},[1101],{"type":510,"value":1102},".",{"type":504,"tag":889,"props":1104,"children":1105},{"style":938},[1106],{"type":510,"value":1107},"ChangeEvent",{"type":504,"tag":889,"props":1109,"children":1110},{"style":902},[1111],{"type":510,"value":1112},"\u003C",{"type":504,"tag":889,"props":1114,"children":1115},{"style":938},[1116],{"type":510,"value":1117},"HTMLInputElement",{"type":504,"tag":889,"props":1119,"children":1120},{"style":902},[1121],{"type":510,"value":1122},">) {\n",{"type":504,"tag":889,"props":1124,"children":1126},{"class":891,"line":1125},8,[1127,1132,1137,1142],{"type":504,"tag":889,"props":1128,"children":1129},{"style":896},[1130],{"type":510,"value":1131},"    const",{"type":504,"tag":889,"props":1133,"children":1134},{"style":963},[1135],{"type":510,"value":1136}," next",{"type":504,"tag":889,"props":1138,"children":1139},{"style":896},[1140],{"type":510,"value":1141}," =",{"type":504,"tag":889,"props":1143,"children":1144},{"style":902},[1145],{"type":510,"value":1146}," e.target.value\n",{"type":504,"tag":889,"props":1148,"children":1150},{"class":891,"line":1149},9,[1151],{"type":504,"tag":889,"props":1152,"children":1153},{"emptyLinePlaceholder":923},[1154],{"type":510,"value":926},{"type":504,"tag":889,"props":1156,"children":1158},{"class":891,"line":1157},10,[1159],{"type":504,"tag":889,"props":1160,"children":1162},{"style":1161},"--shiki-default:#6A737D;--shiki-dark:#6A737D",[1163],{"type":510,"value":1164},"    \u002F\u002F urgent：立刻更新输入\n",{"type":504,"tag":889,"props":1166,"children":1168},{"class":891,"line":1167},11,[1169,1174],{"type":504,"tag":889,"props":1170,"children":1171},{"style":938},[1172],{"type":510,"value":1173},"    setText",{"type":504,"tag":889,"props":1175,"children":1176},{"style":902},[1177],{"type":510,"value":1178},"(next)\n",{"type":504,"tag":889,"props":1180,"children":1182},{"class":891,"line":1181},12,[1183],{"type":504,"tag":889,"props":1184,"children":1185},{"emptyLinePlaceholder":923},[1186],{"type":510,"value":926},{"type":504,"tag":889,"props":1188,"children":1190},{"class":891,"line":1189},13,[1191],{"type":504,"tag":889,"props":1192,"children":1193},{"style":1161},[1194],{"type":510,"value":1195},"    \u002F\u002F transition：昂贵更新可延后\n",{"type":504,"tag":889,"props":1197,"children":1199},{"class":891,"line":1198},14,[1200,1205,1210,1215],{"type":504,"tag":889,"props":1201,"children":1202},{"style":938},[1203],{"type":510,"value":1204},"    startTransition",{"type":504,"tag":889,"props":1206,"children":1207},{"style":902},[1208],{"type":510,"value":1209},"(() ",{"type":504,"tag":889,"props":1211,"children":1212},{"style":896},[1213],{"type":510,"value":1214},"=>",{"type":504,"tag":889,"props":1216,"children":1217},{"style":902},[1218],{"type":510,"value":1219}," {\n",{"type":504,"tag":889,"props":1221,"children":1223},{"class":891,"line":1222},15,[1224,1229],{"type":504,"tag":889,"props":1225,"children":1226},{"style":938},[1227],{"type":510,"value":1228},"      setQuery",{"type":504,"tag":889,"props":1230,"children":1231},{"style":902},[1232],{"type":510,"value":1178},{"type":504,"tag":889,"props":1234,"children":1236},{"class":891,"line":1235},16,[1237],{"type":504,"tag":889,"props":1238,"children":1239},{"style":902},[1240],{"type":510,"value":1241},"    })\n",{"type":504,"tag":889,"props":1243,"children":1245},{"class":891,"line":1244},17,[1246],{"type":504,"tag":889,"props":1247,"children":1248},{"style":902},[1249],{"type":510,"value":1250},"  }\n",{"type":504,"tag":889,"props":1252,"children":1254},{"class":891,"line":1253},18,[1255],{"type":504,"tag":889,"props":1256,"children":1257},{"emptyLinePlaceholder":923},[1258],{"type":510,"value":926},{"type":504,"tag":889,"props":1260,"children":1262},{"class":891,"line":1261},19,[1263],{"type":504,"tag":889,"props":1264,"children":1265},{"style":1161},[1266],{"type":510,"value":1267},"  \u002F\u002F query 用于昂贵的过滤\u002F请求\u002F渲染\n",{"type":504,"tag":889,"props":1269,"children":1271},{"class":891,"line":1270},20,[1272],{"type":504,"tag":889,"props":1273,"children":1274},{"style":902},[1275],{"type":510,"value":1276},"}\n",{"type":504,"tag":516,"props":1278,"children":1279},{},[1280,1282,1287],{"type":510,"value":1281},"机制含义：",{"type":504,"tag":668,"props":1283,"children":1285},{"className":1284},[],[1286],{"type":510,"value":1031},{"type":510,"value":1288}," 产生的更新会被标记到 Transition lane。",{"type":504,"tag":696,"props":1290,"children":1292},{"id":1291},"_42-usetransition拿到-pending-状态-一个带语义的-starttransition",[1293],{"type":510,"value":1294},"4.2 useTransition：拿到 pending 状态 + 一个带语义的 startTransition",{"type":504,"tag":878,"props":1296,"children":1298},{"className":880,"code":1297,"language":882,"meta":883,"style":883},"const [isPending, start] = useTransition()\n\nstart(() => {\n  setQuery(next)\n})\n",[1299],{"type":504,"tag":668,"props":1300,"children":1301},{"__ignoreMap":883},[1302,1346,1353,1372,1384],{"type":504,"tag":889,"props":1303,"children":1304},{"class":891,"line":892},[1305,1310,1314,1319,1323,1328,1332,1336,1341],{"type":504,"tag":889,"props":1306,"children":1307},{"style":896},[1308],{"type":510,"value":1309},"const",{"type":504,"tag":889,"props":1311,"children":1312},{"style":902},[1313],{"type":510,"value":960},{"type":504,"tag":889,"props":1315,"children":1316},{"style":963},[1317],{"type":510,"value":1318},"isPending",{"type":504,"tag":889,"props":1320,"children":1321},{"style":902},[1322],{"type":510,"value":970},{"type":504,"tag":889,"props":1324,"children":1325},{"style":963},[1326],{"type":510,"value":1327},"start",{"type":504,"tag":889,"props":1329,"children":1330},{"style":902},[1331],{"type":510,"value":980},{"type":504,"tag":889,"props":1333,"children":1334},{"style":896},[1335],{"type":510,"value":985},{"type":504,"tag":889,"props":1337,"children":1338},{"style":938},[1339],{"type":510,"value":1340}," useTransition",{"type":504,"tag":889,"props":1342,"children":1343},{"style":902},[1344],{"type":510,"value":1345},"()\n",{"type":504,"tag":889,"props":1347,"children":1348},{"class":891,"line":919},[1349],{"type":504,"tag":889,"props":1350,"children":1351},{"emptyLinePlaceholder":923},[1352],{"type":510,"value":926},{"type":504,"tag":889,"props":1354,"children":1355},{"class":891,"line":929},[1356,1360,1364,1368],{"type":504,"tag":889,"props":1357,"children":1358},{"style":938},[1359],{"type":510,"value":1327},{"type":504,"tag":889,"props":1361,"children":1362},{"style":902},[1363],{"type":510,"value":1209},{"type":504,"tag":889,"props":1365,"children":1366},{"style":896},[1367],{"type":510,"value":1214},{"type":504,"tag":889,"props":1369,"children":1370},{"style":902},[1371],{"type":510,"value":1219},{"type":504,"tag":889,"props":1373,"children":1374},{"class":891,"line":949},[1375,1380],{"type":504,"tag":889,"props":1376,"children":1377},{"style":938},[1378],{"type":510,"value":1379},"  setQuery",{"type":504,"tag":889,"props":1381,"children":1382},{"style":902},[1383],{"type":510,"value":1178},{"type":504,"tag":889,"props":1385,"children":1386},{"class":891,"line":1008},[1387],{"type":504,"tag":889,"props":1388,"children":1389},{"style":902},[1390],{"type":510,"value":1391},"})\n",{"type":504,"tag":579,"props":1393,"children":1394},{},[1395,1405],{"type":504,"tag":553,"props":1396,"children":1397},{},[1398,1403],{"type":504,"tag":668,"props":1399,"children":1401},{"className":1400},[],[1402],{"type":510,"value":1318},{"type":510,"value":1404}," 不是“网络请求是否完成”，而是“是否还有 Transition 更新未完成\u002F未提交”。",{"type":504,"tag":553,"props":1406,"children":1407},{},[1408,1410],{"type":510,"value":1409},"常用于：\n",{"type":504,"tag":579,"props":1411,"children":1412},{},[1413,1418],{"type":504,"tag":553,"props":1414,"children":1415},{},[1416],{"type":510,"value":1417},"按钮 loading（但不阻塞输入）",{"type":504,"tag":553,"props":1419,"children":1420},{},[1421],{"type":510,"value":1422},"列表区域显示“更新中”提示",{"type":504,"tag":696,"props":1424,"children":1426},{"id":1425},"_43-usedeferredvalue把某个值的传播延后",[1427],{"type":510,"value":1428},"4.3 useDeferredValue：把某个值的“传播”延后",{"type":504,"tag":878,"props":1430,"children":1432},{"className":880,"code":1431,"language":882,"meta":883,"style":883},"const deferredQuery = useDeferredValue(query)\n",[1433],{"type":504,"tag":668,"props":1434,"children":1435},{"__ignoreMap":883},[1436],{"type":504,"tag":889,"props":1437,"children":1438},{"class":891,"line":892},[1439,1443,1448,1452,1457],{"type":504,"tag":889,"props":1440,"children":1441},{"style":896},[1442],{"type":510,"value":1309},{"type":504,"tag":889,"props":1444,"children":1445},{"style":963},[1446],{"type":510,"value":1447}," deferredQuery",{"type":504,"tag":889,"props":1449,"children":1450},{"style":896},[1451],{"type":510,"value":1141},{"type":504,"tag":889,"props":1453,"children":1454},{"style":938},[1455],{"type":510,"value":1456}," useDeferredValue",{"type":504,"tag":889,"props":1458,"children":1459},{"style":902},[1460],{"type":510,"value":1461},"(query)\n",{"type":504,"tag":516,"props":1463,"children":1464},{},[1465],{"type":510,"value":1466},"心智模型：",{"type":504,"tag":579,"props":1468,"children":1469},{},[1470,1480],{"type":504,"tag":553,"props":1471,"children":1472},{},[1473,1478],{"type":504,"tag":668,"props":1474,"children":1476},{"className":1475},[],[1477],{"type":510,"value":1022},{"type":510,"value":1479}," 仍然是 urgent（立刻更新）",{"type":504,"tag":553,"props":1481,"children":1482},{},[1483,1485,1491,1493,1498],{"type":510,"value":1484},"但 ",{"type":504,"tag":668,"props":1486,"children":1488},{"className":1487},[],[1489],{"type":510,"value":1490},"deferredQuery",{"type":510,"value":1492}," 会",{"type":504,"tag":522,"props":1494,"children":1495},{},[1496],{"type":510,"value":1497},"滞后",{"type":510,"value":1499},"，用于驱动昂贵子树",{"type":504,"tag":516,"props":1501,"children":1502},{},[1503],{"type":510,"value":1504},"适合场景：",{"type":504,"tag":579,"props":1506,"children":1507},{},[1508,1513],{"type":504,"tag":553,"props":1509,"children":1510},{},[1511],{"type":510,"value":1512},"你不想（或不方便）在事件处理里显式拆两份 state",{"type":504,"tag":553,"props":1514,"children":1515},{},[1516],{"type":510,"value":1517},"想让昂贵区域自动“慢一拍”更新",{"type":504,"tag":537,"props":1519,"children":1521},{"id":1520},"_5-与数据请求tanstack-query-路由切页的关系架构建议",[1522],{"type":510,"value":1523},"5. 与数据请求（TanStack Query）\u002F 路由切页的关系（架构建议）",{"type":504,"tag":696,"props":1525,"children":1527},{"id":1526},"_51-transition-把请求变快",[1528],{"type":510,"value":1529},"5.1 Transition ≠ “把请求变快”",{"type":504,"tag":516,"props":1531,"children":1532},{},[1533],{"type":510,"value":1534},"Transition 不会缩短请求耗时，它优化的是：",{"type":504,"tag":579,"props":1536,"children":1537},{},[1538,1546],{"type":504,"tag":553,"props":1539,"children":1540},{},[1541],{"type":504,"tag":522,"props":1542,"children":1543},{},[1544],{"type":510,"value":1545},"请求期间 UI 不要卡死",{"type":504,"tag":553,"props":1547,"children":1548},{},[1549],{"type":504,"tag":522,"props":1550,"children":1551},{},[1552],{"type":510,"value":1553},"昂贵渲染不要阻塞交互",{"type":504,"tag":516,"props":1555,"children":1556},{},[1557],{"type":510,"value":1558},"在数据层你仍需要：缓存、预取、去重、失效策略（TanStack Query \u002F Next 缓存）。",{"type":504,"tag":696,"props":1560,"children":1562},{"id":1561},"_52-切页体验路由更新经常是-transition-候选",[1563],{"type":510,"value":1564},"5.2 切页体验：路由更新经常是 Transition 候选",{"type":504,"tag":579,"props":1566,"children":1567},{},[1568,1573],{"type":504,"tag":553,"props":1569,"children":1570},{},[1571],{"type":510,"value":1572},"SPA（TanStack Router）：切页会触发大量组件树变化",{"type":504,"tag":553,"props":1574,"children":1575},{},[1576],{"type":510,"value":1577},"Next App Router：导航可能触发 streaming\u002Fhydration 等",{"type":504,"tag":516,"props":1579,"children":1580},{},[1581],{"type":510,"value":1582},"常见策略：",{"type":504,"tag":579,"props":1584,"children":1585},{},[1586,1591],{"type":504,"tag":553,"props":1587,"children":1588},{},[1589],{"type":510,"value":1590},"导航触发时把“内容区更新”作为 Transition",{"type":504,"tag":553,"props":1592,"children":1593},{},[1594],{"type":510,"value":1595},"保持顶部导航\u002F输入框等 urgent 区域流畅",{"type":504,"tag":537,"props":1597,"children":1599},{"id":1598},"_6-常见误区机制推导",[1600],{"type":510,"value":1601},"6. 常见误区（机制推导）",{"type":504,"tag":549,"props":1603,"children":1604},{},[1605],{"type":504,"tag":553,"props":1606,"children":1607},{},[1608],{"type":504,"tag":522,"props":1609,"children":1610},{},[1611],{"type":510,"value":1612},"把所有 setState 都包进 startTransition",{"type":504,"tag":579,"props":1614,"children":1615},{},[1616],{"type":504,"tag":553,"props":1617,"children":1618},{},[1619],{"type":510,"value":1620},"结果：输入也变慢，交互语义被破坏",{"type":504,"tag":549,"props":1622,"children":1623},{"start":919},[1624],{"type":504,"tag":553,"props":1625,"children":1626},{},[1627],{"type":504,"tag":522,"props":1628,"children":1629},{},[1630],{"type":510,"value":1631},"在 Transition 里做“必须立即生效”的东西",{"type":504,"tag":579,"props":1633,"children":1634},{},[1635,1640],{"type":504,"tag":553,"props":1636,"children":1637},{},[1638],{"type":510,"value":1639},"例如必须马上读 DOM、必须马上同步给第三方库",{"type":504,"tag":553,"props":1641,"children":1642},{},[1643,1645,1651],{"type":510,"value":1644},"这种需求应该用 ",{"type":504,"tag":668,"props":1646,"children":1648},{"className":1647},[],[1649],{"type":510,"value":1650},"flushSync",{"type":510,"value":1652}," 或 useLayoutEffect（且要谨慎）",{"type":504,"tag":549,"props":1654,"children":1655},{"start":929},[1656],{"type":504,"tag":553,"props":1657,"children":1658},{},[1659],{"type":504,"tag":522,"props":1660,"children":1661},{},[1662],{"type":510,"value":1663},"把副作用写在 render 路径里",{"type":504,"tag":579,"props":1665,"children":1666},{},[1667],{"type":504,"tag":553,"props":1668,"children":1669},{},[1670],{"type":510,"value":1671},"并发渲染 + StrictMode 会导致重复执行、被丢弃重做",{"type":504,"tag":537,"props":1673,"children":1675},{"id":1674},"_7-checklist",[1676],{"type":510,"value":1677},"7. Checklist",{"type":504,"tag":579,"props":1679,"children":1682},{"className":1680},[1681],"contains-task-list",[1683,1695,1704,1713],{"type":504,"tag":553,"props":1684,"children":1687},{"className":1685},[1686],"task-list-item",[1688,1693],{"type":504,"tag":1689,"props":1690,"children":1692},"input",{"disabled":923,"type":1691},"checkbox",[],{"type":510,"value":1694}," 是否能把一次交互拆成 urgent（输入\u002F反馈）与 transition（结果区渲染）？",{"type":504,"tag":553,"props":1696,"children":1698},{"className":1697},[1686],[1699,1702],{"type":504,"tag":1689,"props":1700,"children":1701},{"disabled":923,"type":1691},[],{"type":510,"value":1703}," 昂贵子树是否由一个“可延后”的值驱动（useDeferredValue 或拆 state）？",{"type":504,"tag":553,"props":1705,"children":1707},{"className":1706},[1686],[1708,1711],{"type":504,"tag":1689,"props":1709,"children":1710},{"disabled":923,"type":1691},[],{"type":510,"value":1712}," 是否存在 render 期间的副作用（订阅\u002F请求\u002F写外部状态）？",{"type":504,"tag":553,"props":1714,"children":1716},{"className":1715},[1686],[1717,1720],{"type":504,"tag":1689,"props":1718,"children":1719},{"disabled":923,"type":1691},[],{"type":510,"value":1721}," 是否把 Transition 当成“性能银弹”而忽视了缓存\u002F预取\u002F列表虚拟化？",{"type":504,"tag":537,"props":1723,"children":1725},{"id":1724},"关联阅读",[1726],{"type":510,"value":1724},{"type":504,"tag":579,"props":1728,"children":1729},{},[1730,1746,1761,1776,1791],{"type":504,"tag":553,"props":1731,"children":1732},{},[1733,1735],{"type":510,"value":1734},"时间切片：",{"type":504,"tag":1736,"props":1737,"children":1739},"a",{"href":1738},"..\u002F03-concurrent-mode\u002F10-time-slicing.md",[1740],{"type":504,"tag":668,"props":1741,"children":1743},{"className":1742},[],[1744],{"type":510,"value":1745},"notes\u002F03-concurrent-mode\u002F10-time-slicing.md",{"type":504,"tag":553,"props":1747,"children":1748},{},[1749,1751],{"type":510,"value":1750},"优先级设计：",{"type":504,"tag":1736,"props":1752,"children":1754},{"href":1753},"..\u002F03-concurrent-mode\u002F12-priority-design.md",[1755],{"type":504,"tag":668,"props":1756,"children":1758},{"className":1757},[],[1759],{"type":510,"value":1760},"notes\u002F03-concurrent-mode\u002F12-priority-design.md",{"type":504,"tag":553,"props":1762,"children":1763},{},[1764,1766],{"type":510,"value":1765},"Lane 模型：",{"type":504,"tag":1736,"props":1767,"children":1769},{"href":1768},"..\u002F03-concurrent-mode\u002F13-lane-model.md",[1770],{"type":504,"tag":668,"props":1771,"children":1773},{"className":1772},[],[1774],{"type":510,"value":1775},"notes\u002F03-concurrent-mode\u002F13-lane-model.md",{"type":504,"tag":553,"props":1777,"children":1778},{},[1779,1781],{"type":510,"value":1780},"自动批处理与 flushSync：",{"type":504,"tag":1736,"props":1782,"children":1784},{"href":1783},".\u002F01-automatic-batching-and-flushsync.md",[1785],{"type":504,"tag":668,"props":1786,"children":1788},{"className":1787},[],[1789],{"type":510,"value":1790},"notes\u002F09-react-18-in-practice\u002F01-automatic-batching-and-flushsync.md",{"type":504,"tag":553,"props":1792,"children":1793},{},[1794,1796],{"type":510,"value":1795},"StrictMode 双调用（机制）：",{"type":504,"tag":1736,"props":1797,"children":1799},{"href":1798},".\u002F02-strictmode-and-idempotent-effects.md",[1800],{"type":504,"tag":668,"props":1801,"children":1803},{"className":1802},[],[1804],{"type":510,"value":1805},"notes\u002F09-react-18-in-practice\u002F02-strictmode-and-idempotent-effects.md",{"type":504,"tag":1807,"props":1808,"children":1809},"style",{},[1810],{"type":510,"value":1811},"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":883,"searchDepth":919,"depth":919,"links":1813},[1814,1815,1816,1821,1826,1830,1831,1832],{"id":539,"depth":919,"text":542},{"id":622,"depth":919,"text":625},{"id":691,"depth":919,"text":694,"children":1817},[1818,1819,1820],{"id":698,"depth":929,"text":701},{"id":780,"depth":929,"text":783},{"id":828,"depth":929,"text":831},{"id":867,"depth":919,"text":870,"children":1822},[1823,1824,1825],{"id":873,"depth":929,"text":876},{"id":1291,"depth":929,"text":1294},{"id":1425,"depth":929,"text":1428},{"id":1520,"depth":919,"text":1523,"children":1827},[1828,1829],{"id":1526,"depth":929,"text":1529},{"id":1561,"depth":929,"text":1564},{"id":1598,"depth":919,"text":1601},{"id":1674,"depth":919,"text":1677},{"id":1724,"depth":919,"text":1724},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1834},"\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":1836},"\u003Cpath fill=\"currentColor\" d=\"M3 4h18v2H3zm0 7h12v2H3zm0 7h18v2H3z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1838},"\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":1840,"height":1840,"rotate":4,"vFlip":6,"hFlip":6,"body":1841},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>"]