[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"knowledge-\u002Fapi\u002Fknowledge\u002Fbooklet\u002Fframe\u002Freact\u002Fbasics":3,"knowledge-related-\u002Fknowledge\u002Fbooklet\u002Fframe\u002Freact\u002Fbasics":702,"knowledge-series-\u002Fknowledge\u002Fbooklet\u002Fframe\u002Freact\u002Fbasics":722},{"source":4,"connector":5,"page":6},"sqlite","better-sqlite3",{"path":7,"title":8,"description":9,"category":10,"tags":11,"date":13,"pinned":14,"draft":14,"body":15,"seo":698,"stem":699,"id":700,"extension":701},"\u002Fknowledge\u002Fbooklet\u002Fframe\u002Freact\u002Fbasics","React 基础","React 是用于构建用户界面的 JavaScript 库（UI 库），由 Meta 维护。当前文档以 React 18+ 为主线（createRoot、并发特性、Hooks）。前置：JavaScript 基础、HTML、CSS。","技能小册",[12],"react","2020-02-12",false,{"type":16,"value":17,"toc":689},"minimark",[18,22,57,73,78,126,130,202,234,237,314,325,328,401,405,494,509,512,630,633,636,685],[19,20,8],"h1",{"id":21},"react-基础",[23,24,25,32,33,37,38,42,43,47,48,47,52,56],"p",{},[26,27,31],"a",{"href":28,"rel":29},"https:\u002F\u002Freact.dev\u002F",[30],"nofollow","React"," 是用于构建用户界面的 JavaScript 库（UI 库），由 Meta 维护。当前文档以 ",[34,35,36],"strong",{},"React 18+"," 为主线（",[39,40,41],"code",{},"createRoot","、并发特性、Hooks）。前置：",[26,44,46],{"href":45},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fjs\u002Fbasics","JavaScript 基础","、",[26,49,51],{"href":50},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fhtml\u002Finfo","HTML",[26,53,55],{"href":54},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fflex","CSS","。",[23,58,59,60,64,65,68,69,72],{},"可与 ",[26,61,63],{"href":62},"\u002Fknowledge\u002Fbooklet\u002Fframe\u002Fvue\u002Fbasics","Vue 基础"," 对照学习：二者都组件化，但 React 以 ",[34,66,67],{},"函数组件 + Hooks"," 为默认写法，更新由 ",[39,70,71],{},"setState"," 触发重新渲染。",[74,75,77],"h2",{"id":76},"react-是什么不是什么","React 是什么、不是什么",[79,80,81,93],"table",{},[82,83,84],"thead",{},[85,86,87,90],"tr",{},[88,89],"th",{},[88,91,92],{},"说明",[94,95,96,107],"tbody",{},[85,97,98,104],{},[99,100,101],"td",{},[34,102,103],{},"是",[99,105,106],{},"用组件描述 UI；用状态驱动界面更新；可与任意后端、路由、状态库组合",[85,108,109,114],{},[99,110,111],{},[34,112,113],{},"不是",[99,115,116,117,121,122,125],{},"完整框架（路由、数据获取需选配库）；模板语言（使用 ",[26,118,120],{"href":119},"\u002Fknowledge\u002Fbooklet\u002Fframe\u002Freact\u002Fjsx","JSX"," 或 ",[39,123,124],{},"createElement","）",[74,127,129],{"id":128},"应用入口react-18","应用入口（React 18+）",[131,132,137],"pre",{"className":133,"code":134,"language":135,"meta":136,"style":136},"language-tsx shiki shiki-themes material-theme-lighter github-light github-dark","import { StrictMode } from \"react\";\nimport { createRoot } from \"react-dom\u002Fclient\";\nimport App from \".\u002FApp\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render(\n  \u003CStrictMode>\n    \u003CApp \u002F>\n  \u003C\u002FStrictMode>,\n);\n","tsx","",[39,138,139,147,153,159,166,172,178,184,190,196],{"__ignoreMap":136},[140,141,144],"span",{"class":142,"line":143},"line",1,[140,145,146],{},"import { StrictMode } from \"react\";\n",[140,148,150],{"class":142,"line":149},2,[140,151,152],{},"import { createRoot } from \"react-dom\u002Fclient\";\n",[140,154,156],{"class":142,"line":155},3,[140,157,158],{},"import App from \".\u002FApp\";\n",[140,160,162],{"class":142,"line":161},4,[140,163,165],{"emptyLinePlaceholder":164},true,"\n",[140,167,169],{"class":142,"line":168},5,[140,170,171],{},"const root = createRoot(document.getElementById(\"root\")!);\n",[140,173,175],{"class":142,"line":174},6,[140,176,177],{},"root.render(\n",[140,179,181],{"class":142,"line":180},7,[140,182,183],{},"  \u003CStrictMode>\n",[140,185,187],{"class":142,"line":186},8,[140,188,189],{},"    \u003CApp \u002F>\n",[140,191,193],{"class":142,"line":192},9,[140,194,195],{},"  \u003C\u002FStrictMode>,\n",[140,197,199],{"class":142,"line":198},10,[140,200,201],{},");\n",[203,204,205,216],"ul",{},[206,207,208,212,213,56],"li",{},[34,209,210],{},[39,211,41],{},"：React 18 起推荐 API；替代已弃用的 ",[39,214,215],{},"ReactDOM.render",[206,217,218,223,224,227,228,233],{},[34,219,220],{},[39,221,222],{},"StrictMode","：开发模式下帮助发现不安全生命周期、过时的 API 等；",[34,225,226],{},"会故意双重调用","部分函数（如部分 Effect）以暴露副作用问题，仅开发环境，不影响生产构建行为（见 ",[26,229,232],{"href":230,"rel":231},"https:\u002F\u002Freact.dev\u002Freference\u002Freact\u002FStrictMode",[30],"官方 StrictMode","）。",[74,235,236],{"id":236},"函数组件",[131,238,240],{"className":133,"code":239,"language":135,"meta":136,"style":136},"import { useState } from \"react\";\n\ntype CounterProps = {\n  initial?: number;\n};\n\nexport function Counter({ initial = 0 }: CounterProps) {\n  const [count, setCount] = useState(initial);\n  return (\n    \u003Cbutton type=\"button\" onClick={() => setCount((c) => c + 1)}>\n      {count}\n    \u003C\u002Fbutton>\n  );\n}\n",[39,241,242,247,251,256,261,266,270,275,280,285,290,296,302,308],{"__ignoreMap":136},[140,243,244],{"class":142,"line":143},[140,245,246],{},"import { useState } from \"react\";\n",[140,248,249],{"class":142,"line":149},[140,250,165],{"emptyLinePlaceholder":164},[140,252,253],{"class":142,"line":155},[140,254,255],{},"type CounterProps = {\n",[140,257,258],{"class":142,"line":161},[140,259,260],{},"  initial?: number;\n",[140,262,263],{"class":142,"line":168},[140,264,265],{},"};\n",[140,267,268],{"class":142,"line":174},[140,269,165],{"emptyLinePlaceholder":164},[140,271,272],{"class":142,"line":180},[140,273,274],{},"export function Counter({ initial = 0 }: CounterProps) {\n",[140,276,277],{"class":142,"line":186},[140,278,279],{},"  const [count, setCount] = useState(initial);\n",[140,281,282],{"class":142,"line":192},[140,283,284],{},"  return (\n",[140,286,287],{"class":142,"line":198},[140,288,289],{},"    \u003Cbutton type=\"button\" onClick={() => setCount((c) => c + 1)}>\n",[140,291,293],{"class":142,"line":292},11,[140,294,295],{},"      {count}\n",[140,297,299],{"class":142,"line":298},12,[140,300,301],{},"    \u003C\u002Fbutton>\n",[140,303,305],{"class":142,"line":304},13,[140,306,307],{},"  );\n",[140,309,311],{"class":142,"line":310},14,[140,312,313],{},"}\n",[23,315,316,317,320,321,233],{},"类组件仍受支持，但",[34,318,319],{},"新项目应使用函数组件 + Hooks","（见 ",[26,322,324],{"href":323},"\u002Fknowledge\u002Fbooklet\u002Fframe\u002Freact\u002Fhooks\u002Fstate","Hooks",[74,326,327],{"id":327},"核心概念速览",[79,329,330,339],{},[82,331,332],{},[85,333,334,337],{},[88,335,336],{},"概念",[88,338,92],{},[94,340,341,351,368,378,392],{},[85,342,343,348],{},[99,344,345],{},[34,346,347],{},"组件",[99,349,350],{},"可复用的 UI 单元；Props 只读，由父传入",[85,352,353,358],{},[99,354,355],{},[34,356,357],{},"State",[99,359,360,361,363,364,367],{},"组件内部可变数据；更新须用 ",[39,362,71],{}," \u002F ",[39,365,366],{},"dispatch","，触发重新渲染",[85,369,370,375],{},[99,371,372],{},[34,373,374],{},"单向数据流",[99,376,377],{},"数据自父向子通过 props 流动；子通过回调通知父",[85,379,380,385],{},[99,381,382],{},[34,383,384],{},"虚拟 DOM",[99,386,387,388,125],{},"React 在内存中计算 UI 树，再与真实 DOM 协调（见 ",[26,389,391],{"href":390},"\u002Fknowledge\u002Fbooklet\u002Fframe\u002Freact\u002Frendering","渲染",[85,393,394,398],{},[99,395,396],{},[34,397,324],{},[99,399,400],{},"在函数组件中使用 state、副作用、Context 等的 API",[74,402,404],{"id":403},"常用生态选配","常用生态（选配）",[79,406,407,417],{},[82,408,409],{},[85,410,411,414],{},[88,412,413],{},"库",[88,415,416],{},"用途",[94,418,419,431,443,455,467,482],{},[85,420,421,428],{},[99,422,423],{},[26,424,427],{"href":425,"rel":426},"https:\u002F\u002Freactrouter.com\u002F",[30],"React Router",[99,429,430],{},"客户端路由",[85,432,433,440],{},[99,434,435],{},[26,436,439],{"href":437,"rel":438},"https:\u002F\u002Fredux-toolkit.js.org\u002F",[30],"Redux Toolkit",[99,441,442],{},"可预测的全局状态（复杂应用）",[85,444,445,452],{},[99,446,447],{},[26,448,451],{"href":449,"rel":450},"https:\u002F\u002Fzustand.docs.pmnd.rs\u002F",[30],"Zustand",[99,453,454],{},"轻量全局状态",[85,456,457,464],{},[99,458,459],{},[26,460,463],{"href":461,"rel":462},"https:\u002F\u002Ftanstack.com\u002Fquery",[30],"TanStack Query",[99,465,466],{},"服务端状态 \u002F 请求缓存",[85,468,469,476],{},[99,470,471],{},[26,472,475],{"href":473,"rel":474},"https:\u002F\u002Fvite.dev\u002F",[30],"Vite",[99,477,478,479,125],{},"开发与构建（",[39,480,481],{},"@vitejs\u002Fplugin-react",[85,483,484,491],{},[99,485,486],{},[26,487,490],{"href":488,"rel":489},"https:\u002F\u002Fnextjs.org\u002F",[30],"Next.js",[99,492,493],{},"React 全栈 \u002F SSR 框架（可选）",[23,495,496,497,47,501,47,505,56],{},"详见 ",[26,498,500],{"href":499},"\u002Fknowledge\u002Fbooklet\u002Fframe\u002Freact\u002Fstate","状态管理",[26,502,504],{"href":503},"\u002Fknowledge\u002Fbooklet\u002Fframe\u002Freact\u002Frouter","路由",[26,506,508],{"href":507},"\u002Fknowledge\u002Fbooklet\u002Fframe\u002Freact\u002Fecology","生态",[74,510,511],{"id":511},"本目录学习路径",[79,513,514,524],{},[82,515,516],{},[85,517,518,521],{},[88,519,520],{},"主题",[88,522,523],{},"文档",[94,525,526,536,546,568,577,586,596,611],{},[85,527,528,531],{},[99,529,530],{},"语法",[99,532,533],{},[26,534,535],{"href":119},"jsx",[85,537,538,540],{},[99,539,347],{},[99,541,542],{},[26,543,545],{"href":544},"\u002Fknowledge\u002Fbooklet\u002Fframe\u002Freact\u002Fcomponents","components",[85,547,548,550],{},[99,549,324],{},[99,551,552,555,556,555,560,555,564],{},[26,553,554],{"href":323},"state"," → ",[26,557,559],{"href":558},"\u002Fknowledge\u002Fbooklet\u002Fframe\u002Freact\u002Fhooks\u002Feffect","effect",[26,561,563],{"href":562},"\u002Fknowledge\u002Fbooklet\u002Fframe\u002Freact\u002Fhooks\u002Fcontext","context",[26,565,567],{"href":566},"\u002Fknowledge\u002Fbooklet\u002Fframe\u002Freact\u002Fhooks\u002Fmemo","memo",[85,569,570,573],{},[99,571,572],{},"全局状态",[99,574,575],{},[26,576,554],{"href":499},[85,578,579,581],{},[99,580,504],{},[99,582,583],{},[26,584,585],{"href":503},"router",[85,587,588,591],{},[99,589,590],{},"渲染原理",[99,592,593],{},[26,594,595],{"href":390},"rendering",[85,597,598,601],{},[99,599,600],{},"性能",[99,602,603,47,607],{},[26,604,606],{"href":605},"\u002Fknowledge\u002Fbooklet\u002Fframe\u002Freact\u002Fperformance\u002Fbuild","performance\u002Fbuild",[26,608,610],{"href":609},"\u002Fknowledge\u002Fbooklet\u002Fframe\u002Freact\u002Fperformance\u002Fruntime","runtime",[85,612,613,616],{},[99,614,615],{},"工程",[99,617,618,47,622,47,626],{},[26,619,621],{"href":620},"\u002Fknowledge\u002Fbooklet\u002Fframe\u002Freact\u002Fproject","project",[26,623,625],{"href":624},"\u002Fknowledge\u002Fbooklet\u002Fframe\u002Freact\u002Ftypescript","typescript",[26,627,629],{"href":628},"\u002Fknowledge\u002Fbooklet\u002Fframe\u002Freact\u002Ftest","test",[74,631,632],{"id":632},"参考文献",[23,634,635],{},"以下链接在编写时均可正常访问：",[79,637,638,647],{},[82,639,640],{},[85,641,642,645],{},[88,643,644],{},"资料",[88,646,92],{},[94,648,649,661,673],{},[85,650,651,658],{},[99,652,653],{},[26,654,657],{"href":655,"rel":656},"https:\u002F\u002Fzh-hans.react.dev\u002F",[30],"React 官方文档",[99,659,660],{},"中文",[85,662,663,670],{},[99,664,665],{},[26,666,669],{"href":667,"rel":668},"https:\u002F\u002Fzh-hans.react.dev\u002Flearn\u002Finstallation",[30],"React：安装",[99,671,672],{},"创建项目",[85,674,675,682],{},[99,676,677],{},[26,678,681],{"href":679,"rel":680},"https:\u002F\u002Fzh-hans.react.dev\u002Flearn\u002Fthinking-in-react",[30],"React：思维模型",[99,683,684],{},"组件拆分",[686,687,688],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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":136,"searchDepth":149,"depth":149,"links":690},[691,692,693,694,695,696,697],{"id":76,"depth":149,"text":77},{"id":128,"depth":149,"text":129},{"id":236,"depth":149,"text":236},{"id":327,"depth":149,"text":327},{"id":403,"depth":149,"text":404},{"id":511,"depth":149,"text":511},{"id":632,"depth":149,"text":632},{"title":8,"description":9},"knowledge\u002Fbooklet\u002Fframe\u002FReact\u002Fbasics","knowledge\u002Fknowledge\u002Fbooklet\u002Fframe\u002FReact\u002Fbasics.md","md",{"items":703},[704,707,710,713,716,719],{"path":390,"title":705,"description":706,"category":10,"score":174},"渲染与协调","React 将组件渲染为虚拟 DOM 树，再协调（reconciliation）到浏览器 DOM。理解该过程有助于解释 key、memo 与性能优化。涵盖渲染流程、Fiber、startTransition、Suspense、最佳实践与常见坑。",{"path":620,"title":708,"description":709,"category":10,"score":174},"工程化","新建 React 项目时，官方与社区主流工具为 Vite；全栈场景常用 Next.js。涵盖 Vite + React、Create React App 现状、Next.js、目录结构、环境变量、部署、最佳实践与常见坑。",{"path":624,"title":711,"description":712,"category":10,"score":174},"TypeScript","React 官方推荐 TypeScript。类型主要落在 Props、事件、Ref 与 Hooks 返回值上。见 组件。",{"path":628,"title":714,"description":715,"category":10,"score":174},"测试","React 组件测试推荐 React Testing Library（RTL）：从用户可见行为断言，而非实现细节。运行器常用 Vitest 或 Jest。涵盖安装配置、查询优先级、异步测试、Mock 网络请求、最佳实践与常见坑。",{"path":605,"title":717,"description":718,"category":10,"score":174},"构建与分包","通过代码分割与构建配置减小首屏 JavaScript 体积。涵盖 React.lazy\u002FSuspense、路由级分割、Tree Shaking、Vite 生产构建、体积分析、最佳实践与常见坑。运行时优化见 runtime。",{"path":558,"title":720,"description":721,"category":10,"score":174},"Effect 与副作用","useEffect 用于在组件渲染后执行与外部系统同步的逻辑（请求、订阅、手动改 DOM 等）。涵盖基本用法、依赖数组、适用\u002F不适用场景、useLayoutEffect、最佳实践与常见坑。",{"series":723,"title":12,"items":724,"index":762,"prev":763,"next":764},"booklet\u002Fframe\u002Freact",[725,726,728,731,734,736,738,741,744,746,748,750,753,756,758,760],{"path":7,"title":8,"date":13,"pinned":14},{"path":605,"title":717,"date":727,"pinned":14},"2025-07-23",{"path":544,"title":729,"date":730,"pinned":14},"组件与 Props","2020-06-11",{"path":562,"title":732,"date":733,"pinned":14},"Context","2021-10-16",{"path":507,"title":508,"date":735,"pinned":14},"2023-02-04",{"path":558,"title":720,"date":737,"pinned":14},"2024-10-11",{"path":119,"title":739,"date":740,"pinned":14},"JSX 与语法","2020-02-29",{"path":566,"title":742,"date":743,"pinned":14},"Memo、Callback 与 Ref","2021-02-28",{"path":620,"title":708,"date":745,"pinned":14},"2026-05-08",{"path":390,"title":705,"date":747,"pinned":14},"2026-07-10",{"path":503,"title":504,"date":749,"pinned":14},"2023-09-06",{"path":609,"title":751,"date":752,"pinned":14},"运行时优化","2020-02-05",{"path":323,"title":754,"date":755,"pinned":14},"State 与 Reducer","2021-02-21",{"path":499,"title":500,"date":757,"pinned":14},"2024-02-07",{"path":628,"title":714,"date":759,"pinned":14},"2025-09-26",{"path":624,"title":711,"date":761,"pinned":14},"2026-03-13",0,null,{"path":605,"title":717,"date":727,"pinned":14}]