[{"data":1,"prerenderedAt":287},["ShallowReactive",2],{"component-sample-posts":3,"component-code-example":117},[4,17,28,41,49,58,67,75,83,92,99,107],{"id":5,"path":6,"title":7,"description":8,"categorySlug":9,"categoryLabel":10,"publishedAt":11,"readingMinutes":12,"featured":13,"tags":14},"blog\u002Fblog\u002Ftypescript-narrowing.md","\u002Fblog\u002Ftypescript-narrowing","TypeScript 类型收窄入门","使用 typeof 和条件判断缩小联合类型的范围，让后续代码更安全。","typescript","TypeScript","2026-09-25",5,true,[10,15,16],"类型收窄","学习笔记",{"id":18,"path":19,"title":20,"description":21,"categorySlug":22,"categoryLabel":23,"publishedAt":24,"readingMinutes":25,"featured":13,"tags":26},"blog\u002Fblog\u002Freact-controlled-form.md","\u002Fblog\u002Freact-controlled-form","React 受控表单：从一个输入框开始","用一个简单的姓名输入框，理解 value、onChange 与 React state 之间的关系。","react","React","2026-09-18",6,[23,27,16],"表单",{"id":29,"path":30,"title":31,"description":32,"categorySlug":33,"categoryLabel":34,"publishedAt":35,"readingMinutes":36,"featured":13,"tags":37},"blog\u002Fblog\u002Fcss-grid-cards.md","\u002Fblog\u002Fcss-grid-cards","用 CSS Grid 排列自适应卡片","使用 repeat、minmax 和 auto-fit，让卡片列数随容器宽度自然变化。","styles","页面与样式","2026-09-10",4,[38,39,40],"CSS","Grid","页面布局",{"id":42,"path":43,"title":44,"description":45,"categorySlug":9,"categoryLabel":10,"publishedAt":46,"readingMinutes":12,"featured":13,"tags":47},"blog\u002Fblog\u002Ftypescript-component-props.md","\u002Fblog\u002Ftypescript-component-props","给 React 组件的 Props 添加 TypeScript 类型","用必填属性和可选属性描述组件接口，让使用方式在编辑器里更清晰。","2026-09-02",[10,23,48],"类型",{"id":50,"path":51,"title":52,"description":53,"categorySlug":22,"categoryLabel":23,"publishedAt":54,"readingMinutes":12,"featured":55,"tags":56},"blog\u002Fblog\u002Freact-props-and-state.md","\u002Fblog\u002Freact-props-and-state","React 组件里的 Props 和 State","用一个简单的信息卡片区分外部传入的数据和组件内部会变化的数据。","2026-08-28",false,[23,57,16],"组件",{"id":59,"path":60,"title":61,"description":62,"categorySlug":33,"categoryLabel":34,"publishedAt":63,"readingMinutes":12,"featured":55,"tags":64},"blog\u002Fblog\u002Fmobile-layout-checklist.md","\u002Fblog\u002Fmobile-layout-checklist","做移动端页面适配时的检查笔记","从内容宽度、触控区域、文字换行和键盘焦点几个方面检查窄屏体验。","2026-08-20",[38,65,66],"响应式","可访问性",{"id":68,"path":69,"title":70,"description":71,"categorySlug":22,"categoryLabel":23,"publishedAt":72,"readingMinutes":36,"featured":55,"tags":73},"blog\u002Fblog\u002Freact-list-keys.md","\u002Fblog\u002Freact-list-keys","React 列表渲染里的 key 有什么用","通过稳定的 key 帮助 React 识别列表项目，避免用数组下标造成的状态错位。","2026-08-12",[23,74,16],"列表",{"id":76,"path":77,"title":78,"description":79,"categorySlug":9,"categoryLabel":10,"publishedAt":80,"readingMinutes":36,"featured":55,"tags":81},"blog\u002Fblog\u002Ftypescript-union-status.md","\u002Fblog\u002Ftypescript-union-status","用联合类型描述请求状态","把加载、成功和失败等状态限制在明确的集合里，减少拼写错误和遗漏分支。","2026-08-04",[10,82,16],"联合类型",{"id":84,"path":85,"title":86,"description":87,"categorySlug":22,"categoryLabel":23,"publishedAt":88,"readingMinutes":36,"featured":55,"tags":89},"blog\u002Fblog\u002Freact-use-state-practice.md","\u002Fblog\u002Freact-use-state-practice","用 useState 管理一个简单的计数交互","从加一和重置两个操作，熟悉 React state 的声明与更新方式。","2026-07-30",[23,90,91],"useState","练习记录",{"id":93,"path":94,"title":95,"description":96,"categorySlug":22,"categoryLabel":23,"publishedAt":97,"readingMinutes":12,"featured":55,"tags":98},"blog\u002Fblog\u002Freact-small-components.md","\u002Fblog\u002Freact-small-components","把重复的界面拆成小组件","从重复的按钮和卡片开始，认识组件拆分的几个简单信号。","2026-07-16",[23,57,91],{"id":100,"path":101,"title":102,"description":103,"categorySlug":22,"categoryLabel":23,"publishedAt":104,"readingMinutes":25,"featured":55,"tags":105},"blog\u002Fblog\u002Freact-use-effect-notes.md","\u002Fblog\u002Freact-use-effect-notes","React useEffect 的依赖和清理","整理 useEffect 何时运行，以及订阅和定时器为什么需要清理。","2026-06-30",[23,106,16],"useEffect",{"id":108,"path":109,"title":110,"description":111,"categorySlug":112,"categoryLabel":113,"publishedAt":114,"readingMinutes":36,"featured":55,"tags":115},"blog\u002Fblog\u002Fvite-react-project.md","\u002Fblog\u002Fvite-react-project","用 Vite 创建一个 React + TypeScript 小项目","记录从初始化模板到启动开发服务器的基础步骤，以及几个值得先检查的文件。","tools","开发工具","2026-06-12",[116,23,10],"Vite",{"id":118,"title":119,"body":120,"description":130,"extension":281,"meta":282,"navigation":13,"path":283,"seo":284,"stem":285,"__hash__":286},"examples\u002Fexamples\u002Fnote.md","Note 组件示例",{"type":121,"value":122,"toc":279},"minimark",[123,275],[124,125,131],"pre",{"className":126,"code":127,"filename":128,"language":129,"meta":130,"style":130},"language-tsx shiki shiki-themes github-light-high-contrast","type NoteProps = {\n  title: string\n}\n\nexport function Note({ title }: NoteProps) {\n  return (\n    \u003Carticle>\n      \u003Ch2>{title}\u003C\u002Fh2>\n    \u003C\u002Farticle>\n  )\n}\n","Note.tsx","tsx","",[132,133,134,154,167,173,178,206,214,227,254,264,270],"code",{"__ignoreMap":130},[135,136,139,143,147,150],"span",{"class":137,"line":138},"line",1,[135,140,142],{"class":141},"sTJeM","type",[135,144,146],{"class":145},"sV4o_"," NoteProps",[135,148,149],{"class":141}," =",[135,151,153],{"class":152},"sigWx"," {\n",[135,155,157,160,163],{"class":137,"line":156},2,[135,158,159],{"class":145},"  title",[135,161,162],{"class":141},":",[135,164,166],{"class":165},"sacAq"," string\n",[135,168,170],{"class":137,"line":169},3,[135,171,172],{"class":152},"}\n",[135,174,175],{"class":137,"line":36},[135,176,177],{"emptyLinePlaceholder":13},"\n",[135,179,180,183,186,190,193,196,199,201,203],{"class":137,"line":12},[135,181,182],{"class":141},"export",[135,184,185],{"class":141}," function",[135,187,189],{"class":188},"s3dhs"," Note",[135,191,192],{"class":152},"({ ",[135,194,195],{"class":145},"title",[135,197,198],{"class":152}," }",[135,200,162],{"class":141},[135,202,146],{"class":145},[135,204,205],{"class":152},") {\n",[135,207,208,211],{"class":137,"line":25},[135,209,210],{"class":141},"  return",[135,212,213],{"class":152}," (\n",[135,215,217,220,224],{"class":137,"line":216},7,[135,218,219],{"class":152},"    \u003C",[135,221,223],{"class":222},"s742_","article",[135,225,226],{"class":152},">\n",[135,228,230,233,236,239,242,244,247,250,252],{"class":137,"line":229},8,[135,231,232],{"class":152},"      \u003C",[135,234,235],{"class":222},"h2",[135,237,238],{"class":152},">",[135,240,241],{"class":141},"{",[135,243,195],{"class":152},[135,245,246],{"class":141},"}",[135,248,249],{"class":152},"\u003C\u002F",[135,251,235],{"class":222},[135,253,226],{"class":152},[135,255,257,260,262],{"class":137,"line":256},9,[135,258,259],{"class":152},"    \u003C\u002F",[135,261,223],{"class":222},[135,263,226],{"class":152},[135,265,267],{"class":137,"line":266},10,[135,268,269],{"class":152},"  )\n",[135,271,273],{"class":137,"line":272},11,[135,274,172],{"class":152},[276,277,278],"style",{},"html pre.shiki code .sTJeM, html code.shiki .sTJeM{--shiki-default:#A0111F}html pre.shiki code .sV4o_, html code.shiki .sV4o_{--shiki-default:#702C00}html pre.shiki code .sigWx, html code.shiki .sigWx{--shiki-default:#0E1116}html pre.shiki code .sacAq, html code.shiki .sacAq{--shiki-default:#023B95}html pre.shiki code .s3dhs, html code.shiki .s3dhs{--shiki-default:#622CBC}html pre.shiki code .s742_, html code.shiki .s742_{--shiki-default:#024C1A}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);}",{"title":130,"searchDepth":156,"depth":156,"links":280},[],"md",{},"\u002Fexamples\u002Fnote",{"title":119,"description":130},"examples\u002Fnote","mjxtYCgvwqJf1hOnjhJvRNGr46l2dsbZFZznPW0FoMo",1792674168119]