2025 年了，万分推荐的前端学习路径!!!

📝最近也没有小伙伴问我学习路径，但我还是心血来潮写一篇推荐的学习路线^_^

一个明确的学习路线,能达到一个事半功倍的效果(o(╥﹏╥)o 为啥没人来这样提醒我)

练气期(HTML CSS)

• HTML
• CSS

这两个熟能生巧,建议直接仿小米官网之类的纯 HTML + CSS的项目

CSS(进阶)

• box盒子模型
• Flex布局 :Flex学习小游戏网址
• position布局

练气练了三千年(JS)

• 
• JavaScripInfo URL 做好笔记,完成章节课后任务
• 
• 推荐实体书,或者网络上找盗版电子书
• 
• 推荐实体书,或者网络上找盗版电子书

万分推荐边学习,边写文章记录

• 语雀(笔记网址)
• 稀土掘金(文章发表平台)

拜宗门

在 JS 世界层面界，自 ECMAScript 老祖开辟鸿蒙以来。历经数代演化，React 、Vue 、Angular 三者三分天下

选择React

为什么推荐React?因为主包只了解React

大厂React也是居多,但一般不卡技术栈(对实习生来说)

React视频课程推荐

小满ZS,主包非常喜欢的一个UP主,视频讲解了

• React源码
• 全部React Hooks
• React组件
• React CSS
• React router
• zustand (React 状态管理)

React视频课程推荐-小满ZS

React组件,项目实战

神光,稀土小册子专业户

React通关秘籍

• 日历组件 icon组件 space组件 水印组件 message组件 等等
• React Playground项目
• 低代码编辑器项目

主包目前也在学这个小册子,有兴趣的可以加主包WX一起交流

React源码学习

React源码也是面试的一个常考点,学习相关东西,自己试着手写是最快的学习方法

• 实现createElement方法
• 实现递归Render渲染
• Render渲染转为时间切片渲染
• fiber树的三个链表
• diff算法优化更新
• function组件
• setState的简单实现

• build your own react

力扣算法学习

hot100反复刷，刷题技巧

总结题型（比如：滑动窗口，应该先维护一个有条件的窗口，然后扩大窗口，直到不满足条件，缩小窗口），

了解每种题型的优势（比如：前缀和，优化求中间片段的总和）

做到看到题目就知道使用什么技巧

• Hot100
• 灵茶山艾府 视频讲解

前端手写

下面开始报菜名了

• DFS 与 BFS 遍历

• 发布订阅

• 防抖

• 节流

• 浅拷贝

• JSON拷贝

• 递归拷贝

• messageChannel 拷贝

• structuredClone拷贝

• 手写apply

• 手写call

• 手写bind

• 手写 Map

• 手写 forEach (无返回值)

• 手写filter

• 手写reduce

• 手写数组,对象扁平

• 判断对象是否相同

• 对象去重

• 手写new

• new.target

• 手写create

• 继承几种方式

• 原型链继承

• 盗用构造函数

• 原型链 + 构造函数

• create

• 盗用构造函数 + create

• extends (最优)

• 手写instanceof

• 了解symbol

• 手写instanceof

• isPrototypeOf

• 了解iterator

• 了解Generator

• 手写 async

• 手写Promise all

• 手写Promise race

• 手写PromiseAPI any

• 手写Promise allsettled

• 手写控制并发

• 手写红绿灯实现

• 手写函数柯里化

• 子树添加父 ID

• 数组转树

• 冒泡排序手写 sort

• 快排

• 队排

• 乱序排

• 千位数分割

• 大写转驼峰

• 驼峰转大写

• 解析 URL

• 手写hash

• 手写history

• 手写defineProperty

• 手写proxy手写vue响应式

• setTimeOut 实现 setInterval

等等等