[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"i-ri:search-line":3,"i-ri:moon-line":8,"i-ri:sun-line":10,"i-ri:menu-3-line":12,"i-ri:close-line":14,"notes-module-items-react":16,"notes-page-react-16-advanced\u002F04-a11y-i18n-compliance":494,"i-ri:arrow-left-s-line":2159,"i-ri:menu-2-line":2161,"i-ri:arrow-right-s-line":2163,"i-ep:copy-document":2165},{"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":487,"path":487,"title":488,"updatedAt":21,"meta":498,"body":500,"toc":2146},"bm90ZTpub3Rlcy9yZWFjdC8xNi1hZHZhbmNlZC8wNC1hMTF5LWkxOG4tY29tcGxpYW5jZS5tZA","note","notes\u002Freact\u002F16-advanced\u002F04-a11y-i18n-compliance.md",{"id":495,"type":496,"sourcePath":497,"slug":499,"title":488,"updatedAt":21,"lastUpdated":21},"react\u002F16-advanced\u002F04-a11y-i18n-compliance",{"type":501,"children":502},"root",[503,511,527,531,538,543,550,555,659,665,833,836,842,847,853,1225,1238,1966,1969,1975,1980,2013,2023,2046,2049,2055,2140],{"type":504,"tag":505,"props":506,"children":508},"element","h1",{"id":507},"a11y-i18n-与合规构建负责任的全球化应用",[509],{"type":510,"value":488},"text",{"type":504,"tag":512,"props":513,"children":514},"blockquote",{},[515],{"type":504,"tag":516,"props":517,"children":518},"p",{},[519,525],{"type":504,"tag":520,"props":521,"children":522},"strong",{},[523],{"type":510,"value":524},"一句话结论",{"type":510,"value":526},"：通过遵循 WCAG 标准实现可访问性 (a11y)，通过集成 i18n 框架支持国际化，并关注数据隐私与合规性要求，是构建一个能够服务于全球所有用户、值得信赖且负责任的 Web 应用的必要条件。",{"type":504,"tag":528,"props":529,"children":530},"hr",{},[],{"type":504,"tag":532,"props":533,"children":535},"h2",{"id":534},"_1-web-可访问性-accessibility-a11y",[536],{"type":510,"value":537},"1. Web 可访问性 (Accessibility - a11y)",{"type":504,"tag":516,"props":539,"children":540},{},[541],{"type":510,"value":542},"可访问性意味着确保你的应用可以被尽可能多的人使用，无论他们的能力如何，包括有视力、听力、运动或认知障碍的人士。这不仅是正确的做法，在许多国家和地区也是法律要求。",{"type":504,"tag":544,"props":545,"children":547},"h3",{"id":546},"a-核心原则-wcag",[548],{"type":510,"value":549},"A. 核心原则 (WCAG)",{"type":504,"tag":516,"props":551,"children":552},{},[553],{"type":510,"value":554},"Web 内容可访问性指南 (WCAG) 是全球公认的标准，它建立在四个核心原则之上 (POUR)：",{"type":504,"tag":556,"props":557,"children":558},"ol",{},[559,593,615,637],{"type":504,"tag":560,"props":561,"children":562},"li",{},[563,568,570],{"type":504,"tag":520,"props":564,"children":565},{},[566],{"type":510,"value":567},"可感知 (Perceivable)",{"type":510,"value":569},"：信息和 UI 组件必须以用户可以感知的方式呈现。\n",{"type":504,"tag":571,"props":572,"children":573},"ul",{},[574],{"type":504,"tag":560,"props":575,"children":576},{},[577,582,584,591],{"type":504,"tag":520,"props":578,"children":579},{},[580],{"type":510,"value":581},"实践",{"type":510,"value":583},"：为所有图片提供 ",{"type":504,"tag":585,"props":586,"children":588},"code",{"className":587},[],[589],{"type":510,"value":590},"alt",{"type":510,"value":592}," 文本；为视频提供字幕；确保颜色对比度足够。",{"type":504,"tag":560,"props":594,"children":595},{},[596,601,603],{"type":504,"tag":520,"props":597,"children":598},{},[599],{"type":510,"value":600},"可操作 (Operable)",{"type":510,"value":602},"：UI 组件和导航必须是可操作的。\n",{"type":504,"tag":571,"props":604,"children":605},{},[606],{"type":504,"tag":560,"props":607,"children":608},{},[609,613],{"type":504,"tag":520,"props":610,"children":611},{},[612],{"type":510,"value":581},{"type":510,"value":614},"：所有功能都必须能通过键盘访问；避免创建“键盘陷阱”；为用户提供足够的时间来阅读和使用内容。",{"type":504,"tag":560,"props":616,"children":617},{},[618,623,625],{"type":504,"tag":520,"props":619,"children":620},{},[621],{"type":510,"value":622},"可理解 (Understandable)",{"type":510,"value":624},"：信息和 UI 的操作必须是可理解的。\n",{"type":504,"tag":571,"props":626,"children":627},{},[628],{"type":504,"tag":560,"props":629,"children":630},{},[631,635],{"type":504,"tag":520,"props":632,"children":633},{},[634],{"type":510,"value":581},{"type":510,"value":636},"：使用清晰、一致的导航；表单标签和错误信息必须明确。",{"type":504,"tag":560,"props":638,"children":639},{},[640,645,647],{"type":504,"tag":520,"props":641,"children":642},{},[643],{"type":510,"value":644},"鲁棒 (Robust)",{"type":510,"value":646},"：内容必须足够健壮，能够被包括辅助技术在内的各种用户代理可靠地解释。\n",{"type":504,"tag":571,"props":648,"children":649},{},[650],{"type":504,"tag":560,"props":651,"children":652},{},[653,657],{"type":504,"tag":520,"props":654,"children":655},{},[656],{"type":510,"value":581},{"type":510,"value":658},"：使用语义化的 HTML；遵循 WAI-ARIA 标准为动态组件添加正确的角色 (roles) 和属性。",{"type":504,"tag":544,"props":660,"children":662},{"id":661},"b-react-中的-a11y-实践",[663],{"type":510,"value":664},"B. React 中的 a11y 实践",{"type":504,"tag":571,"props":666,"children":667},{},[668,716,734,783,793],{"type":504,"tag":560,"props":669,"children":670},{},[671,676,678,684,686,692,693,699,700,706,708,714],{"type":504,"tag":520,"props":672,"children":673},{},[674],{"type":510,"value":675},"语义化 HTML",{"type":510,"value":677},"：优先使用 ",{"type":504,"tag":585,"props":679,"children":681},{"className":680},[],[682],{"type":510,"value":683},"\u003Cbutton>",{"type":510,"value":685},", ",{"type":504,"tag":585,"props":687,"children":689},{"className":688},[],[690],{"type":510,"value":691},"\u003Cnav>",{"type":510,"value":685},{"type":504,"tag":585,"props":694,"children":696},{"className":695},[],[697],{"type":510,"value":698},"\u003Cmain>",{"type":510,"value":685},{"type":504,"tag":585,"props":701,"children":703},{"className":702},[],[704],{"type":510,"value":705},"\u003Cheader>",{"type":510,"value":707}," 等原生语义化标签，而不是用 ",{"type":504,"tag":585,"props":709,"children":711},{"className":710},[],[712],{"type":510,"value":713},"\u003Cdiv>",{"type":510,"value":715}," 模拟一切。",{"type":504,"tag":560,"props":717,"children":718},{},[719,724,726,732],{"type":504,"tag":520,"props":720,"children":721},{},[722],{"type":510,"value":723},"表单标签",{"type":510,"value":725},"：始终使用 ",{"type":504,"tag":585,"props":727,"children":729},{"className":728},[],[730],{"type":510,"value":731},"\u003Clabel htmlFor=\"inputId\">",{"type":510,"value":733}," 与表单控件关联。",{"type":504,"tag":560,"props":735,"children":736},{},[737,742,744],{"type":504,"tag":520,"props":738,"children":739},{},[740],{"type":510,"value":741},"Aria 属性",{"type":510,"value":743},"：对于复杂的动态组件（如模态框、下拉菜单、标签页），使用 ARIA (Accessible Rich Internet Applications) 属性来描述其角色、状态和属性。\n",{"type":504,"tag":571,"props":745,"children":746},{},[747,756,765,774],{"type":504,"tag":560,"props":748,"children":749},{},[750],{"type":504,"tag":585,"props":751,"children":753},{"className":752},[],[754],{"type":510,"value":755},"role=\"dialog\"",{"type":504,"tag":560,"props":757,"children":758},{},[759],{"type":504,"tag":585,"props":760,"children":762},{"className":761},[],[763],{"type":510,"value":764},"aria-modal=\"true\"",{"type":504,"tag":560,"props":766,"children":767},{},[768],{"type":504,"tag":585,"props":769,"children":771},{"className":770},[],[772],{"type":510,"value":773},"aria-hidden",{"type":504,"tag":560,"props":775,"children":776},{},[777],{"type":504,"tag":585,"props":778,"children":780},{"className":779},[],[781],{"type":510,"value":782},"aria-expanded",{"type":504,"tag":560,"props":784,"children":785},{},[786,791],{"type":504,"tag":520,"props":787,"children":788},{},[789],{"type":510,"value":790},"焦点管理 (Focus Management)",{"type":510,"value":792},"：在动态 UI 变化后（如打开模态框、页面导航），必须以编程方式管理焦点，确保键盘用户的体验是连贯的。",{"type":504,"tag":560,"props":794,"children":795},{},[796,801,803],{"type":504,"tag":520,"props":797,"children":798},{},[799],{"type":510,"value":800},"自动化测试工具",{"type":510,"value":802},"：\n",{"type":504,"tag":571,"props":804,"children":805},{},[806,817,828],{"type":504,"tag":560,"props":807,"children":808},{},[809,815],{"type":504,"tag":585,"props":810,"children":812},{"className":811},[],[813],{"type":510,"value":814},"@axe-core\u002Freact",{"type":510,"value":816},": 在开发过程中实时检测 a11y 问题。",{"type":504,"tag":560,"props":818,"children":819},{},[820,826],{"type":504,"tag":585,"props":821,"children":823},{"className":822},[],[824],{"type":510,"value":825},"eslint-plugin-jsx-a11y",{"type":510,"value":827},": 在 ESLint 中集成 a11y 规则检查。",{"type":504,"tag":560,"props":829,"children":830},{},[831],{"type":510,"value":832},"Storybook a11y addon: 在 Storybook 中交互式地测试组件的可访问性。",{"type":504,"tag":528,"props":834,"children":835},{},[],{"type":504,"tag":532,"props":837,"children":839},{"id":838},"_2-国际化-internationalization-i18n",[840],{"type":510,"value":841},"2. 国际化 (Internationalization - i18n)",{"type":504,"tag":516,"props":843,"children":844},{},[845],{"type":510,"value":846},"国际化是设计和开发应用的过程，使其能够轻松地适应不同的语言、地区和文化，而无需进行工程上的更改。本地化 (Localization - l10n) 则是指为特定地区添加具体内容（如翻译文本、调整日期格式）的过程。",{"type":504,"tag":544,"props":848,"children":850},{"id":849},"a-i18n-核心实践",[851],{"type":510,"value":852},"A. i18n 核心实践",{"type":504,"tag":556,"props":854,"children":855},{},[856,900,951,1027,1191],{"type":504,"tag":560,"props":857,"children":858},{},[859,864,866],{"type":504,"tag":520,"props":860,"children":861},{},[862],{"type":510,"value":863},"文本外部化",{"type":510,"value":865},"：将所有用户可见的文本字符串从代码中抽离出来，放到专门的语言资源文件（如 JSON 或 YAML）中。",{"type":504,"tag":571,"props":867,"children":868},{},[869,885],{"type":504,"tag":560,"props":870,"children":871},{},[872,877,879],{"type":504,"tag":520,"props":873,"children":874},{},[875],{"type":510,"value":876},"反模式",{"type":510,"value":878},": ",{"type":504,"tag":585,"props":880,"children":882},{"className":881},[],[883],{"type":510,"value":884},"\u003Ch1>Hello, World!\u003C\u002Fh1>",{"type":504,"tag":560,"props":886,"children":887},{},[888,893,894],{"type":504,"tag":520,"props":889,"children":890},{},[891],{"type":510,"value":892},"好模式",{"type":510,"value":878},{"type":504,"tag":585,"props":895,"children":897},{"className":896},[],[898],{"type":510,"value":899},"\u003Ch1>{t('home.title')}\u003C\u002Fh1>",{"type":504,"tag":560,"props":901,"children":902},{},[903,908,910],{"type":504,"tag":520,"props":904,"children":905},{},[906],{"type":510,"value":907},"使用 i18n 框架",{"type":510,"value":909},"：不要自己造轮子。使用成熟的框架来处理语言切换、复数、插值等复杂问题。",{"type":504,"tag":571,"props":911,"children":912},{},[913,935],{"type":504,"tag":560,"props":914,"children":915},{},[916,925,927,933],{"type":504,"tag":520,"props":917,"children":918},{},[919],{"type":504,"tag":585,"props":920,"children":922},{"className":921},[],[923],{"type":510,"value":924},"react-i18next",{"type":510,"value":926}," (基于 ",{"type":504,"tag":585,"props":928,"children":930},{"className":929},[],[931],{"type":510,"value":932},"i18next",{"type":510,"value":934},"): 功能最强大、最全面的 i18n 解决方案，支持命名空间、插件等高级功能。",{"type":504,"tag":560,"props":936,"children":937},{},[938,949],{"type":504,"tag":520,"props":939,"children":940},{},[941,947],{"type":504,"tag":585,"props":942,"children":944},{"className":943},[],[945],{"type":510,"value":946},"formatjs",{"type":510,"value":948}," (react-intl)",{"type":510,"value":950},": 由雅虎（后为\nVerizon）支持，遵循 ICU 消息格式标准，对复数、性别、日期、数字格式化的支持非常出色。",{"type":504,"tag":560,"props":952,"children":953},{},[954,959,961],{"type":504,"tag":520,"props":955,"children":956},{},[957],{"type":510,"value":958},"处理复数 (Plurals)",{"type":510,"value":960},"：不同语言的复数规则不同。i18n 框架可以优雅地处理这个问题。",{"type":504,"tag":962,"props":963,"children":968},"pre",{"className":964,"code":965,"language":966,"meta":967,"style":967},"language-json shiki shiki-themes github-light github-dark","\u002F\u002F en.json\n\"itemCount\": \"{{count}} item\",\n\"itemCount_plural\": \"{{count}} items\"\n","json","",[969],{"type":504,"tag":585,"props":970,"children":971},{"__ignoreMap":967},[972,984,1009],{"type":504,"tag":973,"props":974,"children":977},"span",{"class":975,"line":976},"line",1,[978],{"type":504,"tag":973,"props":979,"children":981},{"style":980},"--shiki-default:#6A737D;--shiki-dark:#6A737D",[982],{"type":510,"value":983},"\u002F\u002F en.json\n",{"type":504,"tag":973,"props":985,"children":987},{"class":975,"line":986},2,[988,994,999,1004],{"type":504,"tag":973,"props":989,"children":991},{"style":990},"--shiki-default:#032F62;--shiki-dark:#9ECBFF",[992],{"type":510,"value":993},"\"itemCount\"",{"type":504,"tag":973,"props":995,"children":997},{"style":996},"--shiki-default:#24292E;--shiki-dark:#E1E4E8",[998],{"type":510,"value":878},{"type":504,"tag":973,"props":1000,"children":1001},{"style":990},[1002],{"type":510,"value":1003},"\"{{count}} item\"",{"type":504,"tag":973,"props":1005,"children":1006},{"style":996},[1007],{"type":510,"value":1008},",\n",{"type":504,"tag":973,"props":1010,"children":1012},{"class":975,"line":1011},3,[1013,1018,1022],{"type":504,"tag":973,"props":1014,"children":1015},{"style":990},[1016],{"type":510,"value":1017},"\"itemCount_plural\"",{"type":504,"tag":973,"props":1019,"children":1020},{"style":996},[1021],{"type":510,"value":878},{"type":504,"tag":973,"props":1023,"children":1024},{"style":990},[1025],{"type":510,"value":1026},"\"{{count}} items\"\n",{"type":504,"tag":560,"props":1028,"children":1029},{},[1030,1035,1037,1043,1045],{"type":504,"tag":520,"props":1031,"children":1032},{},[1033],{"type":510,"value":1034},"日期、时间和数字格式化",{"type":510,"value":1036},"：不同地区有不同的格式。使用浏览器内置的 ",{"type":504,"tag":585,"props":1038,"children":1040},{"className":1039},[],[1041],{"type":510,"value":1042},"Intl",{"type":510,"value":1044}," API (i18n 框架通常会封装它) 来进行格式化。",{"type":504,"tag":962,"props":1046,"children":1050},{"className":1047,"code":1048,"language":1049,"meta":967,"style":967},"language-javascript shiki shiki-themes github-light github-dark","new Intl.DateTimeFormat('de-DE').format(new Date()); \u002F\u002F e.g., \"2.2.2026\"\nnew Intl.NumberFormat('en-IN', { style: 'currency', currency: 'INR' }).format(123456.78); \u002F\u002F e.g., \"₹1,23,456.78\"\n","javascript",[1051],{"type":504,"tag":585,"props":1052,"children":1053},{"__ignoreMap":967},[1054,1117],{"type":504,"tag":973,"props":1055,"children":1056},{"class":975,"line":976},[1057,1063,1068,1074,1079,1084,1089,1094,1098,1102,1107,1112],{"type":504,"tag":973,"props":1058,"children":1060},{"style":1059},"--shiki-default:#D73A49;--shiki-dark:#F97583",[1061],{"type":510,"value":1062},"new",{"type":504,"tag":973,"props":1064,"children":1065},{"style":996},[1066],{"type":510,"value":1067}," Intl.",{"type":504,"tag":973,"props":1069,"children":1071},{"style":1070},"--shiki-default:#6F42C1;--shiki-dark:#B392F0",[1072],{"type":510,"value":1073},"DateTimeFormat",{"type":504,"tag":973,"props":1075,"children":1076},{"style":996},[1077],{"type":510,"value":1078},"(",{"type":504,"tag":973,"props":1080,"children":1081},{"style":990},[1082],{"type":510,"value":1083},"'de-DE'",{"type":504,"tag":973,"props":1085,"children":1086},{"style":996},[1087],{"type":510,"value":1088},").",{"type":504,"tag":973,"props":1090,"children":1091},{"style":1070},[1092],{"type":510,"value":1093},"format",{"type":504,"tag":973,"props":1095,"children":1096},{"style":996},[1097],{"type":510,"value":1078},{"type":504,"tag":973,"props":1099,"children":1100},{"style":1059},[1101],{"type":510,"value":1062},{"type":504,"tag":973,"props":1103,"children":1104},{"style":1070},[1105],{"type":510,"value":1106}," Date",{"type":504,"tag":973,"props":1108,"children":1109},{"style":996},[1110],{"type":510,"value":1111},"()); ",{"type":504,"tag":973,"props":1113,"children":1114},{"style":980},[1115],{"type":510,"value":1116},"\u002F\u002F e.g., \"2.2.2026\"\n",{"type":504,"tag":973,"props":1118,"children":1119},{"class":975,"line":986},[1120,1124,1128,1133,1137,1142,1147,1152,1157,1162,1167,1171,1175,1181,1186],{"type":504,"tag":973,"props":1121,"children":1122},{"style":1059},[1123],{"type":510,"value":1062},{"type":504,"tag":973,"props":1125,"children":1126},{"style":996},[1127],{"type":510,"value":1067},{"type":504,"tag":973,"props":1129,"children":1130},{"style":1070},[1131],{"type":510,"value":1132},"NumberFormat",{"type":504,"tag":973,"props":1134,"children":1135},{"style":996},[1136],{"type":510,"value":1078},{"type":504,"tag":973,"props":1138,"children":1139},{"style":990},[1140],{"type":510,"value":1141},"'en-IN'",{"type":504,"tag":973,"props":1143,"children":1144},{"style":996},[1145],{"type":510,"value":1146},", { style: ",{"type":504,"tag":973,"props":1148,"children":1149},{"style":990},[1150],{"type":510,"value":1151},"'currency'",{"type":504,"tag":973,"props":1153,"children":1154},{"style":996},[1155],{"type":510,"value":1156},", currency: ",{"type":504,"tag":973,"props":1158,"children":1159},{"style":990},[1160],{"type":510,"value":1161},"'INR'",{"type":504,"tag":973,"props":1163,"children":1164},{"style":996},[1165],{"type":510,"value":1166}," }).",{"type":504,"tag":973,"props":1168,"children":1169},{"style":1070},[1170],{"type":510,"value":1093},{"type":504,"tag":973,"props":1172,"children":1173},{"style":996},[1174],{"type":510,"value":1078},{"type":504,"tag":973,"props":1176,"children":1178},{"style":1177},"--shiki-default:#005CC5;--shiki-dark:#79B8FF",[1179],{"type":510,"value":1180},"123456.78",{"type":504,"tag":973,"props":1182,"children":1183},{"style":996},[1184],{"type":510,"value":1185},"); ",{"type":504,"tag":973,"props":1187,"children":1188},{"style":980},[1189],{"type":510,"value":1190},"\u002F\u002F e.g., \"₹1,23,456.78\"\n",{"type":504,"tag":560,"props":1192,"children":1193},{},[1194,1199,1201,1207,1209,1215,1217,1223],{"type":504,"tag":520,"props":1195,"children":1196},{},[1197],{"type":510,"value":1198},"布局与方向",{"type":510,"value":1200},"：为支持从右到左 (RTL) 的语言（如阿拉伯语、希伯来语），应使用 CSS 逻辑属性 (",{"type":504,"tag":585,"props":1202,"children":1204},{"className":1203},[],[1205],{"type":510,"value":1206},"margin-inline-start",{"type":510,"value":1208}," 代替 ",{"type":504,"tag":585,"props":1210,"children":1212},{"className":1211},[],[1213],{"type":510,"value":1214},"margin-left",{"type":510,"value":1216},")，并根据语言设置 ",{"type":504,"tag":585,"props":1218,"children":1220},{"className":1219},[],[1221],{"type":510,"value":1222},"dir=\"rtl\"",{"type":510,"value":1224}," 属性。",{"type":504,"tag":544,"props":1226,"children":1228},{"id":1227},"b-示例-react-i18next",[1229,1231,1236],{"type":510,"value":1230},"B. 示例 (",{"type":504,"tag":585,"props":1232,"children":1234},{"className":1233},[],[1235],{"type":510,"value":924},{"type":510,"value":1237},")",{"type":504,"tag":962,"props":1239,"children":1243},{"className":1240,"code":1241,"language":1242,"meta":967,"style":967},"language-jsx shiki shiki-themes github-light github-dark","\u002F\u002F i18n.js\nimport i18n from 'i18next';\nimport { initReactI18next } from 'react-i18next';\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources: {\n      en: {\n        translation: { \"welcome\": \"Welcome to React\" }\n      },\n      fr: {\n        translation: { \"welcome\": \"Bienvenue à React\" }\n      }\n    },\n    lng: \"en\", \u002F\u002F 默认语言\n    fallbackLng: \"en\",\n    interpolation: { escapeValue: false }\n  });\n\n\u002F\u002F App.js\nimport { useTranslation } from 'react-i18next';\n\nfunction App() {\n  const { t, i18n } = useTranslation();\n\n  const changeLanguage = (lng) => {\n    i18n.changeLanguage(lng);\n  };\n\n  return (\n    \u003Cdiv>\n      \u003Ch1>{t('welcome')}\u003C\u002Fh1>\n      \u003Cbutton onClick={() => changeLanguage('en')}>English\u003C\u002Fbutton>\n      \u003Cbutton onClick={() => changeLanguage('fr')}>Français\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  );\n}\n","jsx",[1244],{"type":504,"tag":585,"props":1245,"children":1246},{"__ignoreMap":967},[1247,1255,1283,1308,1318,1327,1346,1364,1373,1382,1410,1419,1428,1453,1462,1471,1494,1511,1529,1538,1546,1555,1580,1588,1606,1654,1662,1706,1725,1734,1742,1756,1776,1820,1877,1931,1948,1957],{"type":504,"tag":973,"props":1248,"children":1249},{"class":975,"line":976},[1250],{"type":504,"tag":973,"props":1251,"children":1252},{"style":980},[1253],{"type":510,"value":1254},"\u002F\u002F i18n.js\n",{"type":504,"tag":973,"props":1256,"children":1257},{"class":975,"line":986},[1258,1263,1268,1273,1278],{"type":504,"tag":973,"props":1259,"children":1260},{"style":1059},[1261],{"type":510,"value":1262},"import",{"type":504,"tag":973,"props":1264,"children":1265},{"style":996},[1266],{"type":510,"value":1267}," i18n ",{"type":504,"tag":973,"props":1269,"children":1270},{"style":1059},[1271],{"type":510,"value":1272},"from",{"type":504,"tag":973,"props":1274,"children":1275},{"style":990},[1276],{"type":510,"value":1277}," 'i18next'",{"type":504,"tag":973,"props":1279,"children":1280},{"style":996},[1281],{"type":510,"value":1282},";\n",{"type":504,"tag":973,"props":1284,"children":1285},{"class":975,"line":1011},[1286,1290,1295,1299,1304],{"type":504,"tag":973,"props":1287,"children":1288},{"style":1059},[1289],{"type":510,"value":1262},{"type":504,"tag":973,"props":1291,"children":1292},{"style":996},[1293],{"type":510,"value":1294}," { initReactI18next } ",{"type":504,"tag":973,"props":1296,"children":1297},{"style":1059},[1298],{"type":510,"value":1272},{"type":504,"tag":973,"props":1300,"children":1301},{"style":990},[1302],{"type":510,"value":1303}," 'react-i18next'",{"type":504,"tag":973,"props":1305,"children":1306},{"style":996},[1307],{"type":510,"value":1282},{"type":504,"tag":973,"props":1309,"children":1311},{"class":975,"line":1310},4,[1312],{"type":504,"tag":973,"props":1313,"children":1315},{"emptyLinePlaceholder":1314},true,[1316],{"type":510,"value":1317},"\n",{"type":504,"tag":973,"props":1319,"children":1321},{"class":975,"line":1320},5,[1322],{"type":504,"tag":973,"props":1323,"children":1324},{"style":996},[1325],{"type":510,"value":1326},"i18n\n",{"type":504,"tag":973,"props":1328,"children":1330},{"class":975,"line":1329},6,[1331,1336,1341],{"type":504,"tag":973,"props":1332,"children":1333},{"style":996},[1334],{"type":510,"value":1335},"  .",{"type":504,"tag":973,"props":1337,"children":1338},{"style":1070},[1339],{"type":510,"value":1340},"use",{"type":504,"tag":973,"props":1342,"children":1343},{"style":996},[1344],{"type":510,"value":1345},"(initReactI18next)\n",{"type":504,"tag":973,"props":1347,"children":1349},{"class":975,"line":1348},7,[1350,1354,1359],{"type":504,"tag":973,"props":1351,"children":1352},{"style":996},[1353],{"type":510,"value":1335},{"type":504,"tag":973,"props":1355,"children":1356},{"style":1070},[1357],{"type":510,"value":1358},"init",{"type":504,"tag":973,"props":1360,"children":1361},{"style":996},[1362],{"type":510,"value":1363},"({\n",{"type":504,"tag":973,"props":1365,"children":1367},{"class":975,"line":1366},8,[1368],{"type":504,"tag":973,"props":1369,"children":1370},{"style":996},[1371],{"type":510,"value":1372},"    resources: {\n",{"type":504,"tag":973,"props":1374,"children":1376},{"class":975,"line":1375},9,[1377],{"type":504,"tag":973,"props":1378,"children":1379},{"style":996},[1380],{"type":510,"value":1381},"      en: {\n",{"type":504,"tag":973,"props":1383,"children":1385},{"class":975,"line":1384},10,[1386,1391,1396,1400,1405],{"type":504,"tag":973,"props":1387,"children":1388},{"style":996},[1389],{"type":510,"value":1390},"        translation: { ",{"type":504,"tag":973,"props":1392,"children":1393},{"style":990},[1394],{"type":510,"value":1395},"\"welcome\"",{"type":504,"tag":973,"props":1397,"children":1398},{"style":996},[1399],{"type":510,"value":878},{"type":504,"tag":973,"props":1401,"children":1402},{"style":990},[1403],{"type":510,"value":1404},"\"Welcome to React\"",{"type":504,"tag":973,"props":1406,"children":1407},{"style":996},[1408],{"type":510,"value":1409}," }\n",{"type":504,"tag":973,"props":1411,"children":1413},{"class":975,"line":1412},11,[1414],{"type":504,"tag":973,"props":1415,"children":1416},{"style":996},[1417],{"type":510,"value":1418},"      },\n",{"type":504,"tag":973,"props":1420,"children":1422},{"class":975,"line":1421},12,[1423],{"type":504,"tag":973,"props":1424,"children":1425},{"style":996},[1426],{"type":510,"value":1427},"      fr: {\n",{"type":504,"tag":973,"props":1429,"children":1431},{"class":975,"line":1430},13,[1432,1436,1440,1444,1449],{"type":504,"tag":973,"props":1433,"children":1434},{"style":996},[1435],{"type":510,"value":1390},{"type":504,"tag":973,"props":1437,"children":1438},{"style":990},[1439],{"type":510,"value":1395},{"type":504,"tag":973,"props":1441,"children":1442},{"style":996},[1443],{"type":510,"value":878},{"type":504,"tag":973,"props":1445,"children":1446},{"style":990},[1447],{"type":510,"value":1448},"\"Bienvenue à React\"",{"type":504,"tag":973,"props":1450,"children":1451},{"style":996},[1452],{"type":510,"value":1409},{"type":504,"tag":973,"props":1454,"children":1456},{"class":975,"line":1455},14,[1457],{"type":504,"tag":973,"props":1458,"children":1459},{"style":996},[1460],{"type":510,"value":1461},"      }\n",{"type":504,"tag":973,"props":1463,"children":1465},{"class":975,"line":1464},15,[1466],{"type":504,"tag":973,"props":1467,"children":1468},{"style":996},[1469],{"type":510,"value":1470},"    },\n",{"type":504,"tag":973,"props":1472,"children":1474},{"class":975,"line":1473},16,[1475,1480,1485,1489],{"type":504,"tag":973,"props":1476,"children":1477},{"style":996},[1478],{"type":510,"value":1479},"    lng: ",{"type":504,"tag":973,"props":1481,"children":1482},{"style":990},[1483],{"type":510,"value":1484},"\"en\"",{"type":504,"tag":973,"props":1486,"children":1487},{"style":996},[1488],{"type":510,"value":685},{"type":504,"tag":973,"props":1490,"children":1491},{"style":980},[1492],{"type":510,"value":1493},"\u002F\u002F 默认语言\n",{"type":504,"tag":973,"props":1495,"children":1497},{"class":975,"line":1496},17,[1498,1503,1507],{"type":504,"tag":973,"props":1499,"children":1500},{"style":996},[1501],{"type":510,"value":1502},"    fallbackLng: ",{"type":504,"tag":973,"props":1504,"children":1505},{"style":990},[1506],{"type":510,"value":1484},{"type":504,"tag":973,"props":1508,"children":1509},{"style":996},[1510],{"type":510,"value":1008},{"type":504,"tag":973,"props":1512,"children":1514},{"class":975,"line":1513},18,[1515,1520,1525],{"type":504,"tag":973,"props":1516,"children":1517},{"style":996},[1518],{"type":510,"value":1519},"    interpolation: { escapeValue: ",{"type":504,"tag":973,"props":1521,"children":1522},{"style":1177},[1523],{"type":510,"value":1524},"false",{"type":504,"tag":973,"props":1526,"children":1527},{"style":996},[1528],{"type":510,"value":1409},{"type":504,"tag":973,"props":1530,"children":1532},{"class":975,"line":1531},19,[1533],{"type":504,"tag":973,"props":1534,"children":1535},{"style":996},[1536],{"type":510,"value":1537},"  });\n",{"type":504,"tag":973,"props":1539,"children":1541},{"class":975,"line":1540},20,[1542],{"type":504,"tag":973,"props":1543,"children":1544},{"emptyLinePlaceholder":1314},[1545],{"type":510,"value":1317},{"type":504,"tag":973,"props":1547,"children":1549},{"class":975,"line":1548},21,[1550],{"type":504,"tag":973,"props":1551,"children":1552},{"style":980},[1553],{"type":510,"value":1554},"\u002F\u002F App.js\n",{"type":504,"tag":973,"props":1556,"children":1558},{"class":975,"line":1557},22,[1559,1563,1568,1572,1576],{"type":504,"tag":973,"props":1560,"children":1561},{"style":1059},[1562],{"type":510,"value":1262},{"type":504,"tag":973,"props":1564,"children":1565},{"style":996},[1566],{"type":510,"value":1567}," { useTranslation } ",{"type":504,"tag":973,"props":1569,"children":1570},{"style":1059},[1571],{"type":510,"value":1272},{"type":504,"tag":973,"props":1573,"children":1574},{"style":990},[1575],{"type":510,"value":1303},{"type":504,"tag":973,"props":1577,"children":1578},{"style":996},[1579],{"type":510,"value":1282},{"type":504,"tag":973,"props":1581,"children":1583},{"class":975,"line":1582},23,[1584],{"type":504,"tag":973,"props":1585,"children":1586},{"emptyLinePlaceholder":1314},[1587],{"type":510,"value":1317},{"type":504,"tag":973,"props":1589,"children":1590},{"class":975,"line":5},[1591,1596,1601],{"type":504,"tag":973,"props":1592,"children":1593},{"style":1059},[1594],{"type":510,"value":1595},"function",{"type":504,"tag":973,"props":1597,"children":1598},{"style":1070},[1599],{"type":510,"value":1600}," App",{"type":504,"tag":973,"props":1602,"children":1603},{"style":996},[1604],{"type":510,"value":1605},"() {\n",{"type":504,"tag":973,"props":1607,"children":1609},{"class":975,"line":1608},25,[1610,1615,1620,1625,1629,1634,1639,1644,1649],{"type":504,"tag":973,"props":1611,"children":1612},{"style":1059},[1613],{"type":510,"value":1614},"  const",{"type":504,"tag":973,"props":1616,"children":1617},{"style":996},[1618],{"type":510,"value":1619}," { ",{"type":504,"tag":973,"props":1621,"children":1622},{"style":1177},[1623],{"type":510,"value":1624},"t",{"type":504,"tag":973,"props":1626,"children":1627},{"style":996},[1628],{"type":510,"value":685},{"type":504,"tag":973,"props":1630,"children":1631},{"style":1177},[1632],{"type":510,"value":1633},"i18n",{"type":504,"tag":973,"props":1635,"children":1636},{"style":996},[1637],{"type":510,"value":1638}," } ",{"type":504,"tag":973,"props":1640,"children":1641},{"style":1059},[1642],{"type":510,"value":1643},"=",{"type":504,"tag":973,"props":1645,"children":1646},{"style":1070},[1647],{"type":510,"value":1648}," useTranslation",{"type":504,"tag":973,"props":1650,"children":1651},{"style":996},[1652],{"type":510,"value":1653},"();\n",{"type":504,"tag":973,"props":1655,"children":1657},{"class":975,"line":1656},26,[1658],{"type":504,"tag":973,"props":1659,"children":1660},{"emptyLinePlaceholder":1314},[1661],{"type":510,"value":1317},{"type":504,"tag":973,"props":1663,"children":1665},{"class":975,"line":1664},27,[1666,1670,1675,1680,1685,1691,1696,1701],{"type":504,"tag":973,"props":1667,"children":1668},{"style":1059},[1669],{"type":510,"value":1614},{"type":504,"tag":973,"props":1671,"children":1672},{"style":1070},[1673],{"type":510,"value":1674}," changeLanguage",{"type":504,"tag":973,"props":1676,"children":1677},{"style":1059},[1678],{"type":510,"value":1679}," =",{"type":504,"tag":973,"props":1681,"children":1682},{"style":996},[1683],{"type":510,"value":1684}," (",{"type":504,"tag":973,"props":1686,"children":1688},{"style":1687},"--shiki-default:#E36209;--shiki-dark:#FFAB70",[1689],{"type":510,"value":1690},"lng",{"type":504,"tag":973,"props":1692,"children":1693},{"style":996},[1694],{"type":510,"value":1695},") ",{"type":504,"tag":973,"props":1697,"children":1698},{"style":1059},[1699],{"type":510,"value":1700},"=>",{"type":504,"tag":973,"props":1702,"children":1703},{"style":996},[1704],{"type":510,"value":1705}," {\n",{"type":504,"tag":973,"props":1707,"children":1709},{"class":975,"line":1708},28,[1710,1715,1720],{"type":504,"tag":973,"props":1711,"children":1712},{"style":996},[1713],{"type":510,"value":1714},"    i18n.",{"type":504,"tag":973,"props":1716,"children":1717},{"style":1070},[1718],{"type":510,"value":1719},"changeLanguage",{"type":504,"tag":973,"props":1721,"children":1722},{"style":996},[1723],{"type":510,"value":1724},"(lng);\n",{"type":504,"tag":973,"props":1726,"children":1728},{"class":975,"line":1727},29,[1729],{"type":504,"tag":973,"props":1730,"children":1731},{"style":996},[1732],{"type":510,"value":1733},"  };\n",{"type":504,"tag":973,"props":1735,"children":1737},{"class":975,"line":1736},30,[1738],{"type":504,"tag":973,"props":1739,"children":1740},{"emptyLinePlaceholder":1314},[1741],{"type":510,"value":1317},{"type":504,"tag":973,"props":1743,"children":1745},{"class":975,"line":1744},31,[1746,1751],{"type":504,"tag":973,"props":1747,"children":1748},{"style":1059},[1749],{"type":510,"value":1750},"  return",{"type":504,"tag":973,"props":1752,"children":1753},{"style":996},[1754],{"type":510,"value":1755}," (\n",{"type":504,"tag":973,"props":1757,"children":1759},{"class":975,"line":1758},32,[1760,1765,1771],{"type":504,"tag":973,"props":1761,"children":1762},{"style":996},[1763],{"type":510,"value":1764},"    \u003C",{"type":504,"tag":973,"props":1766,"children":1768},{"style":1767},"--shiki-default:#22863A;--shiki-dark:#85E89D",[1769],{"type":510,"value":1770},"div",{"type":504,"tag":973,"props":1772,"children":1773},{"style":996},[1774],{"type":510,"value":1775},">\n",{"type":504,"tag":973,"props":1777,"children":1779},{"class":975,"line":1778},33,[1780,1785,1789,1794,1798,1802,1807,1812,1816],{"type":504,"tag":973,"props":1781,"children":1782},{"style":996},[1783],{"type":510,"value":1784},"      \u003C",{"type":504,"tag":973,"props":1786,"children":1787},{"style":1767},[1788],{"type":510,"value":505},{"type":504,"tag":973,"props":1790,"children":1791},{"style":996},[1792],{"type":510,"value":1793},">{",{"type":504,"tag":973,"props":1795,"children":1796},{"style":1070},[1797],{"type":510,"value":1624},{"type":504,"tag":973,"props":1799,"children":1800},{"style":996},[1801],{"type":510,"value":1078},{"type":504,"tag":973,"props":1803,"children":1804},{"style":990},[1805],{"type":510,"value":1806},"'welcome'",{"type":504,"tag":973,"props":1808,"children":1809},{"style":996},[1810],{"type":510,"value":1811},")}\u003C\u002F",{"type":504,"tag":973,"props":1813,"children":1814},{"style":1767},[1815],{"type":510,"value":505},{"type":504,"tag":973,"props":1817,"children":1818},{"style":996},[1819],{"type":510,"value":1775},{"type":504,"tag":973,"props":1821,"children":1823},{"class":975,"line":1822},34,[1824,1828,1833,1838,1842,1847,1851,1855,1859,1864,1869,1873],{"type":504,"tag":973,"props":1825,"children":1826},{"style":996},[1827],{"type":510,"value":1784},{"type":504,"tag":973,"props":1829,"children":1830},{"style":1767},[1831],{"type":510,"value":1832},"button",{"type":504,"tag":973,"props":1834,"children":1835},{"style":1070},[1836],{"type":510,"value":1837}," onClick",{"type":504,"tag":973,"props":1839,"children":1840},{"style":1059},[1841],{"type":510,"value":1643},{"type":504,"tag":973,"props":1843,"children":1844},{"style":996},[1845],{"type":510,"value":1846},"{() ",{"type":504,"tag":973,"props":1848,"children":1849},{"style":1059},[1850],{"type":510,"value":1700},{"type":504,"tag":973,"props":1852,"children":1853},{"style":1070},[1854],{"type":510,"value":1674},{"type":504,"tag":973,"props":1856,"children":1857},{"style":996},[1858],{"type":510,"value":1078},{"type":504,"tag":973,"props":1860,"children":1861},{"style":990},[1862],{"type":510,"value":1863},"'en'",{"type":504,"tag":973,"props":1865,"children":1866},{"style":996},[1867],{"type":510,"value":1868},")}>English\u003C\u002F",{"type":504,"tag":973,"props":1870,"children":1871},{"style":1767},[1872],{"type":510,"value":1832},{"type":504,"tag":973,"props":1874,"children":1875},{"style":996},[1876],{"type":510,"value":1775},{"type":504,"tag":973,"props":1878,"children":1880},{"class":975,"line":1879},35,[1881,1885,1889,1893,1897,1901,1905,1909,1913,1918,1923,1927],{"type":504,"tag":973,"props":1882,"children":1883},{"style":996},[1884],{"type":510,"value":1784},{"type":504,"tag":973,"props":1886,"children":1887},{"style":1767},[1888],{"type":510,"value":1832},{"type":504,"tag":973,"props":1890,"children":1891},{"style":1070},[1892],{"type":510,"value":1837},{"type":504,"tag":973,"props":1894,"children":1895},{"style":1059},[1896],{"type":510,"value":1643},{"type":504,"tag":973,"props":1898,"children":1899},{"style":996},[1900],{"type":510,"value":1846},{"type":504,"tag":973,"props":1902,"children":1903},{"style":1059},[1904],{"type":510,"value":1700},{"type":504,"tag":973,"props":1906,"children":1907},{"style":1070},[1908],{"type":510,"value":1674},{"type":504,"tag":973,"props":1910,"children":1911},{"style":996},[1912],{"type":510,"value":1078},{"type":504,"tag":973,"props":1914,"children":1915},{"style":990},[1916],{"type":510,"value":1917},"'fr'",{"type":504,"tag":973,"props":1919,"children":1920},{"style":996},[1921],{"type":510,"value":1922},")}>Français\u003C\u002F",{"type":504,"tag":973,"props":1924,"children":1925},{"style":1767},[1926],{"type":510,"value":1832},{"type":504,"tag":973,"props":1928,"children":1929},{"style":996},[1930],{"type":510,"value":1775},{"type":504,"tag":973,"props":1932,"children":1934},{"class":975,"line":1933},36,[1935,1940,1944],{"type":504,"tag":973,"props":1936,"children":1937},{"style":996},[1938],{"type":510,"value":1939},"    \u003C\u002F",{"type":504,"tag":973,"props":1941,"children":1942},{"style":1767},[1943],{"type":510,"value":1770},{"type":504,"tag":973,"props":1945,"children":1946},{"style":996},[1947],{"type":510,"value":1775},{"type":504,"tag":973,"props":1949,"children":1951},{"class":975,"line":1950},37,[1952],{"type":504,"tag":973,"props":1953,"children":1954},{"style":996},[1955],{"type":510,"value":1956},"  );\n",{"type":504,"tag":973,"props":1958,"children":1960},{"class":975,"line":1959},38,[1961],{"type":504,"tag":973,"props":1962,"children":1963},{"style":996},[1964],{"type":510,"value":1965},"}\n",{"type":504,"tag":528,"props":1967,"children":1968},{},[],{"type":504,"tag":532,"props":1970,"children":1972},{"id":1971},"_3-合规性-compliance",[1973],{"type":510,"value":1974},"3. 合规性 (Compliance)",{"type":504,"tag":516,"props":1976,"children":1977},{},[1978],{"type":510,"value":1979},"合规性是指确保你的应用遵守相关国家或地区的法律法规。对于 Web 应用，最关键的通常是数据隐私和安全。",{"type":504,"tag":571,"props":1981,"children":1982},{},[1983,1993,2003],{"type":504,"tag":560,"props":1984,"children":1985},{},[1986,1991],{"type":504,"tag":520,"props":1987,"children":1988},{},[1989],{"type":510,"value":1990},"GDPR (通用数据保护条例)",{"type":510,"value":1992},"：欧盟的法律，对如何收集、处理和存储个人数据设置了严格的规定。核心原则包括“设计即隐私”、用户的“被遗忘权”等。",{"type":504,"tag":560,"props":1994,"children":1995},{},[1996,2001],{"type":504,"tag":520,"props":1997,"children":1998},{},[1999],{"type":510,"value":2000},"CCPA (加州消费者隐私法案)",{"type":510,"value":2002},"：加州的法律，赋予消费者对其个人信息更多的控制权。",{"type":504,"tag":560,"props":2004,"children":2005},{},[2006,2011],{"type":504,"tag":520,"props":2007,"children":2008},{},[2009],{"type":510,"value":2010},"Cookie 同意管理",{"type":510,"value":2012},"：在许多地区（特别是欧盟），你必须在存储非必要的 Cookies 之前，明确地获得用户的同意。这需要实现一个 Cookie 同意管理平台 (CMP)。",{"type":504,"tag":516,"props":2014,"children":2015},{},[2016,2021],{"type":504,"tag":520,"props":2017,"children":2018},{},[2019],{"type":510,"value":2020},"前端的责任",{"type":510,"value":2022},"：",{"type":504,"tag":571,"props":2024,"children":2025},{},[2026,2031,2036,2041],{"type":504,"tag":560,"props":2027,"children":2028},{},[2029],{"type":510,"value":2030},"与法务团队合作，理解应用需要遵守哪些法规。",{"type":504,"tag":560,"props":2032,"children":2033},{},[2034],{"type":510,"value":2035},"确保所有用户数据的收集都是透明的，并获得了适当的同意。",{"type":504,"tag":560,"props":2037,"children":2038},{},[2039],{"type":510,"value":2040},"在技术上实现用户对其数据的控制权（如数据导出、账户删除）。",{"type":504,"tag":560,"props":2042,"children":2043},{},[2044],{"type":510,"value":2045},"谨慎处理所有第三方脚本，了解它们收集了什么数据。",{"type":504,"tag":528,"props":2047,"children":2048},{},[],{"type":504,"tag":532,"props":2050,"children":2052},{"id":2051},"_4-关联阅读",[2053],{"type":510,"value":2054},"4. 关联阅读",{"type":504,"tag":571,"props":2056,"children":2057},{},[2058,2076,2092,2108,2124],{"type":504,"tag":560,"props":2059,"children":2060},{},[2061,2066,2067],{"type":504,"tag":520,"props":2062,"children":2063},{},[2064],{"type":510,"value":2065},"W3C WAI",{"type":510,"value":878},{"type":504,"tag":2068,"props":2069,"children":2073},"a",{"href":2070,"rel":2071},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002Ffundamentals\u002Faccessibility-intro\u002F",[2072],"nofollow",[2074],{"type":510,"value":2075},"Introduction to Web Accessibility",{"type":504,"tag":560,"props":2077,"children":2078},{},[2079,2084,2085],{"type":504,"tag":520,"props":2080,"children":2081},{},[2082],{"type":510,"value":2083},"The A11Y Project",{"type":510,"value":878},{"type":504,"tag":2068,"props":2086,"children":2089},{"href":2087,"rel":2088},"https:\u002F\u002Fwww.a11yproject.com\u002F",[2072],[2090],{"type":510,"value":2091},"a11yproject.com",{"type":504,"tag":560,"props":2093,"children":2094},{},[2095,2100,2101],{"type":504,"tag":520,"props":2096,"children":2097},{},[2098],{"type":510,"value":2099},"react-i18next 官方文档",{"type":510,"value":878},{"type":504,"tag":2068,"props":2102,"children":2105},{"href":2103,"rel":2104},"https:\u002F\u002Freact.i18next.com\u002F",[2072],[2106],{"type":510,"value":2107},"react.i18next.com",{"type":504,"tag":560,"props":2109,"children":2110},{},[2111,2116,2117],{"type":504,"tag":520,"props":2112,"children":2113},{},[2114],{"type":510,"value":2115},"FormatJS 官方文档",{"type":510,"value":878},{"type":504,"tag":2068,"props":2118,"children":2121},{"href":2119,"rel":2120},"https:\u002F\u002Fformatjs.io\u002F",[2072],[2122],{"type":510,"value":2123},"formatjs.io",{"type":504,"tag":560,"props":2125,"children":2126},{},[2127,2132,2133],{"type":504,"tag":520,"props":2128,"children":2129},{},[2130],{"type":510,"value":2131},"GDPR 官网",{"type":510,"value":878},{"type":504,"tag":2068,"props":2134,"children":2137},{"href":2135,"rel":2136},"https:\u002F\u002Fgdpr-info.eu\u002F",[2072],[2138],{"type":510,"value":2139},"gdpr-info.eu",{"type":504,"tag":2141,"props":2142,"children":2143},"style",{},[2144],{"type":510,"value":2145},"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":967,"searchDepth":986,"depth":986,"links":2147},[2148,2152,2157,2158],{"id":534,"depth":986,"text":537,"children":2149},[2150,2151],{"id":546,"depth":1011,"text":549},{"id":661,"depth":1011,"text":664},{"id":838,"depth":986,"text":841,"children":2153},[2154,2155],{"id":849,"depth":1011,"text":852},{"id":1227,"depth":1011,"text":2156},"B. 示例 (react-i18next)",{"id":1971,"depth":986,"text":1974},{"id":2051,"depth":986,"text":2054},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":2160},"\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":2162},"\u003Cpath fill=\"currentColor\" d=\"M3 4h18v2H3zm0 7h12v2H3zm0 7h18v2H3z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":2164},"\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":2166,"height":2166,"rotate":4,"vFlip":6,"hFlip":6,"body":2167},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>"]