第11期 | 为什么需要框架从jQuery到React系列AI前端工程师·从零基础到拿到Offer模块二开篇。欢迎来到前端工程化的世界。 今天你将学会理解前端框架演进的历史动力每代框架解决了什么问题用同一个功能Todo列表对比原生JS/jQuery/Vue/React四种写法理解 React 的核心思想声明式 UI 和组件化建立框架选型的判断力什么项目用什么框架 核心知识一、历史背景前端从美化页面到构建应用2000年代服务端渲染时代那时候根本没有前端工程师这个职位——前端是后端顺带干的。HTML 由服务器拼好整页返回浏览器只负责展示。JavaScript 只用来做一点点动画和验证。2006年jQuery 的出现jQuery 解决了一个当时巨大的痛点浏览器兼容性。那时候同一段代码在 IE、Firefox、Safari 里行为不一样jQuery 封装了这些差异提供统一的 API// 不用 jQuery为不同浏览器写不同代码vareldocument.getElementById?document.getElementById(box):document.all[box];// 用 jQuery一行搞定$(#box).hide().fadeIn(300);jQuery 统治前端长达10年。但随着 Web 应用越来越复杂jQuery 的问题开始暴露大量手动 DOM 操作状态难以管理。2013年React 的出现Facebook 的工程师遇到了这个问题他们的页面状态极其复杂通知数量、消息列表、好友状态……任何一处更新都可能影响多个 UI 组件用 jQuery 手动同步这些状态简直是噩梦。React 的核心思想解决了这个问题不手动操作 DOM告诉框架我希望 UI 是什么样子框架负责更新 DOM。二、用同一个 Todo 列表对比四种写法我们来实现同样的功能显示 todo 列表可以添加新 todo可以标记完成。写法一原生 JavaScript命令式// 我们在第04-06期已经很熟悉这种写法了lettodos[{id:1,text:学 HTML,done:true},{id:2,text:学 CSS,done:false},];functionrenderTodos(){constuldocument.getElementById(todoList);ul.innerHTMLtodos.map(todoli input typecheckbox${todo.done?checked:}onchangetoggleTodo(${todo.id}) span style${todo.done?text-decoration:line-through:}${todo.text}/span /li).join();}functiontoggleTodo(id){consttodotodos.find(tt.idid);todo.done!todo.done;renderTodos();// 每次都要手动重新渲染}functionaddTodo(text){todos.push({id:Date.now(),text,done:false});renderTodos();// 手动同步 UI}renderTodos();// 初始渲染问题每次状态变化都要手动调用renderTodos()随着逻辑复杂你可能忘了在某个地方调用UI 就不同步了。写法二jQuery// jQuery 风格链式操作 DOM但问题本质一样$(function(){lettodos[];functionrender(){$(#todoList).empty();todos.forEach(todo{constli$(li).appendTo(#todoList);$(input typecheckbox).prop(checked,todo.done).on(change,(){todo.done!todo.done;render();// 还是手动 render}).appendTo(li);$(span).text(todo.text).css(text-decoration,todo.done?line-through:).appendTo(li);});}$(#addBtn).on(click,(){consttext$(#input).val().trim();if(text){todos.push({id:Date.now(),text,done:false});render();// 手动 render}});});问题本质一样jQuery 让 DOM 操作更方便了但没有解决状态 → UI 同步的根本问题。写法三Vue 3templatedivinputv-modelnewTodokeyup.enteraddTodoplaceholder新 TodobuttonclickaddTodo添加/buttonulliv-fortodo in todos:keytodo.idinputtypecheckboxv-modeltodo.donespan:class{ done: todo.done }{{ todo.text }}/span/li/ul/div/templatescriptsetupimport{ref}fromvue;constnewTodoref();consttodosref([{id:1,text:学 HTML,done:true},{id:2,text:学 CSS,done:false},]);functionaddTodo(){if(newTodo.value.trim()){todos.value.push({id:Date.now(),text:newTodo.value,done:false});newTodo.value;}}/script变化没有任何手动 DOM 操作你只需要修改todos这个数据Vue 自动更新 UI。写法四Reactimport { useState } from react; function TodoApp() { const [todos, setTodos] useState([ { id: 1, text: 学 HTML, done: true }, { id: 2, text: 学 CSS, done: false }, ]); const [input, setInput] useState(); const addTodo () { if (!input.trim()) return; setTodos([...todos, { id: Date.now(), text: input, done: false }]); setInput(); }; const toggleTodo (id) { setTodos(todos.map(t t.id id ? { ...t, done: !t.done } : t)); }; return ( div input value{input} onChange{e setInput(e.target.value)} onKeyUp{e e.key Enter addTodo()} placeholder新 Todo / button onClick{addTodo}添加/button ul {todos.map(todo ( li key{todo.id} input typecheckbox checked{todo.done} onChange{() toggleTodo(todo.id)} / span style{{ textDecoration: todo.done ? line-through : none }} {todo.text} /span /li ))} /ul /div ); }关键区别没有任何document.querySelector没有手动render()没有innerHTML。你只是在描述当 todos 是这个值时UI 长什么样——React 负责一切 DOM 操作。三、React 的三个核心思想1. 声明式Declarative命令式jQuery/原生JS怎么做——找到这个元素改变它的文本添加这个类 声明式React要什么——当 count 是 5 时显示5个任务声明式更符合人类思维bug 更少代码更可预测。2. 组件化Component-Based一个复杂页面可以拆成很多独立的、可复用的组件// 每个组件像一个自定义 HTML 标签 function App() { return ( div Navbar / {/* 导航栏组件 */} HeroSection / {/* 主图区域组件 */} ArticleGrid articles{data} / {/* 文章列表组件接收数据 */} Footer / {/* 页脚组件 */} /div ); }组件可以复用Navbar在每个页面都用改一处全部生效。3. 单向数据流One-Way Data Flow数据只从父组件流向子组件不能反向。子组件想改数据需要调用父组件传来的函数function Parent() { const [count, setCount] useState(0); // 把数据和修改数据的函数都传给子组件 return Child count{count} onIncrement{() setCount(count 1)} /; } function Child({ count, onIncrement }) { return ( div p计数{count}/p button onClick{onIncrement}1/button {/* 子组件不能直接改 count只能调用 onIncrement */} /div ); }单向数据流让数据变化可追踪bug 更容易定位。四、Virtual DOMReact 高效更新的秘密React 不直接操作真实 DOM操作 DOM 代价很高而是先在内存里维护一个Virtual DOM虚拟 DOM每次状态变化后重新计算 Virtual DOM对比新旧 Virtual DOMDiffing 算法只把真正变化的部分同步到真实 DOM这叫Reconciliation协调。状态变化 → 重新渲染组件 → 得到新 Virtual DOM → Diff → 最小化 DOM 更新理解 Virtual DOM 对面试很重要但在日常开发中你不需要关心它——React 自动处理。五、框架选型指南场景推荐理由独立前端工程师求职React市场需求最大生态最丰富国内中小厂Vue 3学习曲线低文档完善全栈/服务端渲染Next.jsReact或 NuxtVue内置 SSR/SSG超轻量页面无需组件化原生 JS不引入框架负担可交互内容展示Svelte编译时优化包体积小Angular 遗留项目Angular不要随便换框架本课程选择 React 的原因国内外大厂普遍使用面试需求最高生态最丰富Next.js、React Native、各类 UI 库掌握 React 后Vue 上手很快反之亦然AI 应用开发Vercel AI SDK、LangChain.js基本都有 React 版本六、React 生态全景在深入学 React 之前先知道它的生态React 核心 ├── 状态管理 │ ├── useState / useReducer内置 │ ├── Context API内置跨组件传递 │ ├── Zustand轻量推荐 │ └── Redux Toolkit复杂应用 │ ├── 路由 │ └── React Router第12-20期会用到 │ ├── 服务端渲染框架 │ └── Next.js全栈 React 应用首选 │ ├── UI 组件库 │ ├── shadcn/ui现代Tailwind CSS │ ├── MUIMaterial Design │ └── Ant Design国内常用 │ ├── 数据请求 │ ├── TanStack Query服务端状态管理 │ └── SWRVercel 出品 │ └── 构建工具 └── Vite现代打包工具第17期专讲你不需要全部学按需取用。接下来几期我们先学核心。 AI协作实战场景让 AI 对比 React 和 Vue 的代码写法我给 AI 的 Prompt请用 React 和 Vue 3 分别实现一个相同的功能 一个带输入框的搜索过滤列表输入关键词实时过滤列表项。 然后帮我对比 1. 代码量和可读性 2. 状态管理方式的差异 3. 事件绑定语法的差异 4. 各自的学习曲线 不需要完整项目只需要核心逻辑代码。AI 的分析摘要我整理的对比维度ReactVue 3状态声明const [val, setVal] useState()const val ref()绑定值value{val} onChange{e setVal(e.target.value)}v-modelval计算值const filtered items.filter(...)直接写const filtered computed(...)模板语法JSXJS 中写 HTML独立.vue文件template/script/style学习曲线需要理解 JSX、hooks 思维模板语法更接近 HTML入门更友好两者都很好用我选 React 是因为市场需求和 AI 应用生态更大。 动手练习练习1简单不用框架纯原生 JS 实现当todos数组变化时添加/删除/切换观察你需要手动调用多少次render()。感受一下这种手动同步的繁琐。练习2阅读理解把本期第二节的四种 Todo 写法全部读一遍对照着找到每种写法里添加 todo的操作在哪里标记完成触发了什么UI 更新是如何发生的练习3准备工作下期我们开始写 React提前安装好环境# 确认 Node.js 版本 18node--version# 创建第一个 React 项目下期用到npmcreate vitelatest my-react-app ----templatereactcdmy-react-appnpminstallnpmrun dev# 打开 http://localhost:5173看到 React 欢迎页就成功了 本期要点框架的本质解决状态变化时 UI 自动同步的问题而不是让 DOM 操作更方便React 三原则声明式描述要什么 组件化可复用单元 单向数据流数据可追踪Virtual DOMReact 在内存里算好最小更新再同步到真实 DOM提高性能React vs Vue两者思路相似React 市场需求更大Vue 入门更友好掌握一个另一个触类旁通不要纠结选哪个现在学 React后面如果需要 Vue 一周就能上手 下期预告第12期React核心·JSX与组件终于要写 React 了下期从最基础的 JSX 语法开始理解函数组件、Props、State写出你第一个真正的 React 组件。AI协作点我们会让 AI 生成一批组件模板然后拆解每一部分的意思——这是理解 React 最高效的方式之一。如果你没有苹果电脑需要上传ios到APPStore可以访问以下网站iPA上传工具 - IPA解析与AppStore提交