Web深入学习仓库

欢迎来到我的 React 深入学习仓库！🎉
此仓库记录了我在学习前端相关技术栈过程中的实践、思考和总结，旨在不断提升开发技能，提炼项目中的重难点以应对更复杂、更高效的应用开发需求。

---

🚀 学习目标

1. 熟练掌握 React 核心概念（Hooks、Context、组件生命周期等）。
2. 理解 React 高级特性（性能优化、React.memo、Suspense、React.lazy 等）。
3. 理解 React 状态管理工具（Redux、MobX、Zustand、Recoil 等）以及最佳实践。
4. 探索 React 与 TypeScript 的结合使用。
5. 学习服务端渲染（SSR）与静态生成（SSG）（如 Next.js）。
6. 使用 React 构建现代化前端项目，并学会测试（Jest、React Testing Library）。
7. 深入理解 React 渲染原理与 Fiber 架构。

✨ 学习内容

学习重难点: 虚拟列表的优化(滚动过快导致的白屏) 文件夹上传(并发处理) 微前端 二次封装组件 前端监控（数据埋点/js错误/性能指标统计fp pcp lcp） 微项目:

• 线上象棋
  • 通过websocket实现实时对战系统,处理网络中断重连逻辑(网络信号差情况未处理),保存棋局
  • 悔棋(待开发)
  • 进行过代码重构,性能优化(待开发:使用 useMemo 缓存计算结果,大量的dom重新渲染)
  • 有完整的响应式支持,多层嵌套的响应式协调
• 井字棋
  • 实现回溯功能
• 虚拟列表
  • 自定义useVirtual Hook实现灵活配置,支持自定义预估高度和缓冲区
  • 性能优化(使用防抖节流避免过多的性能消耗)
  • 兼容性(动态高度处理,能处理每个列表项高度不同的情况)
• 文件上传
  • 多种上传方式实现(单文件,多文件拖拽上传,选择上传)
  • 使用Md5实现大文件切片上传,断点续传 项目技术栈:

monorepo架构

• 共享依赖,避免安装相同的依赖,所有项目使用相同版本的依赖，确保版本一致
• 简化版本控制,所有子项目在同一个Git管理，保持同步版本。

** React 与 TypeScript**

• 类型安全的组件编写：
  • 针对 Props、State、事件的类型定义。
• 自定义 Hook 与泛型的结合。
• 使用 React.FC 和函数式组件的类型约束。

安装依赖：

pnpm install

启动开发服务器：

pnpm run dev

🤝 贡献指南

如果你对本仓库有任何建议或改进意见，欢迎通过 Issue 或 Pull Request 的形式参与进来！

希望这个模板能帮助你构建一个优秀的 React 学习仓库！🎉 如果有其他需求，请随时告诉我 😊