[{"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\u002F01-automatic-batching-and-flushsync":494,"i-ri:arrow-left-s-line":1317,"i-ri:menu-2-line":1319,"i-ri:arrow-right-s-line":1321,"i-ep:copy-document":1323},{"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":343,"path":343,"title":344,"updatedAt":21,"meta":498,"body":500,"toc":1300},"bm90ZTpub3Rlcy9yZWFjdC8wOS1yZWFjdC0xOC1pbi1wcmFjdGljZS8wMS1hdXRvbWF0aWMtYmF0Y2hpbmctYW5kLWZsdXNoc3luYy5tZA","note","notes\u002Freact\u002F09-react-18-in-practice\u002F01-automatic-batching-and-flushsync.md",{"id":495,"type":496,"sourcePath":497,"slug":499,"title":344,"updatedAt":21,"lastUpdated":21},"react\u002F09-react-18-in-practice\u002F01-automatic-batching-and-flushsync",{"type":501,"children":502},"root",[503,511,538,545,565,570,595,601,608,678,686,692,730,736,742,747,775,780,786,791,797,807,827,832,1026,1032,1095,1110,1116,1160,1165,1178,1184,1240,1245,1294],{"type":504,"tag":505,"props":506,"children":508},"element","h1",{"id":507},"react-18-自动批处理automatic-batching与-flushsync",[509],{"type":510,"value":344},"text",{"type":504,"tag":512,"props":513,"children":514},"blockquote",{},[515],{"type":504,"tag":516,"props":517,"children":518},"p",{},[519,521,527,529,536],{"type":510,"value":520},"一句话结论：React 18 默认会把",{"type":504,"tag":522,"props":523,"children":524},"strong",{},[525],{"type":510,"value":526},"同一“事件回合”（tick）里产生的多次更新合并渲染",{"type":510,"value":528},"，以减少渲染次数；当你必须立刻把更新落到 DOM（例如与第三方库交互、读取布局）时，用 ",{"type":504,"tag":530,"props":531,"children":533},"code",{"className":532},[],[534],{"type":510,"value":535},"flushSync",{"type":510,"value":537}," 作为“强制同步提交”的逃生阀，但要慎用。",{"type":504,"tag":539,"props":540,"children":542},"h2",{"id":541},"_1-它解决的问题是什么",[543],{"type":510,"value":544},"1. 它解决的问题是什么？",{"type":504,"tag":516,"props":546,"children":547},{},[548,550,556,558,563],{"type":510,"value":549},"在 React 18 之前，只有 React 合成事件（onClick\u002FonChange 等）里会批处理更新；而在 ",{"type":504,"tag":530,"props":551,"children":553},{"className":552},[],[554],{"type":510,"value":555},"setTimeout \u002F Promise \u002F 原生事件",{"type":510,"value":557}," 里，更新可能会",{"type":504,"tag":522,"props":559,"children":560},{},[561],{"type":510,"value":562},"多次渲染",{"type":510,"value":564},"。",{"type":504,"tag":516,"props":566,"children":567},{},[568],{"type":510,"value":569},"React 18 把批处理扩展为“默认更广泛的批处理”，让你在更多场景下：",{"type":504,"tag":571,"props":572,"children":573},"ul",{},[574,585],{"type":504,"tag":575,"props":576,"children":577},"li",{},[578,583],{"type":504,"tag":522,"props":579,"children":580},{},[581],{"type":510,"value":582},"更少的渲染次数",{"type":510,"value":584},"（性能更好）",{"type":504,"tag":575,"props":586,"children":587},{},[588,593],{"type":504,"tag":522,"props":589,"children":590},{},[591],{"type":510,"value":592},"更一致的行为",{"type":510,"value":594},"（心智负担更小）",{"type":504,"tag":539,"props":596,"children":598},{"id":597},"_2-react-18-的自动批处理到底批到哪里",[599],{"type":510,"value":600},"2. React 18 的自动批处理：到底批到哪里？",{"type":504,"tag":602,"props":603,"children":605},"h3",{"id":604},"_21-典型现象react-18",[606],{"type":510,"value":607},"2.1 典型现象（React 18）",{"type":504,"tag":571,"props":609,"children":610},{},[611,624,649],{"type":504,"tag":575,"props":612,"children":613},{},[614,616,622],{"type":510,"value":615},"React 合成事件里多次 ",{"type":504,"tag":530,"props":617,"children":619},{"className":618},[],[620],{"type":510,"value":621},"setState",{"type":510,"value":623},"：批处理（一次 render）",{"type":504,"tag":575,"props":625,"children":626},{},[627,633,635,640,642,647],{"type":504,"tag":530,"props":628,"children":630},{"className":629},[],[631],{"type":510,"value":632},"setTimeout",{"type":510,"value":634}," 回调里多次 ",{"type":504,"tag":530,"props":636,"children":638},{"className":637},[],[639],{"type":510,"value":621},{"type":510,"value":641},"：",{"type":504,"tag":522,"props":643,"children":644},{},[645],{"type":510,"value":646},"也会批处理",{"type":510,"value":648},"（一次 render）",{"type":504,"tag":575,"props":650,"children":651},{},[652,658,660,666,668,673,674],{"type":504,"tag":530,"props":653,"children":655},{"className":654},[],[656],{"type":510,"value":657},"Promise.then",{"type":510,"value":659}," \u002F ",{"type":504,"tag":530,"props":661,"children":663},{"className":662},[],[664],{"type":510,"value":665},"async\u002Fawait",{"type":510,"value":667}," 之后的多次 ",{"type":504,"tag":530,"props":669,"children":671},{"className":670},[],[672],{"type":510,"value":621},{"type":510,"value":641},{"type":504,"tag":522,"props":675,"children":676},{},[677],{"type":510,"value":646},{"type":504,"tag":512,"props":679,"children":680},{},[681],{"type":504,"tag":516,"props":682,"children":683},{},[684],{"type":510,"value":685},"直观记法：React 18 更倾向于“这一轮任务里触发的更新一起算”。",{"type":504,"tag":602,"props":687,"children":689},{"id":688},"_22-你需要理解的边界",[690],{"type":510,"value":691},"2.2 你需要理解的边界",{"type":504,"tag":571,"props":693,"children":694},{},[695,707],{"type":504,"tag":575,"props":696,"children":697},{},[698,700,705],{"type":510,"value":699},"批处理发生在 ",{"type":504,"tag":522,"props":701,"children":702},{},[703],{"type":510,"value":704},"render\u002Fcommit 的调度层面",{"type":510,"value":706},"：多次更新会被合并成一次渲染提交",{"type":504,"tag":575,"props":708,"children":709},{},[710,712],{"type":510,"value":711},"但并不是“永远只渲染一次”：\n",{"type":504,"tag":571,"props":713,"children":714},{},[715,720],{"type":504,"tag":575,"props":716,"children":717},{},[718],{"type":510,"value":719},"如果你跨了多个 tick（多个宏任务\u002F多次事件触发），仍然会多次渲染",{"type":504,"tag":575,"props":721,"children":722},{},[723,728],{"type":504,"tag":530,"props":724,"children":726},{"className":725},[],[727],{"type":510,"value":535},{"type":510,"value":729}," 会打断批处理（见下文）",{"type":504,"tag":539,"props":731,"children":733},{"id":732},"_3-为什么你会感觉行为变了项目常见坑",[734],{"type":510,"value":735},"3. 为什么你会“感觉行为变了”？（项目常见坑）",{"type":504,"tag":602,"props":737,"children":739},{"id":738},"坑-1第三方库需要立刻读-dom但-dom-还没更新",[740],{"type":510,"value":741},"坑 1：第三方库需要立刻读 DOM，但 DOM 还没更新",{"type":504,"tag":516,"props":743,"children":744},{},[745],{"type":510,"value":746},"典型场景：",{"type":504,"tag":571,"props":748,"children":749},{},[750,762],{"type":504,"tag":575,"props":751,"children":752},{},[753,755,760],{"type":510,"value":754},"调用 ",{"type":504,"tag":530,"props":756,"children":758},{"className":757},[],[759],{"type":510,"value":621},{"type":510,"value":761}," 后马上初始化\u002F刷新一个第三方 UI（图表、富文本、地图）",{"type":504,"tag":575,"props":763,"children":764},{},[765,767,773],{"type":510,"value":766},"或者你需要在更新后立刻 ",{"type":504,"tag":530,"props":768,"children":770},{"className":769},[],[771],{"type":510,"value":772},"getBoundingClientRect()",{"type":510,"value":774}," 读取布局",{"type":504,"tag":516,"props":776,"children":777},{},[778],{"type":510,"value":779},"在 React 18 的自动批处理下，这个“马上”可能发生在 DOM commit 之前。",{"type":504,"tag":602,"props":781,"children":783},{"id":782},"坑-2依赖渲染次数的副作用不推荐的写法",[784],{"type":510,"value":785},"坑 2：依赖“渲染次数”的副作用（不推荐的写法）",{"type":504,"tag":516,"props":787,"children":788},{},[789],{"type":510,"value":790},"例如把某些逻辑隐式地绑定到“每次 setState 都会触发一次渲染\u002F一次 effect”。React 18 更强的批处理会让这种假设失效。",{"type":504,"tag":539,"props":792,"children":794},{"id":793},"_4-flushsync什么时候用怎么用",[795],{"type":510,"value":796},"4. flushSync：什么时候用？怎么用？",{"type":504,"tag":516,"props":798,"children":799},{},[800,805],{"type":504,"tag":530,"props":801,"children":803},{"className":802},[],[804],{"type":510,"value":535},{"type":510,"value":806}," 的作用：",{"type":504,"tag":571,"props":808,"children":809},{},[810,822],{"type":504,"tag":575,"props":811,"children":812},{},[813,815,820],{"type":510,"value":814},"让 React ",{"type":504,"tag":522,"props":816,"children":817},{},[818],{"type":510,"value":819},"立即处理并提交",{"type":510,"value":821},"你包裹的更新",{"type":504,"tag":575,"props":823,"children":824},{},[825],{"type":510,"value":826},"强行把更新从“可能批处理\u002F延后 commit”变成“现在就 commit”",{"type":504,"tag":516,"props":828,"children":829},{},[830],{"type":510,"value":831},"示例（伪代码）：",{"type":504,"tag":833,"props":834,"children":839},"pre",{"className":835,"code":836,"language":837,"meta":838,"style":838},"language-ts shiki shiki-themes github-light github-dark","import { flushSync } from 'react-dom'\n\nfunction onOpen() {\n  flushSync(() => {\n    setOpen(true)\n  })\n  \u002F\u002F 这里开始，DOM 已经提交（open=true 对应的节点已存在）\n  thirdPartyWidget.mount(document.querySelector('#panel')!)\n}\n","ts","",[840],{"type":504,"tag":530,"props":841,"children":842},{"__ignoreMap":838},[843,872,882,902,926,951,960,970,1017],{"type":504,"tag":844,"props":845,"children":848},"span",{"class":846,"line":847},"line",1,[849,855,861,866],{"type":504,"tag":844,"props":850,"children":852},{"style":851},"--shiki-default:#D73A49;--shiki-dark:#F97583",[853],{"type":510,"value":854},"import",{"type":504,"tag":844,"props":856,"children":858},{"style":857},"--shiki-default:#24292E;--shiki-dark:#E1E4E8",[859],{"type":510,"value":860}," { flushSync } ",{"type":504,"tag":844,"props":862,"children":863},{"style":851},[864],{"type":510,"value":865},"from",{"type":504,"tag":844,"props":867,"children":869},{"style":868},"--shiki-default:#032F62;--shiki-dark:#9ECBFF",[870],{"type":510,"value":871}," 'react-dom'\n",{"type":504,"tag":844,"props":873,"children":875},{"class":846,"line":874},2,[876],{"type":504,"tag":844,"props":877,"children":879},{"emptyLinePlaceholder":878},true,[880],{"type":510,"value":881},"\n",{"type":504,"tag":844,"props":883,"children":885},{"class":846,"line":884},3,[886,891,897],{"type":504,"tag":844,"props":887,"children":888},{"style":851},[889],{"type":510,"value":890},"function",{"type":504,"tag":844,"props":892,"children":894},{"style":893},"--shiki-default:#6F42C1;--shiki-dark:#B392F0",[895],{"type":510,"value":896}," onOpen",{"type":504,"tag":844,"props":898,"children":899},{"style":857},[900],{"type":510,"value":901},"() {\n",{"type":504,"tag":844,"props":903,"children":905},{"class":846,"line":904},4,[906,911,916,921],{"type":504,"tag":844,"props":907,"children":908},{"style":893},[909],{"type":510,"value":910},"  flushSync",{"type":504,"tag":844,"props":912,"children":913},{"style":857},[914],{"type":510,"value":915},"(() ",{"type":504,"tag":844,"props":917,"children":918},{"style":851},[919],{"type":510,"value":920},"=>",{"type":504,"tag":844,"props":922,"children":923},{"style":857},[924],{"type":510,"value":925}," {\n",{"type":504,"tag":844,"props":927,"children":929},{"class":846,"line":928},5,[930,935,940,946],{"type":504,"tag":844,"props":931,"children":932},{"style":893},[933],{"type":510,"value":934},"    setOpen",{"type":504,"tag":844,"props":936,"children":937},{"style":857},[938],{"type":510,"value":939},"(",{"type":504,"tag":844,"props":941,"children":943},{"style":942},"--shiki-default:#005CC5;--shiki-dark:#79B8FF",[944],{"type":510,"value":945},"true",{"type":504,"tag":844,"props":947,"children":948},{"style":857},[949],{"type":510,"value":950},")\n",{"type":504,"tag":844,"props":952,"children":954},{"class":846,"line":953},6,[955],{"type":504,"tag":844,"props":956,"children":957},{"style":857},[958],{"type":510,"value":959},"  })\n",{"type":504,"tag":844,"props":961,"children":963},{"class":846,"line":962},7,[964],{"type":504,"tag":844,"props":965,"children":967},{"style":966},"--shiki-default:#6A737D;--shiki-dark:#6A737D",[968],{"type":510,"value":969},"  \u002F\u002F 这里开始，DOM 已经提交（open=true 对应的节点已存在）\n",{"type":504,"tag":844,"props":971,"children":973},{"class":846,"line":972},8,[974,979,984,989,994,998,1003,1008,1013],{"type":504,"tag":844,"props":975,"children":976},{"style":857},[977],{"type":510,"value":978},"  thirdPartyWidget.",{"type":504,"tag":844,"props":980,"children":981},{"style":893},[982],{"type":510,"value":983},"mount",{"type":504,"tag":844,"props":985,"children":986},{"style":857},[987],{"type":510,"value":988},"(document.",{"type":504,"tag":844,"props":990,"children":991},{"style":893},[992],{"type":510,"value":993},"querySelector",{"type":504,"tag":844,"props":995,"children":996},{"style":857},[997],{"type":510,"value":939},{"type":504,"tag":844,"props":999,"children":1000},{"style":868},[1001],{"type":510,"value":1002},"'#panel'",{"type":504,"tag":844,"props":1004,"children":1005},{"style":857},[1006],{"type":510,"value":1007},")",{"type":504,"tag":844,"props":1009,"children":1010},{"style":851},[1011],{"type":510,"value":1012},"!",{"type":504,"tag":844,"props":1014,"children":1015},{"style":857},[1016],{"type":510,"value":950},{"type":504,"tag":844,"props":1018,"children":1020},{"class":846,"line":1019},9,[1021],{"type":504,"tag":844,"props":1022,"children":1023},{"style":857},[1024],{"type":510,"value":1025},"}\n",{"type":504,"tag":602,"props":1027,"children":1029},{"id":1028},"使用建议架构层面的约束",[1030],{"type":510,"value":1031},"使用建议（架构层面的约束）",{"type":504,"tag":571,"props":1033,"children":1034},{},[1035,1072],{"type":504,"tag":575,"props":1036,"children":1037},{},[1038,1043,1045],{"type":504,"tag":522,"props":1039,"children":1040},{},[1041],{"type":510,"value":1042},"优先解法",{"type":510,"value":1044},"：把“读 DOM \u002F 调第三方库”的逻辑放到\n",{"type":504,"tag":571,"props":1046,"children":1047},{},[1048,1059],{"type":504,"tag":575,"props":1049,"children":1050},{},[1051,1057],{"type":504,"tag":530,"props":1052,"children":1054},{"className":1053},[],[1055],{"type":510,"value":1056},"useLayoutEffect",{"type":510,"value":1058},"（需要同步读布局）",{"type":504,"tag":575,"props":1060,"children":1061},{},[1062,1064,1070],{"type":510,"value":1063},"或 ",{"type":504,"tag":530,"props":1065,"children":1067},{"className":1066},[],[1068],{"type":510,"value":1069},"useEffect",{"type":510,"value":1071},"（不需要同步）",{"type":504,"tag":575,"props":1073,"children":1074},{},[1075,1080,1082],{"type":504,"tag":522,"props":1076,"children":1077},{},[1078],{"type":510,"value":1079},"只在必要时使用 flushSync",{"type":510,"value":1081},"：\n",{"type":504,"tag":571,"props":1083,"children":1084},{},[1085,1090],{"type":504,"tag":575,"props":1086,"children":1087},{},[1088],{"type":510,"value":1089},"例如必须在同一调用栈内拿到最新 DOM",{"type":504,"tag":575,"props":1091,"children":1092},{},[1093],{"type":510,"value":1094},"或外部系统的 API 约束无法改变",{"type":504,"tag":512,"props":1096,"children":1097},{},[1098],{"type":504,"tag":516,"props":1099,"children":1100},{},[1101,1103,1108],{"type":510,"value":1102},"记住：",{"type":504,"tag":530,"props":1104,"children":1106},{"className":1105},[],[1107],{"type":510,"value":535},{"type":510,"value":1109}," 是“逃生阀”，不是常规工具。滥用会降低并发能力，影响响应性。",{"type":504,"tag":539,"props":1111,"children":1113},{"id":1112},"_5-与并发concurrent-transition-的关系",[1114],{"type":510,"value":1115},"5. 与并发（Concurrent）\u002F Transition 的关系",{"type":504,"tag":571,"props":1117,"children":1118},{},[1119,1131,1143],{"type":504,"tag":575,"props":1120,"children":1121},{},[1122,1124,1129],{"type":510,"value":1123},"自动批处理解决的是“",{"type":504,"tag":522,"props":1125,"children":1126},{},[1127],{"type":510,"value":1128},"同一轮更新少渲染",{"type":510,"value":1130},"”",{"type":504,"tag":575,"props":1132,"children":1133},{},[1134,1136,1141],{"type":510,"value":1135},"Transition 解决的是“",{"type":504,"tag":522,"props":1137,"children":1138},{},[1139],{"type":510,"value":1140},"让不紧急的更新可被打断\u002F延后",{"type":510,"value":1142},"”，优先保证交互",{"type":504,"tag":575,"props":1144,"children":1145},{},[1146,1151,1153,1158],{"type":504,"tag":530,"props":1147,"children":1149},{"className":1148},[],[1150],{"type":510,"value":535},{"type":510,"value":1152}," 则相反：它要求“",{"type":504,"tag":522,"props":1154,"children":1155},{},[1156],{"type":510,"value":1157},"立刻同步提交",{"type":510,"value":1159},"”，会压缩 React 的调度空间",{"type":504,"tag":516,"props":1161,"children":1162},{},[1163],{"type":510,"value":1164},"因此在体验治理上通常是：",{"type":504,"tag":571,"props":1166,"children":1167},{},[1168,1173],{"type":504,"tag":575,"props":1169,"children":1170},{},[1171],{"type":510,"value":1172},"大型更新：考虑 Transition",{"type":504,"tag":575,"props":1174,"children":1175},{},[1176],{"type":510,"value":1177},"必须立刻落 DOM：才用 flushSync",{"type":504,"tag":539,"props":1179,"children":1181},{"id":1180},"_6-自检清单checklist",[1182],{"type":510,"value":1183},"6. 自检清单（Checklist）",{"type":504,"tag":571,"props":1185,"children":1188},{"className":1186},[1187],"contains-task-list",[1189,1215,1224],{"type":504,"tag":575,"props":1190,"children":1193},{"className":1191},[1192],"task-list-item",[1194,1199,1201,1206,1208,1213],{"type":504,"tag":1195,"props":1196,"children":1198},"input",{"disabled":878,"type":1197},"checkbox",[],{"type":510,"value":1200}," 是否存在 ",{"type":504,"tag":530,"props":1202,"children":1204},{"className":1203},[],[1205],{"type":510,"value":621},{"type":510,"value":1207}," 后立刻读 DOM 的逻辑？能否迁移到 ",{"type":504,"tag":530,"props":1209,"children":1211},{"className":1210},[],[1212],{"type":510,"value":1056},{"type":510,"value":1214},"？",{"type":504,"tag":575,"props":1216,"children":1218},{"className":1217},[1192],[1219,1222],{"type":504,"tag":1195,"props":1220,"children":1221},{"disabled":878,"type":1197},[],{"type":510,"value":1223}," 是否存在依赖“渲染次数\u002F时序”的隐式逻辑？能否改成显式状态机\u002F显式 effect？",{"type":504,"tag":575,"props":1225,"children":1227},{"className":1226},[1192],[1228,1231,1233,1238],{"type":504,"tag":1195,"props":1229,"children":1230},{"disabled":878,"type":1197},[],{"type":510,"value":1232}," 是否因为第三方库被迫用 ",{"type":504,"tag":530,"props":1234,"children":1236},{"className":1235},[],[1237],{"type":510,"value":535},{"type":510,"value":1239},"？是否能封装成适配层，避免扩散？",{"type":504,"tag":539,"props":1241,"children":1243},{"id":1242},"关联阅读",[1244],{"type":510,"value":1242},{"type":504,"tag":571,"props":1246,"children":1247},{},[1248,1264,1279],{"type":504,"tag":575,"props":1249,"children":1250},{},[1251,1253],{"type":510,"value":1252},"并发模式概念：",{"type":504,"tag":1254,"props":1255,"children":1257},"a",{"href":1256},"..\u002F03-concurrent-mode\u002F01-concept.md",[1258],{"type":504,"tag":530,"props":1259,"children":1261},{"className":1260},[],[1262],{"type":510,"value":1263},"notes\u002F03-concurrent-mode\u002F01-concept.md",{"type":504,"tag":575,"props":1265,"children":1266},{},[1267,1269],{"type":510,"value":1268},"时间切片：",{"type":504,"tag":1254,"props":1270,"children":1272},{"href":1271},"..\u002F03-concurrent-mode\u002F10-time-slicing.md",[1273],{"type":504,"tag":530,"props":1274,"children":1276},{"className":1275},[],[1277],{"type":510,"value":1278},"notes\u002F03-concurrent-mode\u002F10-time-slicing.md",{"type":504,"tag":575,"props":1280,"children":1281},{},[1282,1284],{"type":510,"value":1283},"面试题：setState 同步还是异步：",{"type":504,"tag":1254,"props":1285,"children":1287},{"href":1286},"..\u002F08-interview\u002F05-setState-sync-or-async.md",[1288],{"type":504,"tag":530,"props":1289,"children":1291},{"className":1290},[],[1292],{"type":510,"value":1293},"notes\u002F08-interview\u002F05-setState-sync-or-async.md",{"type":504,"tag":1295,"props":1296,"children":1297},"style",{},[1298],{"type":510,"value":1299},"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":838,"searchDepth":874,"depth":874,"links":1301},[1302,1303,1307,1311,1314,1315,1316],{"id":541,"depth":874,"text":544},{"id":597,"depth":874,"text":600,"children":1304},[1305,1306],{"id":604,"depth":884,"text":607},{"id":688,"depth":884,"text":691},{"id":732,"depth":874,"text":735,"children":1308},[1309,1310],{"id":738,"depth":884,"text":741},{"id":782,"depth":884,"text":785},{"id":793,"depth":874,"text":796,"children":1312},[1313],{"id":1028,"depth":884,"text":1031},{"id":1112,"depth":874,"text":1115},{"id":1180,"depth":874,"text":1183},{"id":1242,"depth":874,"text":1242},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1318},"\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":1320},"\u003Cpath fill=\"currentColor\" d=\"M3 4h18v2H3zm0 7h12v2H3zm0 7h18v2H3z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1322},"\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":1324,"height":1324,"rotate":4,"vFlip":6,"hFlip":6,"body":1325},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>"]