使用指南

快速开始

# 克隆项目
git clone https://github.com/coderNc/notes.git

# 安装依赖
npm install

# 启动开发服务器
npm run docs:dev

# 构建生产版本
npm run docs:build

# 预览构建结果
npm run docs:preview

项目结构

docs/
├── index.md           # 首页
├── about.md           # 关于页面
└── react/             # React 相关笔记
    ├── react-hooks.md
    ├── react-communication.md
    ├── react-form.md
    ├── react-performance.md
    ├── react-hoc.md
    ├── react-error-handling.md
    ├── react-context-advanced.md
    ├── react-principles.md
    ├── react-best-practices.md
    ├── react-modern-ecosystem.md
    └── react-common-patterns.md

React 笔记概览

核心功能

1. React Hooks - 19KB

   • useState、useEffect、useContext、useReducer
   • useRef、useCallback、useMemo
   • 自定义 Hooks
   • Hooks 最佳实践

2. 组件间通信 - 24KB

   • 父子组件通信（Props、回调）
   • 兄弟组件通信（状态提升）
   • 跨层级通信（Context API）
   • 全局状态管理（Redux、Zustand）
   • Refs 通信

3. 表单处理 - 31KB

   • 受控组件
   • 非受控组件
   • 表单验证
   • React Hook Form

进阶功能

4. 性能优化 - 20KB

   • React.memo
   • useCallback/useMemo
   • 虚拟列表
   • 懒加载和代码分割

5. 高阶组件（HOC） - 17KB

   • HOC 基本概念
   • 常见 HOC 模式
   • HOC vs Hooks
   • 实用 HOC 示例

6. 错误处理 - 24KB

   • 错误边界
   • 错误日志收集
   • 降级 UI 处理
   • 全局错误处理

7. Context 深入 - 24KB

   • Context 优化技巧
   • 分离选择器模式
   • 实际应用（主题切换、表单状态、权限控制）

高级知识

8. React 原理 - 28KB

   • 虚拟 DOM
   • Diff 算法
   • Fiber 架构
   • 合成事件系统
   • 调度和优先级

9. 最佳实践 - 24KB

   • 组件设计原则
   • 目录结构规范
   • 命名约定
   • Props 类型检查
   • 可访问性
   • 性能优化
   • 错误处理
   • 测试
   • 代码组织

10. 现代生态 - 31KB

    • 构建工具（Vite、Next.js）
    • 状态管理（Zustand、Redux Toolkit、TanStack Query）
    • UI 组件库（shadcn/ui、Ant Design、Material-UI）
    • TypeScript 集成
    • 现代开发模式（SSR、SSG、Server Actions）

11. 常见模式 - 31KB

    • 容器组件 vs 展示组件
    • 组合 vs 继承
    • 渲染属性模式
    • 状态提升
    • Props 默认值和类型检查
    • 性能优化模式
    • 错误边界模式
    • 实战应用

统计信息

• 总文件数: 11
• 总代码量: 约 273KB
• 章节数: 77
• 代码示例: 约 360+

技术栈

• 前端框架: React 18+
• 构建工具: VitePress 1.3.1
• 语言: JavaScript/TypeScript
• UI 库: VitePress 默认主题

贡献指南

欢迎提交 Issue 和 Pull Request！

许可证

MIT License

联系方式

• GitHub: @coderNc