本章定位到这里我们正式进入第四阶段React。前面你已经一步一步学过HTML 和 CSS知道页面结构和样式是怎么组成的。JavaScript知道怎么给页面加交互、操作 DOM、处理事件。TypeScript知道怎么让数据结构、函数边界和项目开发过程更清楚。也就是说到现在为止你已经具备了一个非常重要的基础你已经能做页面也已经能写交互了。但只要页面稍微复杂一点你很快就会遇到新的问题页面结构越来越大代码越来越分散。同一种界面块会重复出现很多次。数据一变化要手动改很多地方的 DOM。功能一多结构、样式、逻辑容易互相缠在一起。这时候我们就需要一种更适合组织复杂界面的方式。React 就是在这样的背景下登场的。这一章我们不会急着上很多 API也不会一上来就讲一堆新语法而是先把三个最重要的问题讲清楚React 到底是什么React 解决了什么问题为什么它会在前端世界里这么流行你可以把这一章理解成在真正开始写 React 代码之前先把 React 的核心价值和思维方式建立起来。本章学习目标学完这一章后你应该能做到知道 React 更准确地说是什么。理解 React 主要在解决哪几类前端开发问题。理解“组件化”到底是什么意思。初步理解“数据驱动界面”的思路。看懂 React 和传统 HTML/CSS/JS 页面开发方式的核心区别。理解 React 为什么会流行但也知道它不是唯一选择。建立进入 React 阶段前最重要的学习心态。为下一章学习 JSX 与组件基础做好准备。一、为什么学到这里会自然进入 React如果你回头看前面走过的路线会发现它其实非常自然HTML 让你会搭页面结构。CSS 让你会控制页面样式。JavaScript 让你会操作页面、处理交互。TypeScript 让你会更清楚地描述数据和规则。但现代前端项目的难点往往不在于“会不会某个单独语法”而在于当页面变复杂后你还能不能把它组织清楚。比如一个稍微真实一点的页面可能同时包含这些部分顶部导航搜索框分类筛选商品列表商品卡片购物车摘要登录弹窗加载中状态空状态提示如果这些东西全都靠原生 DOM 查询、手动创建节点、手动更新文本、手动控制显示隐藏来维护项目刚开始也许还能撑住但功能一多代码就会越来越难看、越来越难改。所以进入 React 阶段并不是因为前面的 HTML、CSS、JavaScript 不够用了。而是因为我们要开始学习如何用更适合现代项目的方式去组织界面、组织交互、组织代码。二、React 到底是什么先给一个当前阶段最够用、也最准确的理解React 是一个用于构建用户界面的 JavaScript 库。这里有几个关键词非常重要。1. “JavaScript 库”是什么意思这表示 React 不是一门新语言。你学 React并不是把前面的 JavaScript 推翻重学一遍而是在 JavaScript 的基础上学习一套更适合搭建界面的开发方式。所以你会发现React 代码里依然会写 JavaScript。React 项目里依然离不开 HTML 和 CSS 的知识。React 只是把这些东西组织得更清楚。2. “用户界面”指的是什么所谓用户界面简单理解就是用户能看到、能点击、能输入、能交互的那一层页面内容。例如按钮输入框卡片列表导航栏弹窗表单React 最擅长做的就是把这些界面部分拆开、组合、复用并让它们随着数据变化自动更新。3. React 不是在替代基础三件套这一点一定要尽早记住。React 不是来替代HTMLCSSJavaScript而是来帮你更高效地组织 HTML、CSS 和 JavaScript。如果你前面的基础不扎实学 React 往往会更吃力。这也是为什么我们没有一上来就直接进入 React而是先走完了前面三个阶段。4. 先看一个最简单的 React 组件长什么样function WelcomeCard() { // 下一章会详细讲 JSX这里先把它当成“描述界面”的写法 return h2你好React/h2; }这段代码你现在先不用追着每个细节去理解。当前阶段你只需要先感受一件事在 React 里我们会用“组件”的方式去描述界面。下一章我们就会正式讲到 JSX 和组件基础。三、先别急着学语法先看看 React 想解决什么问题很多初学者第一次学 React 时最容易把注意力放在JSX 长什么样组件怎么写props、state是什么各种 API 怎么用这些当然都重要。但如果你没有先搞清楚 React 想解决什么问题那么后面学到的很多写法就会变成只会照着写但不知道为什么要这样写。所以在正式讲组件细节之前我们先回到一个更本质的问题只用原生 HTML、CSS、JavaScript 写页面时复杂度为什么会越来越高四、页面一复杂原生 DOM 开发最容易累在哪里先说明一件事原生 HTML、CSS、JavaScript 完全没有问题。小页面、小练习、简单交互直接用原生方式写往往非常直接。React 并不是因为“原生写法错了”才出现的。真正的问题是当页面复杂度上来以后手动维护界面会越来越累。1. 先看一个非常简单的原生渲染例子consttitleElementdocument.querySelector(.todo-title);constlistElementdocument.querySelector(.todo-list);functionrenderTodoList(todoList){titleElement.textContent待办事项${todoList.length};listElement.innerHTML;todoList.forEach(function(item){constliElementdocument.createElement(li);liElement.textContentitem;listElement.appendChild(liElement);});}这段代码本身没有问题而且对于入门阶段来说它非常有价值。因为它能帮你真正理解怎么找到元素怎么改文本怎么创建节点怎么把数据渲染到页面2. 问题通常不是一开始出现的真正麻烦的地方在于项目不会永远停留在“一个标题、一个列表”这么简单。如果功能继续增加你可能还会继续加上已完成和未完成分类搜索关键字过滤编辑待办项删除确认弹窗加载中提示空列表提示错误提示统计信息这时候你就会发现你要改的 DOM 节点越来越多。同一个数据变化可能要同步更新好几个地方。结构、样式、逻辑很容易分散在不同位置。一旦改需求常常不知道会影响到哪里。3. 原生开发更像是在“手动修页面”很多时候你会不自觉地进入这种思路先找到某个元素。再去改它的文本。再去改它的类名。再去控制它显示还是隐藏。再去处理另一个相关元素。这不是错。但一旦页面复杂起来这种“手动到处改页面”的工作方式会越来越吃力。React 想解决的正是这类问题。五、React 主要解决了什么问题你可以先把 React 的核心价值概括成一句话React 让我们可以用更清楚、更可复用、更适合维护的方式去构建界面。具体来说它主要在解决下面几类问题。1. 复杂界面难组织当页面只是一小块内容时原生写法完全够用。但当页面开始包含很多区域、很多状态、很多交互时代码很容易越写越散。React 提供了一种很重要的组织方式把界面拆成一个个组件来管理。这样你在看代码时不再只是看到一大坨页面逻辑而是能看到头部组件搜索组件列表组件卡片组件页脚组件页面结构会更清楚维护成本也会更低。2. 重复界面难复用很多页面里都会有大量“长得差不多”的部分。例如商品卡片用户信息卡片评论项菜单项通用按钮如果你每次都复制粘贴一份 HTML再分别改内容那么后面只要样式或结构改一次就要到处同步修改。React 的组件化思路会让你更自然地把这些重复界面提炼成一份结构多次使用。这就是它非常重要的一层价值。3. 数据变化和界面更新容易脱节这是 React 非常核心的一点。在原生 DOM 写法里你经常需要自己记住数据变了哪些 DOM 要跟着变变多少在什么时机变React 更强调另一种思路先关心“当前数据下界面应该长什么样”再让渲染过程跟着数据走。也就是说React 很重视数据驱动界面这会让界面更新逻辑更清楚。4. 项目变大后协作会更困难当项目不再只是你一个人写而是多人协作时代码组织方式会变得非常重要。如果整个页面逻辑杂糅在一起任何人改一点点东西都可能影响别的地方。而 React 的组件边界会更容易帮助团队建立谁负责哪个组件哪个组件接收什么数据哪个组件处理什么职责这也是 React 非常适合中大型项目的原因之一。六、什么是“组件化”“组件化”是 React 世界里最基础、也最重要的一个词。你现在可以先把组件理解成页面里的一个独立功能单元或界面单元。它通常有自己明确的职责也往往可以被单独理解、单独维护、单独复用。1. 组件不等于“随便切一块 HTML”这是初学者很容易误会的地方。组件并不是把页面随便切成很多碎片。更合理的理解应该是组件是围绕“职责”来拆分的。例如一个课程页面可以拆成页面头部PageHeader搜索栏SearchBar课程列表CourseList课程卡片CourseCard页脚PageFooter这就比“这里一个div、那里一个span”更有意义。2. 看一个简单的页面组件树App ├── PageHeader ├── SearchBar ├── CourseList │ ├── CourseCard │ ├── CourseCard │ └── CourseCard └── PageFooter从这棵树里你可以很直观地感受到页面不是一整坨而是由多个部分组成。有些部分只出现一次比如头部和页脚。有些部分会重复出现很多次比如课程卡片。而 React 非常擅长表达这种页面由组件组合而成的结构。3. 组件化到底带来了什么好处至少有四个很直接的好处页面结构更清楚。重复部分更容易复用。逻辑更容易按职责组织。项目越大越容易维护。4. 组件拆分时初学者先抓三个判断标准你可以先用这三个问题帮助自己判断这一块是否有明确职责这一块是否可能重复出现这一块是否值得单独维护如果答案经常是“是”那它通常就很适合拆成组件。七、React 更重要的一层思维数据驱动界面如果说“组件化”是在回答页面该怎么拆那么“数据驱动界面”回答的就是页面该怎么更新这件事非常关键。因为 React 和很多初学者最熟悉的原生 DOM 思维最大的区别之一就在这里。1. 原生 DOM 常见思路手动修改页面例如一个计数器很多人最自然的写法可能是count1;countElement.textContent当前数量${count};这种写法很直观。你明确知道自己在做什么数据加一页面文本同步改掉2. React 更强调先描述“数据对应的界面”在 React 里你会越来越习惯这种思考方式如果当前数量是 3那么界面应该显示什么例如function Counter() { const count 3; // 这里先观察“数据进入界面”的方式真正的状态更新后面章节再学 return button当前数量{count}/button; }这段代码当前阶段最重要的不是细节而是方向组件更像是在描述当前数据下界面长什么样。以后当你学到状态更新时会进一步发现当数据变化时React 会帮助你把新的界面结果更新出来。3. 这两种思路最大的差别是什么可以先这样理解原生 DOM 更像是我去一步一步改页面。React 更像是我先描述页面应该是什么样再让渲染跟着数据走。当前阶段你不用急着把这个差别一次性吃透。你只要先建立一句话就够了React 特别重视“数据变界面跟着变”。后面学state、条件渲染、列表渲染时这句话会越来越有感觉。八、React 和传统 HTML/CSS/JS 页面开发方式的区别这一节建议你反复看。因为很多人学 React 卡住不是因为不会写语法而是因为还在用旧的页面思维理解新工具。下面这张对比表可以先帮你建立一个整体印象。对比维度传统页面开发思路React 思路页面组织方式常按 HTML、CSS、JS 分散组织更常围绕组件组织界面更新方式手动查找 DOM 并逐步修改根据数据重新描述界面重复内容处理复制粘贴再改内容组件复用主要关注点“我要怎么改这个节点”“当前数据下界面应该长什么样”协作和维护功能一多容易牵一发动全身组件边界更清楚这里要特别提醒你React 并不是否定传统开发方式而是在复杂项目里提供了更适合的组织手段。也就是说没有前面的原生基础你很难真正理解 React。学了 React也不是说原生开发就没价值了。React 是建立在前面基础之上的不是替代关系而是升级组织方式。九、为什么 React 会流行很多人第一次接触 React 时都会问为什么偏偏是 React 这么流行原因并不是“它神奇到能解决所有问题”而是它在很多真实场景里确实很好用。1. 它抓住了现代前端最核心的问题现代前端页面和很多年前的静态网页已经很不一样了。现在的页面往往有更复杂的交互更频繁的数据变化更高的复用需求更大的项目规模React 的组件化和数据驱动思路刚好很适合应对这些问题。2. 它的学习主线相对清晰对初学者来说React 有一个很强的优点核心主线比较集中。你会反复围绕这些问题学习组件怎么拆数据怎么传状态怎么管理界面怎么跟数据联动一旦这个主线建立起来后面的很多内容就会逐渐串起来。3. 它的生态非常成熟React 本身主要关注界面层。但围绕 React已经发展出非常成熟的工具和生态例如项目脚手架路由方案状态管理方案UI 组件库调试工具TypeScript 配套支持这意味着你学习 React不只是学一个库而是在接触一整套现代前端开发生态。4. 它在真实项目和招聘市场里应用广这也是很现实的一点。React 在大量真实项目中被广泛使用因此学习资料多社区讨论多组件库多实战机会多对于自学者来说这会明显降低学习门槛。5. 它和 TypeScript 的配合也很好你刚学完 TypeScript这时候进入 React其实是一个很顺的衔接点。因为 React 里的很多核心概念本身就很适合和类型系统结合组件接收什么数据事件函数长什么样列表项结构是什么页面状态是什么样所以你会慢慢发现TypeScript 让 React 项目在结构和协作上更清楚而 React 让 TypeScript 的价值在界面开发里更容易体现出来。十、先澄清几个关于 React 的常见误解初学阶段如果一些误解不先澄清后面会越学越乱。1. React 不是“把 HTML、CSS、JS 全换掉”不是的。React 只是让你用 JavaScript 组织界面用组件组织页面用更清楚的方式处理数据和界面更新你依然需要理解 HTML 结构理解 CSS 样式理解 JavaScript 逻辑2. React 不是“一学就能自动写复杂项目”React 只是工具不是魔法。如果你的页面拆分能力、数据建模能力、交互分析能力还不稳定那么即使用了 React项目也可能依然混乱。所以学 React 的重点不是只记 API而是建立组件职责意识和数据流思维。3. React 流行不代表它适合所有场景不是所有页面都必须上 React。如果只是一个非常简单的静态页面直接用原生 HTML/CSS/JS 可能更轻。你要慢慢建立的不是“React 万能”而是React 特别适合需要复杂交互、组件复用和长期维护的界面项目。4. 学 React 最怕的不是不会写而是思维没切过来很多初学者卡住并不是卡在某个 API 上。真正卡住的常常是还在执着于“怎么手动改某个 DOM”没开始从“组件”和“数据”角度想问题只要这个思路慢慢切过来后面学习会顺很多。十一、进入 React 阶段前最值得先建立的学习顺序这一章最后给你一个非常实用的学习顺序。后面几章我们基本也会沿着这个顺序往下走。1. 第一步先看懂“组件长什么样”你先不要急着追所有 API。先建立最基础的认知一个组件通常是一个函数组件会返回一段界面描述页面通常由多个组件组合而成2. 第二步理解 JSX 是什么下一章你就会看到React 里经常会写出看起来像 HTML 的内容。那就是 JSX。你要先建立的不是“死背语法”而是JSX 是用来描述界面的。3. 第三步理解组件如何接收数据也就是后面会学到的props。你可以先把它理解成给组件传参数。这一步会帮你真正理解什么叫组件复用。4. 第四步理解状态如何驱动界面变化也就是后面会学到的state。这一步非常关键因为它直接关系到点击后界面怎么更新输入框内容怎么同步列表数据变化怎么重新渲染5. 第五步再学列表、条件、事件和副作用当你理解了组件、数据传递和状态更新后后面的很多 React 语法就会更容易串起来。也就是说学 React 最稳的方式不是一开始就追求“会很多 API”而是先把组件和数据这条主线抓牢。十二、本章实践练习这一章的练习重点不是让你立刻写一个很复杂的 React 项目而是先建立 React 思维。1. 练习 1创建并运行第一个 React 项目如果你的电脑已经装好了 Node.js 和pnpm可以先用 Vite 创建一个 React 项目pnpmcreate vite react-start--templatereactcdreact-startpnpminstallpnpmdev完成后请你观察三件事项目跑起来后页面是怎么显示的项目里有哪些文件App这个组件在项目里扮演什么角色这一步不用急着全部看懂先跑起来、先看到整体结构就很好。2. 练习 2把一个旧页面拆成组件草图请你从前面已经做过的练习里任选一个页面例如个人主页页面待办事项页面学生管理小工具页面然后不要写代码先只做一件事画出这个页面的组件拆分草图。例如你可以写成App ├── Header ├── TodoForm ├── TodoList │ ├── TodoItem │ ├── TodoItem │ └── TodoItem └── Footer这个练习的重点是从“整页思维”切换到“组件思维”。3. 练习 3比较“原生 DOM 操作”和“组件渲染”的区别请你用自己的话回答下面三个问题原生 DOM 写法里界面更新通常是怎么做的React 更强调什么样的界面更新思路当页面越来越复杂时你觉得哪种方式更容易维护为什么这个练习非常重要。因为只要你能把这三个问题说清楚React 的核心价值就已经抓住一大半了。4. 练习 4用一句话总结 React 的价值请你试着不用教材原话而是用自己的话写一句总结。例如你可以从这些角度组织React 帮我更好地组织界面React 帮我复用页面结构React 让我更容易把数据和界面对应起来你不需要追求标准答案。只要你能把自己的理解写出来就说明你已经开始真正消化这一章了。十三、学习重点提示这一章请你重点记住下面这些话React 更准确地说是一个用于构建用户界面的 JavaScript 库。React 不是替代 HTML、CSS、JavaScript而是组织它们的一种方式。React 之所以重要不是因为它“更高级”而是因为它更适合组织复杂界面。组件化的核心不是把页面随便切碎而是围绕职责拆分页面。React 很重要的一层思维是数据变界面跟着变。React 和原生开发不是对立关系而是建立在原生基础之上的升级组织方式。React 流行不代表它适合所有场景但它确实非常适合现代前端项目中的大量典型问题。学 React 时先建立组件思维和数据思维再追具体 API学习会稳很多。如果你只记一句话请记住React 最核心的价值不是多学一个新语法而是学会用组件和数据去组织界面。十四、本章小结这一章我们还没有正式展开很多 React 语法但已经先把最关键的认知地基打下来了。你已经理解了React 是一个用于构建用户界面的 JavaScript 库它并不是替代基础三件套而是组织它们的一种方式React 主要在解决复杂界面难组织、重复界面难复用、数据和界面更新容易脱节等问题组件化是 React 最核心的组织方式之一数据驱动界面是 React 非常重要的思维方式React 流行是因为它在现代前端项目里确实解决了很多真实问题更重要的是你开始把学习重点从“我要背哪些 API”转向“React 到底在帮我用什么方式组织界面”这个转变非常重要。因为一旦这个思路立住了后面的 JSX、组件、props、state、事件、列表渲染这些内容就都会开始变得有逻辑、有方向。十五、课后思考题请你认真思考下面这些问题为什么说进入 React 阶段不是因为前面的 HTML、CSS、JavaScript 不重要了React 最主要是在解决哪些前端开发中的真实问题为什么“组件化”不是简单地把页面切成很多碎块“手动修改 DOM”和“数据驱动界面”这两种思路核心区别是什么为什么 React 在复杂项目里通常比纯手动维护 DOM 更容易扩展React 流行的原因更多来自语法新鲜感还是来自它对真实项目问题的解决能力建议你把这些问题写成自己的理解而不是只在脑子里想一遍。能说清楚这些问题说明你已经真正跨进 React 阶段的大门了。十六、下一篇预告下一章我们会正式进入从零开始学前端 | 第二十七章JSX 与组件基础你会开始真正接触 React 代码中最常见的几个基础概念JSX 到底是什么为什么它看起来像 HTML函数组件最基础的写法页面为什么可以拆成多个组件也就是说下一章开始我们会从“理解 React 为什么重要”进一步走到真正开始写 React 的基础代码。
