A
文章
关于

Hello World

2025-5-22 12:23

示例图表

图片加载中...
图表示意图
图片加载中...
图表示意图
这个快
图片加载中...
图表示意图

示例动图（video）

111 AA 嗷嗷

111 AA 嗷嗷

111 AA 嗷嗷

111 AA 嗷嗷

111 AA 嗷嗷

这是一篇讲解如何在 Markdown 中使用 frontmatter 的文章内容……

字段类型示例含义/用途
titlestring"我的第一篇博客"文章标题，用于列表/详情页展示
datestring"2024-12-01"发布时间，可用于排序
updatedstring"2025-01-10"最后更新时间
categorystring"开发日志"所属分类，一般用于导航
tagsstring[]["React", "前端", "技术"]标签数组，用于文章筛选、搜索
draftbooleantrue 或 false是否是草稿（为 true 时页面不展示）
coverstring"/images/banner.png"封面图 URL，用于文章列表缩略图
descriptionstring"这是一篇关于 React 的入门文章"简短摘要/描述，用于 SEO 或列表展示
authorstring"Goldy"作者名称（多作者系统可用）
slugstring"react-intro"文章路径别名，用于生成固定链接
publishedbooleantrue是否发布，与 draft 类似
readingTimestring"5 min"估算阅读时间（可自动生成）
JSX
export default async function PostPage({ params }: Params) {
  const { slug } = params;
  const post = await getPostBySlug(slug);

  return (
    <div>
      <article className="prose prose-invert max-w-5xl mx-auto p-4 ">
        <h1>{post.meta.title}</h1>
        <p>{post.meta.date}</p>
        <ReactMarkdown components={customComponents}>{post.content}</ReactMarkdown>
      </article>
    </div>
  );
}

wad

引用块

这是第一行

标注 内容

分割线 ---

什么是Diff 算法

前文已经简单的了解虚拟DOM，那么接下来要了解的就是Diff 算法了。

这个图是我从掘金拿来的，原博主讲的会更好，想要了解的可以去看
图片加载中...
图表示意图

主要内容点。将准备写的内容写到这里， 防止忘记

JSX -》 虚拟DOM -》 渲染机制 -》 Fiber架构 -》 Hooks

学习流程

JS 所有内容 -> 数据结构与算法；设计模式 -> 计算机网络 -> Nodejs -> 研发模式 -> 流程与规范

原型与继承 已完成 ES import export require worker 跨窗口通讯 无限加载 虚拟滚动 sharred atom vitest 测试内容 渲染原理与优化

函数高级特性 高阶函数 函数柯里化 防抖与节流 函数组合 关键机制 事件委托（Event Delegation） 模块化（ES Modules） 错误处理（Error Handling） 内存管理（垃圾回收） JavaScript 规范视角下的“不可变性” 框架视角：为什么 Vue/React 都在“约束写法” View Transition API

为什么 React / Redux 强调不可变更新 0.1 + 0.2 !== 0.3