为什么专业人士用 React · 跟马丁学编程

你会想起第 1 级的痛苦——并理解组件为什么被发明出来。只读课。

还记得复制菜单吗？

第 1 级里，每个页面都有带菜单的页眉。每加一个新页面，就得复制菜单——每次改动还要到处改。三页就烦，三十页是噩梦。这种痛苦正是我们故事的开始。

组件：写一次，到处用

专业人士想：如果菜单是 一段代码，只是”插入”每个页面呢？改一处——到处都变。这样的块叫组件。

不只是菜单。用积木的眼光看你的网站：

球员卡片（你有 4 张——只有名字和位置不同），
画廊里的照片（10 张——只有图片不同），
按钮（到处都是——只有文字不同）。

专业人士的网站不是一堆 HTML 文件。是 乐高盒子：几块自定义块（组件）拼成整个应用。

React 是什么

React 是 JavaScript 的工具（库），负责这种组装。Facebook 发明的，免费，互联网很大一部分靠它：Facebook、Instagram、Netflix、Airbnb…… React 里的组件长这样——别担心，现在只是看看：

function PlayerCard({ name, position, jerseyNumber }) {
  return (
    <div className="card">
      <h3>{name} · #{jerseyNumber}</h3>
      <p>{position}</p>
    </div>
  );
}

像自定义 HTML 标签一样用：

<PlayerCard name="Jake" position="goalkeeper" jerseyNumber={1} />
<PlayerCard name="Alex" position="midfield" jerseyNumber={8} />

认出来了吗？是函数（第 2 级学过）返回 HTML。卡片写一次，用不同数据——像可换字母的橡皮章。

超能力之二：React 负责重绘

第 2 级你写：“找元素、改文字、加 class……” 大应用里手动 rearranging 太多会迷路。React 反过来：

你描述 给定数据下页面应该长什么样。数据变时，React 自己算出该重绘什么。

比分从 0 变 1？不用找元素——只改数字，React 重绘需要的部分。状态课里你会看到。

这一级接下来

安装专业工具：终端和 Node.js（下一课）。
用 Vite 搭建第一个 React 应用。
学组件、props 和 state。
用 React 重建第 1 级网站。
建自己的 Node.js 服务器 并连接 留言板。

💡

今天这课不必全懂。 只记一句：React = 组件（乐高块）+ 自动重绘。其余在后面的课里动手学。

这堂课你要记住

把相同代码复制到多处是陷阱——第 1 级你自己就发现了。
组件是返回页面一块的函数。写一次，用不同数据多次使用。
React 替你重绘页面：你改数据，它改屏幕。