[{"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-14-performance\u002F02-rendering-optimization-memo-context-virtualization":494,"i-ri:arrow-left-s-line":3589,"i-ri:menu-2-line":3591,"i-ri:arrow-right-s-line":3593,"i-ep:copy-document":3595},{"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":439,"path":439,"title":440,"updatedAt":21,"meta":498,"body":500,"toc":3569},"bm90ZTpub3Rlcy9yZWFjdC8xNC1wZXJmb3JtYW5jZS8wMi1yZW5kZXJpbmctb3B0aW1pemF0aW9uLW1lbW8tY29udGV4dC12aXJ0dWFsaXphdGlvbi5tZA","note","notes\u002Freact\u002F14-performance\u002F02-rendering-optimization-memo-context-virtualization.md",{"id":495,"type":496,"sourcePath":497,"slug":499,"title":440,"updatedAt":21,"lastUpdated":21},"react\u002F14-performance\u002F02-rendering-optimization-memo-context-virtualization",{"type":501,"children":502},"root",[503,511,552,556,581,586,598,608,625,868,897,908,927,937,1417,1428,1438,1804,1807,1813,1825,1831,2292,2347,2353,2358,2870,2897,2900,2906,2918,2935,2940,3030,3035,3040,3107,3122,3476,3479,3485,3564],{"type":504,"tag":505,"props":506,"children":508},"element","h1",{"id":507},"react-渲染性能优化memo-context-与虚拟化",[509],{"type":510,"value":440},"text",{"type":504,"tag":512,"props":513,"children":514},"blockquote",{},[515],{"type":504,"tag":516,"props":517,"children":518},"p",{},[519,525,527,534,536,542,544,550],{"type":504,"tag":520,"props":521,"children":522},"strong",{},[523],{"type":510,"value":524},"一句话结论",{"type":510,"value":526},"：通过 ",{"type":504,"tag":528,"props":529,"children":531},"code",{"className":530},[],[532],{"type":510,"value":533},"React.memo",{"type":510,"value":535}," 及其 hooks 变体 (",{"type":504,"tag":528,"props":537,"children":539},{"className":538},[],[540],{"type":510,"value":541},"useMemo",{"type":510,"value":543},", ",{"type":504,"tag":528,"props":545,"children":547},{"className":546},[],[548],{"type":510,"value":549},"useCallback",{"type":510,"value":551},") 精准控制组件重渲染，优化 Context 的消费粒度，并对长列表实施虚拟化，是解决 React 应用渲染性能问题的三大核心手段。",{"type":504,"tag":553,"props":554,"children":555},"hr",{},[],{"type":504,"tag":557,"props":558,"children":560},"h2",{"id":559},"_1-精准控制重渲染memo-usememo-usecallback",[561,563,569,570,575,576],{"type":510,"value":562},"1. 精准控制重渲染：",{"type":504,"tag":528,"props":564,"children":566},{"className":565},[],[567],{"type":510,"value":568},"memo",{"type":510,"value":543},{"type":504,"tag":528,"props":571,"children":573},{"className":572},[],[574],{"type":510,"value":541},{"type":510,"value":543},{"type":504,"tag":528,"props":577,"children":579},{"className":578},[],[580],{"type":510,"value":549},{"type":504,"tag":516,"props":582,"children":583},{},[584],{"type":510,"value":585},"不必要的重渲染是 React 性能下降的首要原因。当一个组件的 props 或 state 变化时，它会重渲染。如果父组件重渲染，默认情况下其所有子组件也会重渲染。",{"type":504,"tag":587,"props":588,"children":590},"h3",{"id":589},"reactmemo组件级别的渲染守卫",[591,596],{"type":504,"tag":528,"props":592,"children":594},{"className":593},[],[595],{"type":510,"value":533},{"type":510,"value":597},"：组件级别的渲染守卫",{"type":504,"tag":516,"props":599,"children":600},{},[601,606],{"type":504,"tag":528,"props":602,"children":604},{"className":603},[],[605],{"type":510,"value":533},{"type":510,"value":607}," 是一个高阶组件 (HOC)，它对其包裹的组件进行浅比较 (shallow compare)。只有当 props 发生变化时，组件才会重渲染。",{"type":504,"tag":516,"props":609,"children":610},{},[611,616,618,623],{"type":504,"tag":520,"props":612,"children":613},{},[614],{"type":510,"value":615},"何时使用？",{"type":510,"value":617},"\n当一个组件",{"type":504,"tag":520,"props":619,"children":620},{},[621],{"type":510,"value":622},"经常因为父组件重渲染而重渲染，但其自身的 props 并未改变",{"type":510,"value":624},"时。特别适用于渲染成本较高的纯展示组件。",{"type":504,"tag":626,"props":627,"children":632},"pre",{"className":628,"code":629,"language":630,"meta":631,"style":631},"language-jsx shiki shiki-themes github-light github-dark","\u002F\u002F ExpensiveComponent.js\nimport React from 'react';\n\nfunction ExpensiveComponent({ data }) {\n  \u002F\u002F 假设这里有复杂的计算或渲染逻辑\n  console.log('Rendering ExpensiveComponent...');\n  return \u003Cdiv>{JSON.stringify(data)}\u003C\u002Fdiv>;\n}\n\n\u002F\u002F 使用 React.memo 包裹\nexport default React.memo(ExpensiveComponent);\n","jsx","",[633],{"type":504,"tag":528,"props":634,"children":635},{"__ignoreMap":631},[636,648,680,690,721,730,759,814,823,831,840],{"type":504,"tag":637,"props":638,"children":641},"span",{"class":639,"line":640},"line",1,[642],{"type":504,"tag":637,"props":643,"children":645},{"style":644},"--shiki-default:#6A737D;--shiki-dark:#6A737D",[646],{"type":510,"value":647},"\u002F\u002F ExpensiveComponent.js\n",{"type":504,"tag":637,"props":649,"children":651},{"class":639,"line":650},2,[652,658,664,669,675],{"type":504,"tag":637,"props":653,"children":655},{"style":654},"--shiki-default:#D73A49;--shiki-dark:#F97583",[656],{"type":510,"value":657},"import",{"type":504,"tag":637,"props":659,"children":661},{"style":660},"--shiki-default:#24292E;--shiki-dark:#E1E4E8",[662],{"type":510,"value":663}," React ",{"type":504,"tag":637,"props":665,"children":666},{"style":654},[667],{"type":510,"value":668},"from",{"type":504,"tag":637,"props":670,"children":672},{"style":671},"--shiki-default:#032F62;--shiki-dark:#9ECBFF",[673],{"type":510,"value":674}," 'react'",{"type":504,"tag":637,"props":676,"children":677},{"style":660},[678],{"type":510,"value":679},";\n",{"type":504,"tag":637,"props":681,"children":683},{"class":639,"line":682},3,[684],{"type":504,"tag":637,"props":685,"children":687},{"emptyLinePlaceholder":686},true,[688],{"type":510,"value":689},"\n",{"type":504,"tag":637,"props":691,"children":693},{"class":639,"line":692},4,[694,699,705,710,716],{"type":504,"tag":637,"props":695,"children":696},{"style":654},[697],{"type":510,"value":698},"function",{"type":504,"tag":637,"props":700,"children":702},{"style":701},"--shiki-default:#6F42C1;--shiki-dark:#B392F0",[703],{"type":510,"value":704}," ExpensiveComponent",{"type":504,"tag":637,"props":706,"children":707},{"style":660},[708],{"type":510,"value":709},"({ ",{"type":504,"tag":637,"props":711,"children":713},{"style":712},"--shiki-default:#E36209;--shiki-dark:#FFAB70",[714],{"type":510,"value":715},"data",{"type":504,"tag":637,"props":717,"children":718},{"style":660},[719],{"type":510,"value":720}," }) {\n",{"type":504,"tag":637,"props":722,"children":724},{"class":639,"line":723},5,[725],{"type":504,"tag":637,"props":726,"children":727},{"style":644},[728],{"type":510,"value":729},"  \u002F\u002F 假设这里有复杂的计算或渲染逻辑\n",{"type":504,"tag":637,"props":731,"children":733},{"class":639,"line":732},6,[734,739,744,749,754],{"type":504,"tag":637,"props":735,"children":736},{"style":660},[737],{"type":510,"value":738},"  console.",{"type":504,"tag":637,"props":740,"children":741},{"style":701},[742],{"type":510,"value":743},"log",{"type":504,"tag":637,"props":745,"children":746},{"style":660},[747],{"type":510,"value":748},"(",{"type":504,"tag":637,"props":750,"children":751},{"style":671},[752],{"type":510,"value":753},"'Rendering ExpensiveComponent...'",{"type":504,"tag":637,"props":755,"children":756},{"style":660},[757],{"type":510,"value":758},");\n",{"type":504,"tag":637,"props":760,"children":762},{"class":639,"line":761},7,[763,768,773,779,784,790,795,800,805,809],{"type":504,"tag":637,"props":764,"children":765},{"style":654},[766],{"type":510,"value":767},"  return",{"type":504,"tag":637,"props":769,"children":770},{"style":660},[771],{"type":510,"value":772}," \u003C",{"type":504,"tag":637,"props":774,"children":776},{"style":775},"--shiki-default:#22863A;--shiki-dark:#85E89D",[777],{"type":510,"value":778},"div",{"type":504,"tag":637,"props":780,"children":781},{"style":660},[782],{"type":510,"value":783},">{",{"type":504,"tag":637,"props":785,"children":787},{"style":786},"--shiki-default:#005CC5;--shiki-dark:#79B8FF",[788],{"type":510,"value":789},"JSON",{"type":504,"tag":637,"props":791,"children":792},{"style":660},[793],{"type":510,"value":794},".",{"type":504,"tag":637,"props":796,"children":797},{"style":701},[798],{"type":510,"value":799},"stringify",{"type":504,"tag":637,"props":801,"children":802},{"style":660},[803],{"type":510,"value":804},"(data)}\u003C\u002F",{"type":504,"tag":637,"props":806,"children":807},{"style":775},[808],{"type":510,"value":778},{"type":504,"tag":637,"props":810,"children":811},{"style":660},[812],{"type":510,"value":813},">;\n",{"type":504,"tag":637,"props":815,"children":817},{"class":639,"line":816},8,[818],{"type":504,"tag":637,"props":819,"children":820},{"style":660},[821],{"type":510,"value":822},"}\n",{"type":504,"tag":637,"props":824,"children":826},{"class":639,"line":825},9,[827],{"type":504,"tag":637,"props":828,"children":829},{"emptyLinePlaceholder":686},[830],{"type":510,"value":689},{"type":504,"tag":637,"props":832,"children":834},{"class":639,"line":833},10,[835],{"type":504,"tag":637,"props":836,"children":837},{"style":644},[838],{"type":510,"value":839},"\u002F\u002F 使用 React.memo 包裹\n",{"type":504,"tag":637,"props":841,"children":843},{"class":639,"line":842},11,[844,849,854,859,863],{"type":504,"tag":637,"props":845,"children":846},{"style":654},[847],{"type":510,"value":848},"export",{"type":504,"tag":637,"props":850,"children":851},{"style":654},[852],{"type":510,"value":853}," default",{"type":504,"tag":637,"props":855,"children":856},{"style":660},[857],{"type":510,"value":858}," React.",{"type":504,"tag":637,"props":860,"children":861},{"style":701},[862],{"type":510,"value":568},{"type":504,"tag":637,"props":864,"children":865},{"style":660},[866],{"type":510,"value":867},"(ExpensiveComponent);\n",{"type":504,"tag":516,"props":869,"children":870},{},[871,881,883,888,890,895],{"type":504,"tag":520,"props":872,"children":873},{},[874,876],{"type":510,"value":875},"常见误区：过度使用 ",{"type":504,"tag":528,"props":877,"children":879},{"className":878},[],[880],{"type":510,"value":568},{"type":510,"value":882},"\n不要盲目地包裹所有组件。",{"type":504,"tag":528,"props":884,"children":886},{"className":885},[],[887],{"type":510,"value":568},{"type":510,"value":889}," 自身的比较过程也有开销。如果一个组件的 props 几乎每次都会变，或者组件本身非常轻量，使用 ",{"type":504,"tag":528,"props":891,"children":893},{"className":892},[],[894],{"type":510,"value":568},{"type":510,"value":896}," 反而会得不偿失。",{"type":504,"tag":587,"props":898,"children":900},{"id":899},"usecallback稳定化函数-props",[901,906],{"type":504,"tag":528,"props":902,"children":904},{"className":903},[],[905],{"type":510,"value":549},{"type":510,"value":907},"：稳定化函数 props",{"type":504,"tag":516,"props":909,"children":910},{},[911,913,918,920,925],{"type":510,"value":912},"当你将一个函数作为 prop 传递给一个被 ",{"type":504,"tag":528,"props":914,"children":916},{"className":915},[],[917],{"type":510,"value":568},{"type":510,"value":919}," 包裹的子组件时，问题就来了。父组件每次重渲染，都会创建一个新的函数实例，导致子组件的 ",{"type":504,"tag":528,"props":921,"children":923},{"className":922},[],[924],{"type":510,"value":568},{"type":510,"value":926}," 浅比较失败，从而引发不必要的重渲染。",{"type":504,"tag":516,"props":928,"children":929},{},[930,935],{"type":504,"tag":528,"props":931,"children":933},{"className":932},[],[934],{"type":510,"value":549},{"type":510,"value":936}," 会缓存这个函数实例，仅当其依赖项数组中的值发生变化时，才重新创建一个新的函数。",{"type":504,"tag":626,"props":938,"children":940},{"className":628,"code":939,"language":630,"meta":631,"style":631},"\u002F\u002F ParentComponent.js\nimport { useState, useCallback } from 'react';\nimport MemoizedChild from '.\u002FMemoizedChild';\n\nfunction ParentComponent() {\n  const [count, setCount] = useState(0);\n  const [text, setText] = useState('');\n\n  \u002F\u002F 如果不使用 useCallback，每次 Parent 重渲染，handleClick 都是新函数\n  const handleClick = useCallback(() => {\n    \u002F\u002F 仅依赖 count，所以只有 count 变化时，handleClick 才会是新函数\n    console.log(`Button clicked! Count is ${count}`);\n  }, [count]);\n\n  return (\n    \u003Cdiv>\n      \u003Cinput value={text} onChange={(e) => setText(e.target.value)} \u002F>\n      {\u002F* 当 text 变化导致 Parent 重渲染时，handleClick 保持稳定，MemoizedChild 不会重渲染 *\u002F}\n      \u003CMemoizedChild onClick={handleClick} \u002F>\n    \u003C\u002Fdiv>\n  );\n}\n",[941],{"type":504,"tag":528,"props":942,"children":943},{"__ignoreMap":631},[944,952,976,1001,1008,1025,1080,1129,1136,1144,1181,1189,1224,1233,1241,1254,1272,1338,1356,1383,1400,1409],{"type":504,"tag":637,"props":945,"children":946},{"class":639,"line":640},[947],{"type":504,"tag":637,"props":948,"children":949},{"style":644},[950],{"type":510,"value":951},"\u002F\u002F ParentComponent.js\n",{"type":504,"tag":637,"props":953,"children":954},{"class":639,"line":650},[955,959,964,968,972],{"type":504,"tag":637,"props":956,"children":957},{"style":654},[958],{"type":510,"value":657},{"type":504,"tag":637,"props":960,"children":961},{"style":660},[962],{"type":510,"value":963}," { useState, useCallback } ",{"type":504,"tag":637,"props":965,"children":966},{"style":654},[967],{"type":510,"value":668},{"type":504,"tag":637,"props":969,"children":970},{"style":671},[971],{"type":510,"value":674},{"type":504,"tag":637,"props":973,"children":974},{"style":660},[975],{"type":510,"value":679},{"type":504,"tag":637,"props":977,"children":978},{"class":639,"line":682},[979,983,988,992,997],{"type":504,"tag":637,"props":980,"children":981},{"style":654},[982],{"type":510,"value":657},{"type":504,"tag":637,"props":984,"children":985},{"style":660},[986],{"type":510,"value":987}," MemoizedChild ",{"type":504,"tag":637,"props":989,"children":990},{"style":654},[991],{"type":510,"value":668},{"type":504,"tag":637,"props":993,"children":994},{"style":671},[995],{"type":510,"value":996}," '.\u002FMemoizedChild'",{"type":504,"tag":637,"props":998,"children":999},{"style":660},[1000],{"type":510,"value":679},{"type":504,"tag":637,"props":1002,"children":1003},{"class":639,"line":692},[1004],{"type":504,"tag":637,"props":1005,"children":1006},{"emptyLinePlaceholder":686},[1007],{"type":510,"value":689},{"type":504,"tag":637,"props":1009,"children":1010},{"class":639,"line":723},[1011,1015,1020],{"type":504,"tag":637,"props":1012,"children":1013},{"style":654},[1014],{"type":510,"value":698},{"type":504,"tag":637,"props":1016,"children":1017},{"style":701},[1018],{"type":510,"value":1019}," ParentComponent",{"type":504,"tag":637,"props":1021,"children":1022},{"style":660},[1023],{"type":510,"value":1024},"() {\n",{"type":504,"tag":637,"props":1026,"children":1027},{"class":639,"line":732},[1028,1033,1038,1043,1047,1052,1057,1062,1067,1071,1076],{"type":504,"tag":637,"props":1029,"children":1030},{"style":654},[1031],{"type":510,"value":1032},"  const",{"type":504,"tag":637,"props":1034,"children":1035},{"style":660},[1036],{"type":510,"value":1037}," [",{"type":504,"tag":637,"props":1039,"children":1040},{"style":786},[1041],{"type":510,"value":1042},"count",{"type":504,"tag":637,"props":1044,"children":1045},{"style":660},[1046],{"type":510,"value":543},{"type":504,"tag":637,"props":1048,"children":1049},{"style":786},[1050],{"type":510,"value":1051},"setCount",{"type":504,"tag":637,"props":1053,"children":1054},{"style":660},[1055],{"type":510,"value":1056},"] ",{"type":504,"tag":637,"props":1058,"children":1059},{"style":654},[1060],{"type":510,"value":1061},"=",{"type":504,"tag":637,"props":1063,"children":1064},{"style":701},[1065],{"type":510,"value":1066}," useState",{"type":504,"tag":637,"props":1068,"children":1069},{"style":660},[1070],{"type":510,"value":748},{"type":504,"tag":637,"props":1072,"children":1073},{"style":786},[1074],{"type":510,"value":1075},"0",{"type":504,"tag":637,"props":1077,"children":1078},{"style":660},[1079],{"type":510,"value":758},{"type":504,"tag":637,"props":1081,"children":1082},{"class":639,"line":761},[1083,1087,1091,1095,1099,1104,1108,1112,1116,1120,1125],{"type":504,"tag":637,"props":1084,"children":1085},{"style":654},[1086],{"type":510,"value":1032},{"type":504,"tag":637,"props":1088,"children":1089},{"style":660},[1090],{"type":510,"value":1037},{"type":504,"tag":637,"props":1092,"children":1093},{"style":786},[1094],{"type":510,"value":510},{"type":504,"tag":637,"props":1096,"children":1097},{"style":660},[1098],{"type":510,"value":543},{"type":504,"tag":637,"props":1100,"children":1101},{"style":786},[1102],{"type":510,"value":1103},"setText",{"type":504,"tag":637,"props":1105,"children":1106},{"style":660},[1107],{"type":510,"value":1056},{"type":504,"tag":637,"props":1109,"children":1110},{"style":654},[1111],{"type":510,"value":1061},{"type":504,"tag":637,"props":1113,"children":1114},{"style":701},[1115],{"type":510,"value":1066},{"type":504,"tag":637,"props":1117,"children":1118},{"style":660},[1119],{"type":510,"value":748},{"type":504,"tag":637,"props":1121,"children":1122},{"style":671},[1123],{"type":510,"value":1124},"''",{"type":504,"tag":637,"props":1126,"children":1127},{"style":660},[1128],{"type":510,"value":758},{"type":504,"tag":637,"props":1130,"children":1131},{"class":639,"line":816},[1132],{"type":504,"tag":637,"props":1133,"children":1134},{"emptyLinePlaceholder":686},[1135],{"type":510,"value":689},{"type":504,"tag":637,"props":1137,"children":1138},{"class":639,"line":825},[1139],{"type":504,"tag":637,"props":1140,"children":1141},{"style":644},[1142],{"type":510,"value":1143},"  \u002F\u002F 如果不使用 useCallback，每次 Parent 重渲染，handleClick 都是新函数\n",{"type":504,"tag":637,"props":1145,"children":1146},{"class":639,"line":833},[1147,1151,1156,1161,1166,1171,1176],{"type":504,"tag":637,"props":1148,"children":1149},{"style":654},[1150],{"type":510,"value":1032},{"type":504,"tag":637,"props":1152,"children":1153},{"style":786},[1154],{"type":510,"value":1155}," handleClick",{"type":504,"tag":637,"props":1157,"children":1158},{"style":654},[1159],{"type":510,"value":1160}," =",{"type":504,"tag":637,"props":1162,"children":1163},{"style":701},[1164],{"type":510,"value":1165}," useCallback",{"type":504,"tag":637,"props":1167,"children":1168},{"style":660},[1169],{"type":510,"value":1170},"(() ",{"type":504,"tag":637,"props":1172,"children":1173},{"style":654},[1174],{"type":510,"value":1175},"=>",{"type":504,"tag":637,"props":1177,"children":1178},{"style":660},[1179],{"type":510,"value":1180}," {\n",{"type":504,"tag":637,"props":1182,"children":1183},{"class":639,"line":842},[1184],{"type":504,"tag":637,"props":1185,"children":1186},{"style":644},[1187],{"type":510,"value":1188},"    \u002F\u002F 仅依赖 count，所以只有 count 变化时，handleClick 才会是新函数\n",{"type":504,"tag":637,"props":1190,"children":1192},{"class":639,"line":1191},12,[1193,1198,1202,1206,1211,1215,1220],{"type":504,"tag":637,"props":1194,"children":1195},{"style":660},[1196],{"type":510,"value":1197},"    console.",{"type":504,"tag":637,"props":1199,"children":1200},{"style":701},[1201],{"type":510,"value":743},{"type":504,"tag":637,"props":1203,"children":1204},{"style":660},[1205],{"type":510,"value":748},{"type":504,"tag":637,"props":1207,"children":1208},{"style":671},[1209],{"type":510,"value":1210},"`Button clicked! Count is ${",{"type":504,"tag":637,"props":1212,"children":1213},{"style":660},[1214],{"type":510,"value":1042},{"type":504,"tag":637,"props":1216,"children":1217},{"style":671},[1218],{"type":510,"value":1219},"}`",{"type":504,"tag":637,"props":1221,"children":1222},{"style":660},[1223],{"type":510,"value":758},{"type":504,"tag":637,"props":1225,"children":1227},{"class":639,"line":1226},13,[1228],{"type":504,"tag":637,"props":1229,"children":1230},{"style":660},[1231],{"type":510,"value":1232},"  }, [count]);\n",{"type":504,"tag":637,"props":1234,"children":1236},{"class":639,"line":1235},14,[1237],{"type":504,"tag":637,"props":1238,"children":1239},{"emptyLinePlaceholder":686},[1240],{"type":510,"value":689},{"type":504,"tag":637,"props":1242,"children":1244},{"class":639,"line":1243},15,[1245,1249],{"type":504,"tag":637,"props":1246,"children":1247},{"style":654},[1248],{"type":510,"value":767},{"type":504,"tag":637,"props":1250,"children":1251},{"style":660},[1252],{"type":510,"value":1253}," (\n",{"type":504,"tag":637,"props":1255,"children":1257},{"class":639,"line":1256},16,[1258,1263,1267],{"type":504,"tag":637,"props":1259,"children":1260},{"style":660},[1261],{"type":510,"value":1262},"    \u003C",{"type":504,"tag":637,"props":1264,"children":1265},{"style":775},[1266],{"type":510,"value":778},{"type":504,"tag":637,"props":1268,"children":1269},{"style":660},[1270],{"type":510,"value":1271},">\n",{"type":504,"tag":637,"props":1273,"children":1275},{"class":639,"line":1274},17,[1276,1281,1286,1291,1295,1300,1305,1309,1314,1319,1324,1328,1333],{"type":504,"tag":637,"props":1277,"children":1278},{"style":660},[1279],{"type":510,"value":1280},"      \u003C",{"type":504,"tag":637,"props":1282,"children":1283},{"style":775},[1284],{"type":510,"value":1285},"input",{"type":504,"tag":637,"props":1287,"children":1288},{"style":701},[1289],{"type":510,"value":1290}," value",{"type":504,"tag":637,"props":1292,"children":1293},{"style":654},[1294],{"type":510,"value":1061},{"type":504,"tag":637,"props":1296,"children":1297},{"style":660},[1298],{"type":510,"value":1299},"{text} ",{"type":504,"tag":637,"props":1301,"children":1302},{"style":701},[1303],{"type":510,"value":1304},"onChange",{"type":504,"tag":637,"props":1306,"children":1307},{"style":654},[1308],{"type":510,"value":1061},{"type":504,"tag":637,"props":1310,"children":1311},{"style":660},[1312],{"type":510,"value":1313},"{(",{"type":504,"tag":637,"props":1315,"children":1316},{"style":712},[1317],{"type":510,"value":1318},"e",{"type":504,"tag":637,"props":1320,"children":1321},{"style":660},[1322],{"type":510,"value":1323},") ",{"type":504,"tag":637,"props":1325,"children":1326},{"style":654},[1327],{"type":510,"value":1175},{"type":504,"tag":637,"props":1329,"children":1330},{"style":701},[1331],{"type":510,"value":1332}," setText",{"type":504,"tag":637,"props":1334,"children":1335},{"style":660},[1336],{"type":510,"value":1337},"(e.target.value)} \u002F>\n",{"type":504,"tag":637,"props":1339,"children":1341},{"class":639,"line":1340},18,[1342,1347,1352],{"type":504,"tag":637,"props":1343,"children":1344},{"style":660},[1345],{"type":510,"value":1346},"      {",{"type":504,"tag":637,"props":1348,"children":1349},{"style":644},[1350],{"type":510,"value":1351},"\u002F* 当 text 变化导致 Parent 重渲染时，handleClick 保持稳定，MemoizedChild 不会重渲染 *\u002F",{"type":504,"tag":637,"props":1353,"children":1354},{"style":660},[1355],{"type":510,"value":822},{"type":504,"tag":637,"props":1357,"children":1359},{"class":639,"line":1358},19,[1360,1364,1369,1374,1378],{"type":504,"tag":637,"props":1361,"children":1362},{"style":660},[1363],{"type":510,"value":1280},{"type":504,"tag":637,"props":1365,"children":1366},{"style":786},[1367],{"type":510,"value":1368},"MemoizedChild",{"type":504,"tag":637,"props":1370,"children":1371},{"style":701},[1372],{"type":510,"value":1373}," onClick",{"type":504,"tag":637,"props":1375,"children":1376},{"style":654},[1377],{"type":510,"value":1061},{"type":504,"tag":637,"props":1379,"children":1380},{"style":660},[1381],{"type":510,"value":1382},"{handleClick} \u002F>\n",{"type":504,"tag":637,"props":1384,"children":1386},{"class":639,"line":1385},20,[1387,1392,1396],{"type":504,"tag":637,"props":1388,"children":1389},{"style":660},[1390],{"type":510,"value":1391},"    \u003C\u002F",{"type":504,"tag":637,"props":1393,"children":1394},{"style":775},[1395],{"type":510,"value":778},{"type":504,"tag":637,"props":1397,"children":1398},{"style":660},[1399],{"type":510,"value":1271},{"type":504,"tag":637,"props":1401,"children":1403},{"class":639,"line":1402},21,[1404],{"type":504,"tag":637,"props":1405,"children":1406},{"style":660},[1407],{"type":510,"value":1408},"  );\n",{"type":504,"tag":637,"props":1410,"children":1412},{"class":639,"line":1411},22,[1413],{"type":504,"tag":637,"props":1414,"children":1415},{"style":660},[1416],{"type":510,"value":822},{"type":504,"tag":587,"props":1418,"children":1420},{"id":1419},"usememo缓存昂贵的计算结果",[1421,1426],{"type":504,"tag":528,"props":1422,"children":1424},{"className":1423},[],[1425],{"type":510,"value":541},{"type":510,"value":1427},"：缓存昂贵的计算结果",{"type":504,"tag":516,"props":1429,"children":1430},{},[1431,1436],{"type":504,"tag":528,"props":1432,"children":1434},{"className":1433},[],[1435],{"type":510,"value":541},{"type":510,"value":1437}," 用于缓存计算结果。它接收一个“创建”函数和依赖项数组。只有当依赖项发生变化时，它才会重新计算。这对于避免在每次渲染时都执行高开销的计算非常有用。",{"type":504,"tag":626,"props":1439,"children":1441},{"className":628,"code":1440,"language":630,"meta":631,"style":631},"\u002F\u002F DataGrid.js\nimport { useMemo } from 'react';\n\nfunction DataGrid({ rows }) {\n  \u002F\u002F 假设这是一个非常耗时的计算\n  const visibleRows = useMemo(() => {\n    return rows.filter(row => row.isActive).map(row => {\n      \u002F\u002F ... 更多复杂处理\n      return { ...row, formattedDate: new Date(row.date).toLocaleDateString() };\n    });\n  }, [rows]); \u002F\u002F 仅当 rows 数组本身变化时才重新计算\n\n  return (\n    \u003Ctable>\n      {visibleRows.map(row => \u003Ctr key={row.id}>...\u003C\u002Ftr>)}\n    \u003C\u002Ftable>\n  );\n}\n",[1442],{"type":504,"tag":528,"props":1443,"children":1444},{"__ignoreMap":631},[1445,1453,1477,1484,1509,1517,1550,1608,1616,1664,1672,1685,1692,1703,1719,1775,1790,1797],{"type":504,"tag":637,"props":1446,"children":1447},{"class":639,"line":640},[1448],{"type":504,"tag":637,"props":1449,"children":1450},{"style":644},[1451],{"type":510,"value":1452},"\u002F\u002F DataGrid.js\n",{"type":504,"tag":637,"props":1454,"children":1455},{"class":639,"line":650},[1456,1460,1465,1469,1473],{"type":504,"tag":637,"props":1457,"children":1458},{"style":654},[1459],{"type":510,"value":657},{"type":504,"tag":637,"props":1461,"children":1462},{"style":660},[1463],{"type":510,"value":1464}," { useMemo } ",{"type":504,"tag":637,"props":1466,"children":1467},{"style":654},[1468],{"type":510,"value":668},{"type":504,"tag":637,"props":1470,"children":1471},{"style":671},[1472],{"type":510,"value":674},{"type":504,"tag":637,"props":1474,"children":1475},{"style":660},[1476],{"type":510,"value":679},{"type":504,"tag":637,"props":1478,"children":1479},{"class":639,"line":682},[1480],{"type":504,"tag":637,"props":1481,"children":1482},{"emptyLinePlaceholder":686},[1483],{"type":510,"value":689},{"type":504,"tag":637,"props":1485,"children":1486},{"class":639,"line":692},[1487,1491,1496,1500,1505],{"type":504,"tag":637,"props":1488,"children":1489},{"style":654},[1490],{"type":510,"value":698},{"type":504,"tag":637,"props":1492,"children":1493},{"style":701},[1494],{"type":510,"value":1495}," DataGrid",{"type":504,"tag":637,"props":1497,"children":1498},{"style":660},[1499],{"type":510,"value":709},{"type":504,"tag":637,"props":1501,"children":1502},{"style":712},[1503],{"type":510,"value":1504},"rows",{"type":504,"tag":637,"props":1506,"children":1507},{"style":660},[1508],{"type":510,"value":720},{"type":504,"tag":637,"props":1510,"children":1511},{"class":639,"line":723},[1512],{"type":504,"tag":637,"props":1513,"children":1514},{"style":644},[1515],{"type":510,"value":1516},"  \u002F\u002F 假设这是一个非常耗时的计算\n",{"type":504,"tag":637,"props":1518,"children":1519},{"class":639,"line":732},[1520,1524,1529,1533,1538,1542,1546],{"type":504,"tag":637,"props":1521,"children":1522},{"style":654},[1523],{"type":510,"value":1032},{"type":504,"tag":637,"props":1525,"children":1526},{"style":786},[1527],{"type":510,"value":1528}," visibleRows",{"type":504,"tag":637,"props":1530,"children":1531},{"style":654},[1532],{"type":510,"value":1160},{"type":504,"tag":637,"props":1534,"children":1535},{"style":701},[1536],{"type":510,"value":1537}," useMemo",{"type":504,"tag":637,"props":1539,"children":1540},{"style":660},[1541],{"type":510,"value":1170},{"type":504,"tag":637,"props":1543,"children":1544},{"style":654},[1545],{"type":510,"value":1175},{"type":504,"tag":637,"props":1547,"children":1548},{"style":660},[1549],{"type":510,"value":1180},{"type":504,"tag":637,"props":1551,"children":1552},{"class":639,"line":761},[1553,1558,1563,1568,1572,1577,1582,1587,1592,1596,1600,1604],{"type":504,"tag":637,"props":1554,"children":1555},{"style":654},[1556],{"type":510,"value":1557},"    return",{"type":504,"tag":637,"props":1559,"children":1560},{"style":660},[1561],{"type":510,"value":1562}," rows.",{"type":504,"tag":637,"props":1564,"children":1565},{"style":701},[1566],{"type":510,"value":1567},"filter",{"type":504,"tag":637,"props":1569,"children":1570},{"style":660},[1571],{"type":510,"value":748},{"type":504,"tag":637,"props":1573,"children":1574},{"style":712},[1575],{"type":510,"value":1576},"row",{"type":504,"tag":637,"props":1578,"children":1579},{"style":654},[1580],{"type":510,"value":1581}," =>",{"type":504,"tag":637,"props":1583,"children":1584},{"style":660},[1585],{"type":510,"value":1586}," row.isActive).",{"type":504,"tag":637,"props":1588,"children":1589},{"style":701},[1590],{"type":510,"value":1591},"map",{"type":504,"tag":637,"props":1593,"children":1594},{"style":660},[1595],{"type":510,"value":748},{"type":504,"tag":637,"props":1597,"children":1598},{"style":712},[1599],{"type":510,"value":1576},{"type":504,"tag":637,"props":1601,"children":1602},{"style":654},[1603],{"type":510,"value":1581},{"type":504,"tag":637,"props":1605,"children":1606},{"style":660},[1607],{"type":510,"value":1180},{"type":504,"tag":637,"props":1609,"children":1610},{"class":639,"line":816},[1611],{"type":504,"tag":637,"props":1612,"children":1613},{"style":644},[1614],{"type":510,"value":1615},"      \u002F\u002F ... 更多复杂处理\n",{"type":504,"tag":637,"props":1617,"children":1618},{"class":639,"line":825},[1619,1624,1629,1634,1639,1644,1649,1654,1659],{"type":504,"tag":637,"props":1620,"children":1621},{"style":654},[1622],{"type":510,"value":1623},"      return",{"type":504,"tag":637,"props":1625,"children":1626},{"style":660},[1627],{"type":510,"value":1628}," { ",{"type":504,"tag":637,"props":1630,"children":1631},{"style":654},[1632],{"type":510,"value":1633},"...",{"type":504,"tag":637,"props":1635,"children":1636},{"style":660},[1637],{"type":510,"value":1638},"row, formattedDate: ",{"type":504,"tag":637,"props":1640,"children":1641},{"style":654},[1642],{"type":510,"value":1643},"new",{"type":504,"tag":637,"props":1645,"children":1646},{"style":701},[1647],{"type":510,"value":1648}," Date",{"type":504,"tag":637,"props":1650,"children":1651},{"style":660},[1652],{"type":510,"value":1653},"(row.date).",{"type":504,"tag":637,"props":1655,"children":1656},{"style":701},[1657],{"type":510,"value":1658},"toLocaleDateString",{"type":504,"tag":637,"props":1660,"children":1661},{"style":660},[1662],{"type":510,"value":1663},"() };\n",{"type":504,"tag":637,"props":1665,"children":1666},{"class":639,"line":833},[1667],{"type":504,"tag":637,"props":1668,"children":1669},{"style":660},[1670],{"type":510,"value":1671},"    });\n",{"type":504,"tag":637,"props":1673,"children":1674},{"class":639,"line":842},[1675,1680],{"type":504,"tag":637,"props":1676,"children":1677},{"style":660},[1678],{"type":510,"value":1679},"  }, [rows]); ",{"type":504,"tag":637,"props":1681,"children":1682},{"style":644},[1683],{"type":510,"value":1684},"\u002F\u002F 仅当 rows 数组本身变化时才重新计算\n",{"type":504,"tag":637,"props":1686,"children":1687},{"class":639,"line":1191},[1688],{"type":504,"tag":637,"props":1689,"children":1690},{"emptyLinePlaceholder":686},[1691],{"type":510,"value":689},{"type":504,"tag":637,"props":1693,"children":1694},{"class":639,"line":1226},[1695,1699],{"type":504,"tag":637,"props":1696,"children":1697},{"style":654},[1698],{"type":510,"value":767},{"type":504,"tag":637,"props":1700,"children":1701},{"style":660},[1702],{"type":510,"value":1253},{"type":504,"tag":637,"props":1704,"children":1705},{"class":639,"line":1235},[1706,1710,1715],{"type":504,"tag":637,"props":1707,"children":1708},{"style":660},[1709],{"type":510,"value":1262},{"type":504,"tag":637,"props":1711,"children":1712},{"style":775},[1713],{"type":510,"value":1714},"table",{"type":504,"tag":637,"props":1716,"children":1717},{"style":660},[1718],{"type":510,"value":1271},{"type":504,"tag":637,"props":1720,"children":1721},{"class":639,"line":1243},[1722,1727,1731,1735,1739,1743,1747,1752,1757,1761,1766,1770],{"type":504,"tag":637,"props":1723,"children":1724},{"style":660},[1725],{"type":510,"value":1726},"      {visibleRows.",{"type":504,"tag":637,"props":1728,"children":1729},{"style":701},[1730],{"type":510,"value":1591},{"type":504,"tag":637,"props":1732,"children":1733},{"style":660},[1734],{"type":510,"value":748},{"type":504,"tag":637,"props":1736,"children":1737},{"style":712},[1738],{"type":510,"value":1576},{"type":504,"tag":637,"props":1740,"children":1741},{"style":654},[1742],{"type":510,"value":1581},{"type":504,"tag":637,"props":1744,"children":1745},{"style":660},[1746],{"type":510,"value":772},{"type":504,"tag":637,"props":1748,"children":1749},{"style":775},[1750],{"type":510,"value":1751},"tr",{"type":504,"tag":637,"props":1753,"children":1754},{"style":701},[1755],{"type":510,"value":1756}," key",{"type":504,"tag":637,"props":1758,"children":1759},{"style":654},[1760],{"type":510,"value":1061},{"type":504,"tag":637,"props":1762,"children":1763},{"style":660},[1764],{"type":510,"value":1765},"{row.id}>...\u003C\u002F",{"type":504,"tag":637,"props":1767,"children":1768},{"style":775},[1769],{"type":510,"value":1751},{"type":504,"tag":637,"props":1771,"children":1772},{"style":660},[1773],{"type":510,"value":1774},">)}\n",{"type":504,"tag":637,"props":1776,"children":1777},{"class":639,"line":1256},[1778,1782,1786],{"type":504,"tag":637,"props":1779,"children":1780},{"style":660},[1781],{"type":510,"value":1391},{"type":504,"tag":637,"props":1783,"children":1784},{"style":775},[1785],{"type":510,"value":1714},{"type":504,"tag":637,"props":1787,"children":1788},{"style":660},[1789],{"type":510,"value":1271},{"type":504,"tag":637,"props":1791,"children":1792},{"class":639,"line":1274},[1793],{"type":504,"tag":637,"props":1794,"children":1795},{"style":660},[1796],{"type":510,"value":1408},{"type":504,"tag":637,"props":1798,"children":1799},{"class":639,"line":1340},[1800],{"type":504,"tag":637,"props":1801,"children":1802},{"style":660},[1803],{"type":510,"value":822},{"type":504,"tag":553,"props":1805,"children":1806},{},[],{"type":504,"tag":557,"props":1808,"children":1810},{"id":1809},"_2-context-的性能陷阱与优化",[1811],{"type":510,"value":1812},"2. Context 的性能陷阱与优化",{"type":504,"tag":516,"props":1814,"children":1815},{},[1816,1818,1823],{"type":510,"value":1817},"React Context 是一个强大的状态共享工具，但也是一个常见的性能瓶颈。当 Context 的值发生变化时，",{"type":504,"tag":520,"props":1819,"children":1820},{},[1821],{"type":510,"value":1822},"所有",{"type":510,"value":1824},"消费该 Context 的组件都会重渲染，无论它们是否关心那部分变化的数据。",{"type":504,"tag":587,"props":1826,"children":1828},{"id":1827},"场景一个包含用户和主题的全局-context",[1829],{"type":510,"value":1830},"场景：一个包含用户和主题的全局 Context",{"type":504,"tag":626,"props":1832,"children":1834},{"className":628,"code":1833,"language":630,"meta":631,"style":631},"\u002F\u002F Bad approach\nconst GlobalContext = React.createContext({\n  user: null,\n  theme: 'light',\n  toggleTheme: () => {},\n});\n\n\u002F\u002F App.js\nfunction App() {\n  const [user, setUser] = useState(null);\n  const [theme, setTheme] = useState('light');\n  \n  const value = { user, theme, toggleTheme: () => setTheme(t => t === 'light' ? 'dark' : 'light') };\n\n  return (\n    \u003CGlobalContext.Provider value={value}>\n      \u003CUserProfile \u002F> {\u002F* 关心 user *\u002F}\n      \u003CThemeToggler \u002F> {\u002F* 关心 theme *\u002F}\n    \u003C\u002FGlobalContext.Provider>\n  );\n}\n",[1835],{"type":504,"tag":528,"props":1836,"children":1837},{"__ignoreMap":631},[1838,1846,1877,1895,1912,1934,1942,1949,1957,1973,2022,2071,2079,2169,2176,2187,2212,2238,2263,2278,2285],{"type":504,"tag":637,"props":1839,"children":1840},{"class":639,"line":640},[1841],{"type":504,"tag":637,"props":1842,"children":1843},{"style":644},[1844],{"type":510,"value":1845},"\u002F\u002F Bad approach\n",{"type":504,"tag":637,"props":1847,"children":1848},{"class":639,"line":650},[1849,1854,1859,1863,1867,1872],{"type":504,"tag":637,"props":1850,"children":1851},{"style":654},[1852],{"type":510,"value":1853},"const",{"type":504,"tag":637,"props":1855,"children":1856},{"style":786},[1857],{"type":510,"value":1858}," GlobalContext",{"type":504,"tag":637,"props":1860,"children":1861},{"style":654},[1862],{"type":510,"value":1160},{"type":504,"tag":637,"props":1864,"children":1865},{"style":660},[1866],{"type":510,"value":858},{"type":504,"tag":637,"props":1868,"children":1869},{"style":701},[1870],{"type":510,"value":1871},"createContext",{"type":504,"tag":637,"props":1873,"children":1874},{"style":660},[1875],{"type":510,"value":1876},"({\n",{"type":504,"tag":637,"props":1878,"children":1879},{"class":639,"line":682},[1880,1885,1890],{"type":504,"tag":637,"props":1881,"children":1882},{"style":660},[1883],{"type":510,"value":1884},"  user: ",{"type":504,"tag":637,"props":1886,"children":1887},{"style":786},[1888],{"type":510,"value":1889},"null",{"type":504,"tag":637,"props":1891,"children":1892},{"style":660},[1893],{"type":510,"value":1894},",\n",{"type":504,"tag":637,"props":1896,"children":1897},{"class":639,"line":692},[1898,1903,1908],{"type":504,"tag":637,"props":1899,"children":1900},{"style":660},[1901],{"type":510,"value":1902},"  theme: ",{"type":504,"tag":637,"props":1904,"children":1905},{"style":671},[1906],{"type":510,"value":1907},"'light'",{"type":504,"tag":637,"props":1909,"children":1910},{"style":660},[1911],{"type":510,"value":1894},{"type":504,"tag":637,"props":1913,"children":1914},{"class":639,"line":723},[1915,1920,1925,1929],{"type":504,"tag":637,"props":1916,"children":1917},{"style":701},[1918],{"type":510,"value":1919},"  toggleTheme",{"type":504,"tag":637,"props":1921,"children":1922},{"style":660},[1923],{"type":510,"value":1924},": () ",{"type":504,"tag":637,"props":1926,"children":1927},{"style":654},[1928],{"type":510,"value":1175},{"type":504,"tag":637,"props":1930,"children":1931},{"style":660},[1932],{"type":510,"value":1933}," {},\n",{"type":504,"tag":637,"props":1935,"children":1936},{"class":639,"line":732},[1937],{"type":504,"tag":637,"props":1938,"children":1939},{"style":660},[1940],{"type":510,"value":1941},"});\n",{"type":504,"tag":637,"props":1943,"children":1944},{"class":639,"line":761},[1945],{"type":504,"tag":637,"props":1946,"children":1947},{"emptyLinePlaceholder":686},[1948],{"type":510,"value":689},{"type":504,"tag":637,"props":1950,"children":1951},{"class":639,"line":816},[1952],{"type":504,"tag":637,"props":1953,"children":1954},{"style":644},[1955],{"type":510,"value":1956},"\u002F\u002F App.js\n",{"type":504,"tag":637,"props":1958,"children":1959},{"class":639,"line":825},[1960,1964,1969],{"type":504,"tag":637,"props":1961,"children":1962},{"style":654},[1963],{"type":510,"value":698},{"type":504,"tag":637,"props":1965,"children":1966},{"style":701},[1967],{"type":510,"value":1968}," App",{"type":504,"tag":637,"props":1970,"children":1971},{"style":660},[1972],{"type":510,"value":1024},{"type":504,"tag":637,"props":1974,"children":1975},{"class":639,"line":833},[1976,1980,1984,1989,1993,1998,2002,2006,2010,2014,2018],{"type":504,"tag":637,"props":1977,"children":1978},{"style":654},[1979],{"type":510,"value":1032},{"type":504,"tag":637,"props":1981,"children":1982},{"style":660},[1983],{"type":510,"value":1037},{"type":504,"tag":637,"props":1985,"children":1986},{"style":786},[1987],{"type":510,"value":1988},"user",{"type":504,"tag":637,"props":1990,"children":1991},{"style":660},[1992],{"type":510,"value":543},{"type":504,"tag":637,"props":1994,"children":1995},{"style":786},[1996],{"type":510,"value":1997},"setUser",{"type":504,"tag":637,"props":1999,"children":2000},{"style":660},[2001],{"type":510,"value":1056},{"type":504,"tag":637,"props":2003,"children":2004},{"style":654},[2005],{"type":510,"value":1061},{"type":504,"tag":637,"props":2007,"children":2008},{"style":701},[2009],{"type":510,"value":1066},{"type":504,"tag":637,"props":2011,"children":2012},{"style":660},[2013],{"type":510,"value":748},{"type":504,"tag":637,"props":2015,"children":2016},{"style":786},[2017],{"type":510,"value":1889},{"type":504,"tag":637,"props":2019,"children":2020},{"style":660},[2021],{"type":510,"value":758},{"type":504,"tag":637,"props":2023,"children":2024},{"class":639,"line":842},[2025,2029,2033,2038,2042,2047,2051,2055,2059,2063,2067],{"type":504,"tag":637,"props":2026,"children":2027},{"style":654},[2028],{"type":510,"value":1032},{"type":504,"tag":637,"props":2030,"children":2031},{"style":660},[2032],{"type":510,"value":1037},{"type":504,"tag":637,"props":2034,"children":2035},{"style":786},[2036],{"type":510,"value":2037},"theme",{"type":504,"tag":637,"props":2039,"children":2040},{"style":660},[2041],{"type":510,"value":543},{"type":504,"tag":637,"props":2043,"children":2044},{"style":786},[2045],{"type":510,"value":2046},"setTheme",{"type":504,"tag":637,"props":2048,"children":2049},{"style":660},[2050],{"type":510,"value":1056},{"type":504,"tag":637,"props":2052,"children":2053},{"style":654},[2054],{"type":510,"value":1061},{"type":504,"tag":637,"props":2056,"children":2057},{"style":701},[2058],{"type":510,"value":1066},{"type":504,"tag":637,"props":2060,"children":2061},{"style":660},[2062],{"type":510,"value":748},{"type":504,"tag":637,"props":2064,"children":2065},{"style":671},[2066],{"type":510,"value":1907},{"type":504,"tag":637,"props":2068,"children":2069},{"style":660},[2070],{"type":510,"value":758},{"type":504,"tag":637,"props":2072,"children":2073},{"class":639,"line":1191},[2074],{"type":504,"tag":637,"props":2075,"children":2076},{"style":660},[2077],{"type":510,"value":2078},"  \n",{"type":504,"tag":637,"props":2080,"children":2081},{"class":639,"line":1226},[2082,2086,2090,2094,2099,2104,2108,2112,2117,2121,2126,2130,2135,2140,2145,2150,2155,2160,2164],{"type":504,"tag":637,"props":2083,"children":2084},{"style":654},[2085],{"type":510,"value":1032},{"type":504,"tag":637,"props":2087,"children":2088},{"style":786},[2089],{"type":510,"value":1290},{"type":504,"tag":637,"props":2091,"children":2092},{"style":654},[2093],{"type":510,"value":1160},{"type":504,"tag":637,"props":2095,"children":2096},{"style":660},[2097],{"type":510,"value":2098}," { user, theme, ",{"type":504,"tag":637,"props":2100,"children":2101},{"style":701},[2102],{"type":510,"value":2103},"toggleTheme",{"type":504,"tag":637,"props":2105,"children":2106},{"style":660},[2107],{"type":510,"value":1924},{"type":504,"tag":637,"props":2109,"children":2110},{"style":654},[2111],{"type":510,"value":1175},{"type":504,"tag":637,"props":2113,"children":2114},{"style":701},[2115],{"type":510,"value":2116}," setTheme",{"type":504,"tag":637,"props":2118,"children":2119},{"style":660},[2120],{"type":510,"value":748},{"type":504,"tag":637,"props":2122,"children":2123},{"style":712},[2124],{"type":510,"value":2125},"t",{"type":504,"tag":637,"props":2127,"children":2128},{"style":654},[2129],{"type":510,"value":1581},{"type":504,"tag":637,"props":2131,"children":2132},{"style":660},[2133],{"type":510,"value":2134}," t ",{"type":504,"tag":637,"props":2136,"children":2137},{"style":654},[2138],{"type":510,"value":2139},"===",{"type":504,"tag":637,"props":2141,"children":2142},{"style":671},[2143],{"type":510,"value":2144}," 'light'",{"type":504,"tag":637,"props":2146,"children":2147},{"style":654},[2148],{"type":510,"value":2149}," ?",{"type":504,"tag":637,"props":2151,"children":2152},{"style":671},[2153],{"type":510,"value":2154}," 'dark'",{"type":504,"tag":637,"props":2156,"children":2157},{"style":654},[2158],{"type":510,"value":2159}," :",{"type":504,"tag":637,"props":2161,"children":2162},{"style":671},[2163],{"type":510,"value":2144},{"type":504,"tag":637,"props":2165,"children":2166},{"style":660},[2167],{"type":510,"value":2168},") };\n",{"type":504,"tag":637,"props":2170,"children":2171},{"class":639,"line":1235},[2172],{"type":504,"tag":637,"props":2173,"children":2174},{"emptyLinePlaceholder":686},[2175],{"type":510,"value":689},{"type":504,"tag":637,"props":2177,"children":2178},{"class":639,"line":1243},[2179,2183],{"type":504,"tag":637,"props":2180,"children":2181},{"style":654},[2182],{"type":510,"value":767},{"type":504,"tag":637,"props":2184,"children":2185},{"style":660},[2186],{"type":510,"value":1253},{"type":504,"tag":637,"props":2188,"children":2189},{"class":639,"line":1256},[2190,2194,2199,2203,2207],{"type":504,"tag":637,"props":2191,"children":2192},{"style":660},[2193],{"type":510,"value":1262},{"type":504,"tag":637,"props":2195,"children":2196},{"style":786},[2197],{"type":510,"value":2198},"GlobalContext.Provider",{"type":504,"tag":637,"props":2200,"children":2201},{"style":701},[2202],{"type":510,"value":1290},{"type":504,"tag":637,"props":2204,"children":2205},{"style":654},[2206],{"type":510,"value":1061},{"type":504,"tag":637,"props":2208,"children":2209},{"style":660},[2210],{"type":510,"value":2211},"{value}>\n",{"type":504,"tag":637,"props":2213,"children":2214},{"class":639,"line":1274},[2215,2219,2224,2229,2234],{"type":504,"tag":637,"props":2216,"children":2217},{"style":660},[2218],{"type":510,"value":1280},{"type":504,"tag":637,"props":2220,"children":2221},{"style":786},[2222],{"type":510,"value":2223},"UserProfile",{"type":504,"tag":637,"props":2225,"children":2226},{"style":660},[2227],{"type":510,"value":2228}," \u002F> {",{"type":504,"tag":637,"props":2230,"children":2231},{"style":644},[2232],{"type":510,"value":2233},"\u002F* 关心 user *\u002F",{"type":504,"tag":637,"props":2235,"children":2236},{"style":660},[2237],{"type":510,"value":822},{"type":504,"tag":637,"props":2239,"children":2240},{"class":639,"line":1340},[2241,2245,2250,2254,2259],{"type":504,"tag":637,"props":2242,"children":2243},{"style":660},[2244],{"type":510,"value":1280},{"type":504,"tag":637,"props":2246,"children":2247},{"style":786},[2248],{"type":510,"value":2249},"ThemeToggler",{"type":504,"tag":637,"props":2251,"children":2252},{"style":660},[2253],{"type":510,"value":2228},{"type":504,"tag":637,"props":2255,"children":2256},{"style":644},[2257],{"type":510,"value":2258},"\u002F* 关心 theme *\u002F",{"type":504,"tag":637,"props":2260,"children":2261},{"style":660},[2262],{"type":510,"value":822},{"type":504,"tag":637,"props":2264,"children":2265},{"class":639,"line":1358},[2266,2270,2274],{"type":504,"tag":637,"props":2267,"children":2268},{"style":660},[2269],{"type":510,"value":1391},{"type":504,"tag":637,"props":2271,"children":2272},{"style":786},[2273],{"type":510,"value":2198},{"type":504,"tag":637,"props":2275,"children":2276},{"style":660},[2277],{"type":510,"value":1271},{"type":504,"tag":637,"props":2279,"children":2280},{"class":639,"line":1385},[2281],{"type":504,"tag":637,"props":2282,"children":2283},{"style":660},[2284],{"type":510,"value":1408},{"type":504,"tag":637,"props":2286,"children":2287},{"class":639,"line":1402},[2288],{"type":504,"tag":637,"props":2289,"children":2290},{"style":660},[2291],{"type":510,"value":822},{"type":504,"tag":516,"props":2293,"children":2294},{},[2295,2297,2302,2304,2309,2311,2316,2318,2324,2326,2331,2333,2338,2340,2345],{"type":510,"value":2296},"问题在于，当 ",{"type":504,"tag":528,"props":2298,"children":2300},{"className":2299},[],[2301],{"type":510,"value":2103},{"type":510,"value":2303}," 被调用时，",{"type":504,"tag":528,"props":2305,"children":2307},{"className":2306},[],[2308],{"type":510,"value":2037},{"type":510,"value":2310}," 变化，",{"type":504,"tag":528,"props":2312,"children":2314},{"className":2313},[],[2315],{"type":510,"value":2198},{"type":510,"value":2317}," 的 ",{"type":504,"tag":528,"props":2319,"children":2321},{"className":2320},[],[2322],{"type":510,"value":2323},"value",{"type":510,"value":2325}," 变成一个新对象。这导致 ",{"type":504,"tag":528,"props":2327,"children":2329},{"className":2328},[],[2330],{"type":510,"value":2223},{"type":510,"value":2332}," 也重渲染，尽管它只关心 ",{"type":504,"tag":528,"props":2334,"children":2336},{"className":2335},[],[2337],{"type":510,"value":1988},{"type":510,"value":2339},"，而 ",{"type":504,"tag":528,"props":2341,"children":2343},{"className":2342},[],[2344],{"type":510,"value":1988},{"type":510,"value":2346}," 并未改变。",{"type":504,"tag":587,"props":2348,"children":2350},{"id":2349},"优化策略拆分-context",[2351],{"type":510,"value":2352},"优化策略：拆分 Context",{"type":504,"tag":516,"props":2354,"children":2355},{},[2356],{"type":510,"value":2357},"将不常变化和常变化的状态，或者不同领域的状态，拆分到不同的 Context 中。",{"type":504,"tag":626,"props":2359,"children":2361},{"className":628,"code":2360,"language":630,"meta":631,"style":631},"\u002F\u002F Good approach\nconst UserContext = React.createContext(null);\nconst ThemeContext = React.createContext({ theme: 'light', toggleTheme: () => {} });\n\n\u002F\u002F App.js\nfunction App() {\n  const [user, setUser] = useState(null);\n  const [theme, setTheme] = useState('light');\n\n  const themeValue = useMemo(() => ({\n    theme,\n    toggleTheme: () => setTheme(t => t === 'light' ? 'dark' : 'light')\n  }), [theme]);\n\n  return (\n    \u003CUserContext.Provider value={user}>\n      \u003CThemeContext.Provider value={themeValue}>\n        \u003CUserProfile \u002F> {\u002F* 只消费 UserContext *\u002F}\n        \u003CThemeToggler \u002F> {\u002F* 只消费 ThemeContext *\u002F}\n      \u003C\u002FThemeContext.Provider>\n    \u003C\u002FUserContext.Provider>\n  );\n}\n",[2362],{"type":504,"tag":528,"props":2363,"children":2364},{"__ignoreMap":631},[2365,2373,2409,2463,2470,2477,2492,2539,2586,2593,2626,2634,2699,2707,2714,2725,2750,2775,2800,2824,2840,2855,2862],{"type":504,"tag":637,"props":2366,"children":2367},{"class":639,"line":640},[2368],{"type":504,"tag":637,"props":2369,"children":2370},{"style":644},[2371],{"type":510,"value":2372},"\u002F\u002F Good approach\n",{"type":504,"tag":637,"props":2374,"children":2375},{"class":639,"line":650},[2376,2380,2385,2389,2393,2397,2401,2405],{"type":504,"tag":637,"props":2377,"children":2378},{"style":654},[2379],{"type":510,"value":1853},{"type":504,"tag":637,"props":2381,"children":2382},{"style":786},[2383],{"type":510,"value":2384}," UserContext",{"type":504,"tag":637,"props":2386,"children":2387},{"style":654},[2388],{"type":510,"value":1160},{"type":504,"tag":637,"props":2390,"children":2391},{"style":660},[2392],{"type":510,"value":858},{"type":504,"tag":637,"props":2394,"children":2395},{"style":701},[2396],{"type":510,"value":1871},{"type":504,"tag":637,"props":2398,"children":2399},{"style":660},[2400],{"type":510,"value":748},{"type":504,"tag":637,"props":2402,"children":2403},{"style":786},[2404],{"type":510,"value":1889},{"type":504,"tag":637,"props":2406,"children":2407},{"style":660},[2408],{"type":510,"value":758},{"type":504,"tag":637,"props":2410,"children":2411},{"class":639,"line":682},[2412,2416,2421,2425,2429,2433,2438,2442,2446,2450,2454,2458],{"type":504,"tag":637,"props":2413,"children":2414},{"style":654},[2415],{"type":510,"value":1853},{"type":504,"tag":637,"props":2417,"children":2418},{"style":786},[2419],{"type":510,"value":2420}," ThemeContext",{"type":504,"tag":637,"props":2422,"children":2423},{"style":654},[2424],{"type":510,"value":1160},{"type":504,"tag":637,"props":2426,"children":2427},{"style":660},[2428],{"type":510,"value":858},{"type":504,"tag":637,"props":2430,"children":2431},{"style":701},[2432],{"type":510,"value":1871},{"type":504,"tag":637,"props":2434,"children":2435},{"style":660},[2436],{"type":510,"value":2437},"({ theme: ",{"type":504,"tag":637,"props":2439,"children":2440},{"style":671},[2441],{"type":510,"value":1907},{"type":504,"tag":637,"props":2443,"children":2444},{"style":660},[2445],{"type":510,"value":543},{"type":504,"tag":637,"props":2447,"children":2448},{"style":701},[2449],{"type":510,"value":2103},{"type":504,"tag":637,"props":2451,"children":2452},{"style":660},[2453],{"type":510,"value":1924},{"type":504,"tag":637,"props":2455,"children":2456},{"style":654},[2457],{"type":510,"value":1175},{"type":504,"tag":637,"props":2459,"children":2460},{"style":660},[2461],{"type":510,"value":2462}," {} });\n",{"type":504,"tag":637,"props":2464,"children":2465},{"class":639,"line":692},[2466],{"type":504,"tag":637,"props":2467,"children":2468},{"emptyLinePlaceholder":686},[2469],{"type":510,"value":689},{"type":504,"tag":637,"props":2471,"children":2472},{"class":639,"line":723},[2473],{"type":504,"tag":637,"props":2474,"children":2475},{"style":644},[2476],{"type":510,"value":1956},{"type":504,"tag":637,"props":2478,"children":2479},{"class":639,"line":732},[2480,2484,2488],{"type":504,"tag":637,"props":2481,"children":2482},{"style":654},[2483],{"type":510,"value":698},{"type":504,"tag":637,"props":2485,"children":2486},{"style":701},[2487],{"type":510,"value":1968},{"type":504,"tag":637,"props":2489,"children":2490},{"style":660},[2491],{"type":510,"value":1024},{"type":504,"tag":637,"props":2493,"children":2494},{"class":639,"line":761},[2495,2499,2503,2507,2511,2515,2519,2523,2527,2531,2535],{"type":504,"tag":637,"props":2496,"children":2497},{"style":654},[2498],{"type":510,"value":1032},{"type":504,"tag":637,"props":2500,"children":2501},{"style":660},[2502],{"type":510,"value":1037},{"type":504,"tag":637,"props":2504,"children":2505},{"style":786},[2506],{"type":510,"value":1988},{"type":504,"tag":637,"props":2508,"children":2509},{"style":660},[2510],{"type":510,"value":543},{"type":504,"tag":637,"props":2512,"children":2513},{"style":786},[2514],{"type":510,"value":1997},{"type":504,"tag":637,"props":2516,"children":2517},{"style":660},[2518],{"type":510,"value":1056},{"type":504,"tag":637,"props":2520,"children":2521},{"style":654},[2522],{"type":510,"value":1061},{"type":504,"tag":637,"props":2524,"children":2525},{"style":701},[2526],{"type":510,"value":1066},{"type":504,"tag":637,"props":2528,"children":2529},{"style":660},[2530],{"type":510,"value":748},{"type":504,"tag":637,"props":2532,"children":2533},{"style":786},[2534],{"type":510,"value":1889},{"type":504,"tag":637,"props":2536,"children":2537},{"style":660},[2538],{"type":510,"value":758},{"type":504,"tag":637,"props":2540,"children":2541},{"class":639,"line":816},[2542,2546,2550,2554,2558,2562,2566,2570,2574,2578,2582],{"type":504,"tag":637,"props":2543,"children":2544},{"style":654},[2545],{"type":510,"value":1032},{"type":504,"tag":637,"props":2547,"children":2548},{"style":660},[2549],{"type":510,"value":1037},{"type":504,"tag":637,"props":2551,"children":2552},{"style":786},[2553],{"type":510,"value":2037},{"type":504,"tag":637,"props":2555,"children":2556},{"style":660},[2557],{"type":510,"value":543},{"type":504,"tag":637,"props":2559,"children":2560},{"style":786},[2561],{"type":510,"value":2046},{"type":504,"tag":637,"props":2563,"children":2564},{"style":660},[2565],{"type":510,"value":1056},{"type":504,"tag":637,"props":2567,"children":2568},{"style":654},[2569],{"type":510,"value":1061},{"type":504,"tag":637,"props":2571,"children":2572},{"style":701},[2573],{"type":510,"value":1066},{"type":504,"tag":637,"props":2575,"children":2576},{"style":660},[2577],{"type":510,"value":748},{"type":504,"tag":637,"props":2579,"children":2580},{"style":671},[2581],{"type":510,"value":1907},{"type":504,"tag":637,"props":2583,"children":2584},{"style":660},[2585],{"type":510,"value":758},{"type":504,"tag":637,"props":2587,"children":2588},{"class":639,"line":825},[2589],{"type":504,"tag":637,"props":2590,"children":2591},{"emptyLinePlaceholder":686},[2592],{"type":510,"value":689},{"type":504,"tag":637,"props":2594,"children":2595},{"class":639,"line":833},[2596,2600,2605,2609,2613,2617,2621],{"type":504,"tag":637,"props":2597,"children":2598},{"style":654},[2599],{"type":510,"value":1032},{"type":504,"tag":637,"props":2601,"children":2602},{"style":786},[2603],{"type":510,"value":2604}," themeValue",{"type":504,"tag":637,"props":2606,"children":2607},{"style":654},[2608],{"type":510,"value":1160},{"type":504,"tag":637,"props":2610,"children":2611},{"style":701},[2612],{"type":510,"value":1537},{"type":504,"tag":637,"props":2614,"children":2615},{"style":660},[2616],{"type":510,"value":1170},{"type":504,"tag":637,"props":2618,"children":2619},{"style":654},[2620],{"type":510,"value":1175},{"type":504,"tag":637,"props":2622,"children":2623},{"style":660},[2624],{"type":510,"value":2625}," ({\n",{"type":504,"tag":637,"props":2627,"children":2628},{"class":639,"line":842},[2629],{"type":504,"tag":637,"props":2630,"children":2631},{"style":660},[2632],{"type":510,"value":2633},"    theme,\n",{"type":504,"tag":637,"props":2635,"children":2636},{"class":639,"line":1191},[2637,2642,2646,2650,2654,2658,2662,2666,2670,2674,2678,2682,2686,2690,2694],{"type":504,"tag":637,"props":2638,"children":2639},{"style":701},[2640],{"type":510,"value":2641},"    toggleTheme",{"type":504,"tag":637,"props":2643,"children":2644},{"style":660},[2645],{"type":510,"value":1924},{"type":504,"tag":637,"props":2647,"children":2648},{"style":654},[2649],{"type":510,"value":1175},{"type":504,"tag":637,"props":2651,"children":2652},{"style":701},[2653],{"type":510,"value":2116},{"type":504,"tag":637,"props":2655,"children":2656},{"style":660},[2657],{"type":510,"value":748},{"type":504,"tag":637,"props":2659,"children":2660},{"style":712},[2661],{"type":510,"value":2125},{"type":504,"tag":637,"props":2663,"children":2664},{"style":654},[2665],{"type":510,"value":1581},{"type":504,"tag":637,"props":2667,"children":2668},{"style":660},[2669],{"type":510,"value":2134},{"type":504,"tag":637,"props":2671,"children":2672},{"style":654},[2673],{"type":510,"value":2139},{"type":504,"tag":637,"props":2675,"children":2676},{"style":671},[2677],{"type":510,"value":2144},{"type":504,"tag":637,"props":2679,"children":2680},{"style":654},[2681],{"type":510,"value":2149},{"type":504,"tag":637,"props":2683,"children":2684},{"style":671},[2685],{"type":510,"value":2154},{"type":504,"tag":637,"props":2687,"children":2688},{"style":654},[2689],{"type":510,"value":2159},{"type":504,"tag":637,"props":2691,"children":2692},{"style":671},[2693],{"type":510,"value":2144},{"type":504,"tag":637,"props":2695,"children":2696},{"style":660},[2697],{"type":510,"value":2698},")\n",{"type":504,"tag":637,"props":2700,"children":2701},{"class":639,"line":1226},[2702],{"type":504,"tag":637,"props":2703,"children":2704},{"style":660},[2705],{"type":510,"value":2706},"  }), [theme]);\n",{"type":504,"tag":637,"props":2708,"children":2709},{"class":639,"line":1235},[2710],{"type":504,"tag":637,"props":2711,"children":2712},{"emptyLinePlaceholder":686},[2713],{"type":510,"value":689},{"type":504,"tag":637,"props":2715,"children":2716},{"class":639,"line":1243},[2717,2721],{"type":504,"tag":637,"props":2718,"children":2719},{"style":654},[2720],{"type":510,"value":767},{"type":504,"tag":637,"props":2722,"children":2723},{"style":660},[2724],{"type":510,"value":1253},{"type":504,"tag":637,"props":2726,"children":2727},{"class":639,"line":1256},[2728,2732,2737,2741,2745],{"type":504,"tag":637,"props":2729,"children":2730},{"style":660},[2731],{"type":510,"value":1262},{"type":504,"tag":637,"props":2733,"children":2734},{"style":786},[2735],{"type":510,"value":2736},"UserContext.Provider",{"type":504,"tag":637,"props":2738,"children":2739},{"style":701},[2740],{"type":510,"value":1290},{"type":504,"tag":637,"props":2742,"children":2743},{"style":654},[2744],{"type":510,"value":1061},{"type":504,"tag":637,"props":2746,"children":2747},{"style":660},[2748],{"type":510,"value":2749},"{user}>\n",{"type":504,"tag":637,"props":2751,"children":2752},{"class":639,"line":1274},[2753,2757,2762,2766,2770],{"type":504,"tag":637,"props":2754,"children":2755},{"style":660},[2756],{"type":510,"value":1280},{"type":504,"tag":637,"props":2758,"children":2759},{"style":786},[2760],{"type":510,"value":2761},"ThemeContext.Provider",{"type":504,"tag":637,"props":2763,"children":2764},{"style":701},[2765],{"type":510,"value":1290},{"type":504,"tag":637,"props":2767,"children":2768},{"style":654},[2769],{"type":510,"value":1061},{"type":504,"tag":637,"props":2771,"children":2772},{"style":660},[2773],{"type":510,"value":2774},"{themeValue}>\n",{"type":504,"tag":637,"props":2776,"children":2777},{"class":639,"line":1340},[2778,2783,2787,2791,2796],{"type":504,"tag":637,"props":2779,"children":2780},{"style":660},[2781],{"type":510,"value":2782},"        \u003C",{"type":504,"tag":637,"props":2784,"children":2785},{"style":786},[2786],{"type":510,"value":2223},{"type":504,"tag":637,"props":2788,"children":2789},{"style":660},[2790],{"type":510,"value":2228},{"type":504,"tag":637,"props":2792,"children":2793},{"style":644},[2794],{"type":510,"value":2795},"\u002F* 只消费 UserContext *\u002F",{"type":504,"tag":637,"props":2797,"children":2798},{"style":660},[2799],{"type":510,"value":822},{"type":504,"tag":637,"props":2801,"children":2802},{"class":639,"line":1358},[2803,2807,2811,2815,2820],{"type":504,"tag":637,"props":2804,"children":2805},{"style":660},[2806],{"type":510,"value":2782},{"type":504,"tag":637,"props":2808,"children":2809},{"style":786},[2810],{"type":510,"value":2249},{"type":504,"tag":637,"props":2812,"children":2813},{"style":660},[2814],{"type":510,"value":2228},{"type":504,"tag":637,"props":2816,"children":2817},{"style":644},[2818],{"type":510,"value":2819},"\u002F* 只消费 ThemeContext *\u002F",{"type":504,"tag":637,"props":2821,"children":2822},{"style":660},[2823],{"type":510,"value":822},{"type":504,"tag":637,"props":2825,"children":2826},{"class":639,"line":1385},[2827,2832,2836],{"type":504,"tag":637,"props":2828,"children":2829},{"style":660},[2830],{"type":510,"value":2831},"      \u003C\u002F",{"type":504,"tag":637,"props":2833,"children":2834},{"style":786},[2835],{"type":510,"value":2761},{"type":504,"tag":637,"props":2837,"children":2838},{"style":660},[2839],{"type":510,"value":1271},{"type":504,"tag":637,"props":2841,"children":2842},{"class":639,"line":1402},[2843,2847,2851],{"type":504,"tag":637,"props":2844,"children":2845},{"style":660},[2846],{"type":510,"value":1391},{"type":504,"tag":637,"props":2848,"children":2849},{"style":786},[2850],{"type":510,"value":2736},{"type":504,"tag":637,"props":2852,"children":2853},{"style":660},[2854],{"type":510,"value":1271},{"type":504,"tag":637,"props":2856,"children":2857},{"class":639,"line":1411},[2858],{"type":504,"tag":637,"props":2859,"children":2860},{"style":660},[2861],{"type":510,"value":1408},{"type":504,"tag":637,"props":2863,"children":2865},{"class":639,"line":2864},23,[2866],{"type":504,"tag":637,"props":2867,"children":2868},{"style":660},[2869],{"type":510,"value":822},{"type":504,"tag":516,"props":2871,"children":2872},{},[2873,2875,2881,2883,2888,2890,2895],{"type":510,"value":2874},"现在，当主题变化时，只有 ",{"type":504,"tag":528,"props":2876,"children":2878},{"className":2877},[],[2879],{"type":510,"value":2880},"ThemeContext",{"type":510,"value":2882}," 的消费者 ",{"type":504,"tag":528,"props":2884,"children":2886},{"className":2885},[],[2887],{"type":510,"value":2249},{"type":510,"value":2889}," 会重渲染。",{"type":504,"tag":528,"props":2891,"children":2893},{"className":2892},[],[2894],{"type":510,"value":2223},{"type":510,"value":2896}," 则安然无恙。",{"type":504,"tag":553,"props":2898,"children":2899},{},[],{"type":504,"tag":557,"props":2901,"children":2903},{"id":2902},"_3-列表虚拟化-list-virtualization",[2904],{"type":510,"value":2905},"3. 列表虚拟化 (List Virtualization)",{"type":504,"tag":516,"props":2907,"children":2908},{},[2909,2911,2916],{"type":510,"value":2910},"当需要渲染成百上千个条目的列表时，即使每个条目组件都经过了 ",{"type":504,"tag":528,"props":2912,"children":2914},{"className":2913},[],[2915],{"type":510,"value":568},{"type":510,"value":2917}," 优化，一次性渲染所有 DOM 节点也会导致严重的性能问题（长任务、高内存占用）。",{"type":504,"tag":516,"props":2919,"children":2920},{},[2921,2926,2928,2933],{"type":504,"tag":520,"props":2922,"children":2923},{},[2924],{"type":510,"value":2925},"虚拟化",{"type":510,"value":2927},"的思想是：",{"type":504,"tag":520,"props":2929,"children":2930},{},[2931],{"type":510,"value":2932},"只渲染视口内可见的列表项",{"type":510,"value":2934},"。",{"type":504,"tag":587,"props":2936,"children":2938},{"id":2937},"实现原理",[2939],{"type":510,"value":2937},{"type":504,"tag":2941,"props":2942,"children":2943},"ol",{},[2944,2969,2986,3004],{"type":504,"tag":2945,"props":2946,"children":2947},"li",{},[2948,2953,2955,2961,2963,2968],{"type":504,"tag":520,"props":2949,"children":2950},{},[2951],{"type":510,"value":2952},"容器 (Container)",{"type":510,"value":2954},"：一个具有固定高度和 ",{"type":504,"tag":528,"props":2956,"children":2958},{"className":2957},[],[2959],{"type":510,"value":2960},"overflow: scroll",{"type":510,"value":2962}," 的外层 ",{"type":504,"tag":528,"props":2964,"children":2966},{"className":2965},[],[2967],{"type":510,"value":778},{"type":510,"value":2934},{"type":504,"tag":2945,"props":2970,"children":2971},{},[2972,2977,2979,2984],{"type":504,"tag":520,"props":2973,"children":2974},{},[2975],{"type":510,"value":2976},"滚动视窗 (Scroller)",{"type":510,"value":2978},"：一个在容器内部、高度等于所有列表项总高度的 ",{"type":504,"tag":528,"props":2980,"children":2982},{"className":2981},[],[2983],{"type":510,"value":778},{"type":510,"value":2985},"。它的作用是撑开滚动条，模拟完整列表的存在。",{"type":504,"tag":2945,"props":2987,"children":2988},{},[2989,2994,2996,3002],{"type":504,"tag":520,"props":2990,"children":2991},{},[2992],{"type":510,"value":2993},"可见项计算",{"type":510,"value":2995},"：监听容器的滚动事件，根据 ",{"type":504,"tag":528,"props":2997,"children":2999},{"className":2998},[],[3000],{"type":510,"value":3001},"scrollTop",{"type":510,"value":3003},"、容器高度和每个列表项的高度，计算出当前哪些索引的列表项应该在视口内。",{"type":504,"tag":2945,"props":3005,"children":3006},{},[3007,3012,3014,3020,3022,3028],{"type":504,"tag":520,"props":3008,"children":3009},{},[3010],{"type":510,"value":3011},"绝对定位渲染",{"type":510,"value":3013},"：只渲染计算出的可见项，并使用 ",{"type":504,"tag":528,"props":3015,"children":3017},{"className":3016},[],[3018],{"type":510,"value":3019},"position: absolute",{"type":510,"value":3021}," 和 ",{"type":504,"tag":528,"props":3023,"children":3025},{"className":3024},[],[3026],{"type":510,"value":3027},"transform: translateY(...)",{"type":510,"value":3029}," 将它们精确地放置在滚动视窗的正确位置。",{"type":504,"tag":587,"props":3031,"children":3033},{"id":3032},"推荐库",[3034],{"type":510,"value":3032},{"type":504,"tag":516,"props":3036,"children":3037},{},[3038],{"type":510,"value":3039},"手动实现虚拟化很复杂，特别是处理动态高度的列表项。强烈建议使用成熟的社区库：",{"type":504,"tag":3041,"props":3042,"children":3043},"ul",{},[3044,3069,3092],{"type":504,"tag":2945,"props":3045,"children":3046},{},[3047,3059,3061,3067],{"type":504,"tag":520,"props":3048,"children":3049},{},[3050],{"type":504,"tag":3051,"props":3052,"children":3056},"a",{"href":3053,"rel":3054},"https:\u002F\u002Ftanstack.com\u002Fvirtual\u002Fv3",[3055],"nofollow",[3057],{"type":510,"value":3058},"TanStack Virtual",{"type":510,"value":3060}," (原 ",{"type":504,"tag":528,"props":3062,"children":3064},{"className":3063},[],[3065],{"type":510,"value":3066},"react-virtual",{"type":510,"value":3068},")：轻量、无头 (Headless)，提供了核心的虚拟化逻辑，UI 完全自定义。",{"type":504,"tag":2945,"props":3070,"children":3071},{},[3072,3082,3084,3090],{"type":504,"tag":520,"props":3073,"children":3074},{},[3075],{"type":504,"tag":3051,"props":3076,"children":3079},{"href":3077,"rel":3078},"https:\u002F\u002Freact-window.vercel.app\u002F",[3055],[3080],{"type":510,"value":3081},"react-window",{"type":510,"value":3083},"：",{"type":504,"tag":528,"props":3085,"children":3087},{"className":3086},[],[3088],{"type":510,"value":3089},"react-virtualized",{"type":510,"value":3091}," 的轻量级继任者，API 简单，非常适合固定高度的列表。",{"type":504,"tag":2945,"props":3093,"children":3094},{},[3095,3105],{"type":504,"tag":520,"props":3096,"children":3097},{},[3098],{"type":504,"tag":3051,"props":3099,"children":3102},{"href":3100,"rel":3101},"https:\u002F\u002Fvirtuoso.dev\u002F",[3055],[3103],{"type":510,"value":3104},"react-virtuoso",{"type":510,"value":3106},"：功能强大，对动态高度、分组、无限加载等场景支持得非常好。",{"type":504,"tag":516,"props":3108,"children":3109},{},[3110],{"type":504,"tag":520,"props":3111,"children":3112},{},[3113,3115,3120],{"type":510,"value":3114},"示例 (使用 ",{"type":504,"tag":528,"props":3116,"children":3118},{"className":3117},[],[3119],{"type":510,"value":3081},{"type":510,"value":3121},")",{"type":504,"tag":626,"props":3123,"children":3125},{"className":628,"code":3124,"language":630,"meta":631,"style":631},"import { FixedSizeList as List } from 'react-window';\n\nconst MyBigList = ({ items }) => (\n  \u003CList\n    height={500} \u002F\u002F 容器高度\n    itemCount={items.length} \u002F\u002F 总项数\n    itemSize={50} \u002F\u002F 每项的固定高度\n    width={300} \u002F\u002F 容器宽度\n  >\n    {({ index, style }) => (\n      \u002F\u002F style 会包含 position, top, left, width, height\n      \u003Cdiv style={style}>\n        Row {items[index].name}\n      \u003C\u002Fdiv>\n    )}\n  \u003C\u002FList>\n);\n",[3126],{"type":504,"tag":528,"props":3127,"children":3128},{"__ignoreMap":631},[3129,3164,3171,3210,3223,3255,3286,3316,3346,3354,3388,3396,3421,3429,3444,3452,3469],{"type":504,"tag":637,"props":3130,"children":3131},{"class":639,"line":640},[3132,3136,3141,3146,3151,3155,3160],{"type":504,"tag":637,"props":3133,"children":3134},{"style":654},[3135],{"type":510,"value":657},{"type":504,"tag":637,"props":3137,"children":3138},{"style":660},[3139],{"type":510,"value":3140}," { FixedSizeList ",{"type":504,"tag":637,"props":3142,"children":3143},{"style":654},[3144],{"type":510,"value":3145},"as",{"type":504,"tag":637,"props":3147,"children":3148},{"style":660},[3149],{"type":510,"value":3150}," List } ",{"type":504,"tag":637,"props":3152,"children":3153},{"style":654},[3154],{"type":510,"value":668},{"type":504,"tag":637,"props":3156,"children":3157},{"style":671},[3158],{"type":510,"value":3159}," 'react-window'",{"type":504,"tag":637,"props":3161,"children":3162},{"style":660},[3163],{"type":510,"value":679},{"type":504,"tag":637,"props":3165,"children":3166},{"class":639,"line":650},[3167],{"type":504,"tag":637,"props":3168,"children":3169},{"emptyLinePlaceholder":686},[3170],{"type":510,"value":689},{"type":504,"tag":637,"props":3172,"children":3173},{"class":639,"line":682},[3174,3178,3183,3187,3192,3197,3202,3206],{"type":504,"tag":637,"props":3175,"children":3176},{"style":654},[3177],{"type":510,"value":1853},{"type":504,"tag":637,"props":3179,"children":3180},{"style":701},[3181],{"type":510,"value":3182}," MyBigList",{"type":504,"tag":637,"props":3184,"children":3185},{"style":654},[3186],{"type":510,"value":1160},{"type":504,"tag":637,"props":3188,"children":3189},{"style":660},[3190],{"type":510,"value":3191}," ({ ",{"type":504,"tag":637,"props":3193,"children":3194},{"style":712},[3195],{"type":510,"value":3196},"items",{"type":504,"tag":637,"props":3198,"children":3199},{"style":660},[3200],{"type":510,"value":3201}," }) ",{"type":504,"tag":637,"props":3203,"children":3204},{"style":654},[3205],{"type":510,"value":1175},{"type":504,"tag":637,"props":3207,"children":3208},{"style":660},[3209],{"type":510,"value":1253},{"type":504,"tag":637,"props":3211,"children":3212},{"class":639,"line":692},[3213,3218],{"type":504,"tag":637,"props":3214,"children":3215},{"style":660},[3216],{"type":510,"value":3217},"  \u003C",{"type":504,"tag":637,"props":3219,"children":3220},{"style":786},[3221],{"type":510,"value":3222},"List\n",{"type":504,"tag":637,"props":3224,"children":3225},{"class":639,"line":723},[3226,3231,3235,3240,3245,3250],{"type":504,"tag":637,"props":3227,"children":3228},{"style":701},[3229],{"type":510,"value":3230},"    height",{"type":504,"tag":637,"props":3232,"children":3233},{"style":654},[3234],{"type":510,"value":1061},{"type":504,"tag":637,"props":3236,"children":3237},{"style":660},[3238],{"type":510,"value":3239},"{",{"type":504,"tag":637,"props":3241,"children":3242},{"style":786},[3243],{"type":510,"value":3244},"500",{"type":504,"tag":637,"props":3246,"children":3247},{"style":660},[3248],{"type":510,"value":3249},"} ",{"type":504,"tag":637,"props":3251,"children":3252},{"style":644},[3253],{"type":510,"value":3254},"\u002F\u002F 容器高度\n",{"type":504,"tag":637,"props":3256,"children":3257},{"class":639,"line":732},[3258,3263,3267,3272,3277,3281],{"type":504,"tag":637,"props":3259,"children":3260},{"style":701},[3261],{"type":510,"value":3262},"    itemCount",{"type":504,"tag":637,"props":3264,"children":3265},{"style":654},[3266],{"type":510,"value":1061},{"type":504,"tag":637,"props":3268,"children":3269},{"style":660},[3270],{"type":510,"value":3271},"{items.",{"type":504,"tag":637,"props":3273,"children":3274},{"style":786},[3275],{"type":510,"value":3276},"length",{"type":504,"tag":637,"props":3278,"children":3279},{"style":660},[3280],{"type":510,"value":3249},{"type":504,"tag":637,"props":3282,"children":3283},{"style":644},[3284],{"type":510,"value":3285},"\u002F\u002F 总项数\n",{"type":504,"tag":637,"props":3287,"children":3288},{"class":639,"line":761},[3289,3294,3298,3302,3307,3311],{"type":504,"tag":637,"props":3290,"children":3291},{"style":701},[3292],{"type":510,"value":3293},"    itemSize",{"type":504,"tag":637,"props":3295,"children":3296},{"style":654},[3297],{"type":510,"value":1061},{"type":504,"tag":637,"props":3299,"children":3300},{"style":660},[3301],{"type":510,"value":3239},{"type":504,"tag":637,"props":3303,"children":3304},{"style":786},[3305],{"type":510,"value":3306},"50",{"type":504,"tag":637,"props":3308,"children":3309},{"style":660},[3310],{"type":510,"value":3249},{"type":504,"tag":637,"props":3312,"children":3313},{"style":644},[3314],{"type":510,"value":3315},"\u002F\u002F 每项的固定高度\n",{"type":504,"tag":637,"props":3317,"children":3318},{"class":639,"line":816},[3319,3324,3328,3332,3337,3341],{"type":504,"tag":637,"props":3320,"children":3321},{"style":701},[3322],{"type":510,"value":3323},"    width",{"type":504,"tag":637,"props":3325,"children":3326},{"style":654},[3327],{"type":510,"value":1061},{"type":504,"tag":637,"props":3329,"children":3330},{"style":660},[3331],{"type":510,"value":3239},{"type":504,"tag":637,"props":3333,"children":3334},{"style":786},[3335],{"type":510,"value":3336},"300",{"type":504,"tag":637,"props":3338,"children":3339},{"style":660},[3340],{"type":510,"value":3249},{"type":504,"tag":637,"props":3342,"children":3343},{"style":644},[3344],{"type":510,"value":3345},"\u002F\u002F 容器宽度\n",{"type":504,"tag":637,"props":3347,"children":3348},{"class":639,"line":825},[3349],{"type":504,"tag":637,"props":3350,"children":3351},{"style":660},[3352],{"type":510,"value":3353},"  >\n",{"type":504,"tag":637,"props":3355,"children":3356},{"class":639,"line":833},[3357,3362,3367,3371,3376,3380,3384],{"type":504,"tag":637,"props":3358,"children":3359},{"style":660},[3360],{"type":510,"value":3361},"    {({ ",{"type":504,"tag":637,"props":3363,"children":3364},{"style":712},[3365],{"type":510,"value":3366},"index",{"type":504,"tag":637,"props":3368,"children":3369},{"style":660},[3370],{"type":510,"value":543},{"type":504,"tag":637,"props":3372,"children":3373},{"style":712},[3374],{"type":510,"value":3375},"style",{"type":504,"tag":637,"props":3377,"children":3378},{"style":660},[3379],{"type":510,"value":3201},{"type":504,"tag":637,"props":3381,"children":3382},{"style":654},[3383],{"type":510,"value":1175},{"type":504,"tag":637,"props":3385,"children":3386},{"style":660},[3387],{"type":510,"value":1253},{"type":504,"tag":637,"props":3389,"children":3390},{"class":639,"line":842},[3391],{"type":504,"tag":637,"props":3392,"children":3393},{"style":644},[3394],{"type":510,"value":3395},"      \u002F\u002F style 会包含 position, top, left, width, height\n",{"type":504,"tag":637,"props":3397,"children":3398},{"class":639,"line":1191},[3399,3403,3407,3412,3416],{"type":504,"tag":637,"props":3400,"children":3401},{"style":660},[3402],{"type":510,"value":1280},{"type":504,"tag":637,"props":3404,"children":3405},{"style":775},[3406],{"type":510,"value":778},{"type":504,"tag":637,"props":3408,"children":3409},{"style":701},[3410],{"type":510,"value":3411}," style",{"type":504,"tag":637,"props":3413,"children":3414},{"style":654},[3415],{"type":510,"value":1061},{"type":504,"tag":637,"props":3417,"children":3418},{"style":660},[3419],{"type":510,"value":3420},"{style}>\n",{"type":504,"tag":637,"props":3422,"children":3423},{"class":639,"line":1226},[3424],{"type":504,"tag":637,"props":3425,"children":3426},{"style":660},[3427],{"type":510,"value":3428},"        Row {items[index].name}\n",{"type":504,"tag":637,"props":3430,"children":3431},{"class":639,"line":1235},[3432,3436,3440],{"type":504,"tag":637,"props":3433,"children":3434},{"style":660},[3435],{"type":510,"value":2831},{"type":504,"tag":637,"props":3437,"children":3438},{"style":775},[3439],{"type":510,"value":778},{"type":504,"tag":637,"props":3441,"children":3442},{"style":660},[3443],{"type":510,"value":1271},{"type":504,"tag":637,"props":3445,"children":3446},{"class":639,"line":1243},[3447],{"type":504,"tag":637,"props":3448,"children":3449},{"style":660},[3450],{"type":510,"value":3451},"    )}\n",{"type":504,"tag":637,"props":3453,"children":3454},{"class":639,"line":1256},[3455,3460,3465],{"type":504,"tag":637,"props":3456,"children":3457},{"style":660},[3458],{"type":510,"value":3459},"  \u003C\u002F",{"type":504,"tag":637,"props":3461,"children":3462},{"style":786},[3463],{"type":510,"value":3464},"List",{"type":504,"tag":637,"props":3466,"children":3467},{"style":660},[3468],{"type":510,"value":1271},{"type":504,"tag":637,"props":3470,"children":3471},{"class":639,"line":1274},[3472],{"type":504,"tag":637,"props":3473,"children":3474},{"style":660},[3475],{"type":510,"value":758},{"type":504,"tag":553,"props":3477,"children":3478},{},[],{"type":504,"tag":557,"props":3480,"children":3482},{"id":3481},"_4-关联阅读",[3483],{"type":510,"value":3484},"4. 关联阅读",{"type":504,"tag":3041,"props":3486,"children":3487},{},[3488,3530,3548],{"type":504,"tag":2945,"props":3489,"children":3490},{},[3491,3496,3498,3508,3509,3519,3520],{"type":504,"tag":520,"props":3492,"children":3493},{},[3494],{"type":510,"value":3495},"React 官方文档",{"type":510,"value":3497},": ",{"type":504,"tag":3051,"props":3499,"children":3502},{"href":3500,"rel":3501},"https:\u002F\u002Freact.dev\u002Freference\u002Freact\u002Fmemo",[3055],[3503],{"type":504,"tag":528,"props":3504,"children":3506},{"className":3505},[],[3507],{"type":510,"value":568},{"type":510,"value":543},{"type":504,"tag":3051,"props":3510,"children":3513},{"href":3511,"rel":3512},"https:\u002F\u002Freact.dev\u002Freference\u002Freact\u002FuseCallback",[3055],[3514],{"type":504,"tag":528,"props":3515,"children":3517},{"className":3516},[],[3518],{"type":510,"value":549},{"type":510,"value":543},{"type":504,"tag":3051,"props":3521,"children":3524},{"href":3522,"rel":3523},"https:\u002F\u002Freact.dev\u002Freference\u002Freact\u002FuseMemo",[3055],[3525],{"type":504,"tag":528,"props":3526,"children":3528},{"className":3527},[],[3529],{"type":510,"value":541},{"type":504,"tag":2945,"props":3531,"children":3532},{},[3533,3538,3540,3546],{"type":504,"tag":520,"props":3534,"children":3535},{},[3536],{"type":510,"value":3537},"性能定位 Playbook",{"type":510,"value":3539},": (指向 ",{"type":504,"tag":528,"props":3541,"children":3543},{"className":3542},[],[3544],{"type":510,"value":3545},"notes\u002F14\u002F01-performance-playbook-and-metrics.md",{"type":510,"value":3547}," 的链接)",{"type":504,"tag":2945,"props":3549,"children":3550},{},[3551,3556,3557],{"type":504,"tag":520,"props":3552,"children":3553},{},[3554],{"type":510,"value":3555},"Kent C. Dodds",{"type":510,"value":3497},{"type":504,"tag":3051,"props":3558,"children":3561},{"href":3559,"rel":3560},"https:\u002F\u002Fkentcdodds.com\u002Fblog\u002Fbefore-you-memo",[3055],[3562],{"type":510,"value":3563},"Before You memo()",{"type":504,"tag":3375,"props":3565,"children":3566},{},[3567],{"type":510,"value":3568},"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":631,"searchDepth":650,"depth":650,"links":3570},[3571,3580,3584,3588],{"id":559,"depth":650,"text":3572,"children":3573},"1. 精准控制重渲染：memo, useMemo, useCallback",[3574,3576,3578],{"id":589,"depth":682,"text":3575},"React.memo：组件级别的渲染守卫",{"id":899,"depth":682,"text":3577},"useCallback：稳定化函数 props",{"id":1419,"depth":682,"text":3579},"useMemo：缓存昂贵的计算结果",{"id":1809,"depth":650,"text":1812,"children":3581},[3582,3583],{"id":1827,"depth":682,"text":1830},{"id":2349,"depth":682,"text":2352},{"id":2902,"depth":650,"text":2905,"children":3585},[3586,3587],{"id":2937,"depth":682,"text":2937},{"id":3032,"depth":682,"text":3032},{"id":3481,"depth":650,"text":3484},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":3590},"\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":3592},"\u003Cpath fill=\"currentColor\" d=\"M3 4h18v2H3zm0 7h12v2H3zm0 7h18v2H3z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":3594},"\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":3596,"height":3596,"rotate":4,"vFlip":6,"hFlip":6,"body":3597},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>"]