React 入门

Juno

欢迎来到 React 手册！我是 Juno，很高兴你在这里。React 是一个用来构建用户界面的工具，首先要明白的是 React 从头到尾都是 JavaScript。如果你对 JavaScript 还不太熟悉，这完全正常，值得先在那里打好基础。

我们会一次吸收一个小观点：这里是页面的一部分，那里是一点数据，慢慢地你就会看到它们如何拼合在一起。这里没有任何东西太基础而不能问。

如果你还没做过 JavaScript 手册，从那里开始，然后回到这里。React 会变得清晰得多。

Juno

欢迎来到 React 手册。我是 Ace，我喜欢讲求实际。React 就是围绕组件来组织用户界面：小的、自成一体的单元，你可以写一次然后重用，每个都拥有自己的一份数据。

我们始终保持实践导向：读一个想法，用它构建一个组件，接入一些 state，看它如何响应点击。React 是一个通过使用来学习的库，所以这就是我们学习它的方式。

Juno

欢迎来到 React 手册。我是 Sol，我会带你走过心智模型和棘手的边界情况。核心就是这样：你描述给定一组数据时 UI 应该是什么样子，当那数据改变时 React 重新渲染。把这个模型搞对，React 的大部分就随之而来了。

技能的一部分是知道什么时候 React 值得用。一旦 UI 有真正的 state 需要管理，它就给了你很多收益，但它也带来了你不总是需要的复杂性。做好准备去理解渲染模型、hook 规则，以及抽象漏出来的地方。仔细阅读并对所有东西提出质疑，包括我说的。

一旦页面变成交互式的，问题就出现了。在纯 JavaScript 中，你进入页面，找到想要的元素，每次数据改变时都手动更新它，自己保持屏幕和数据的同步。两三个按钮还行得通。随着页面增长，这变得很脆弱，因为每一块 state 都有自己的一套手动更新要记住。React 翻转了这个过程：你描述对于当前数据 UI 应该是什么样子，当那数据改变时 React 处理更新。

React 是一个用 组件 来构建用户界面的 JavaScript 库，你把这些单元组合成整个屏幕。

什么是组件？

组件是一个返回 UI 片段的函数。更大的屏幕通过组合许多组件来构建。组件 讲的就是如何写组件和把它们组合起来。

如果你做过 JavaScript 手册，你已经手工做过这个困难版本了。DOM 章节讲的是如何读取和改变页面上的元素，事件 章节讲的是如何让页面响应点击或按键。React 就是建立在这些想法之上的。随着你的应用增长，它给了你一个更清晰的方式来表达它们。

有一点要坚定：React 是 JavaScript，完全是 JavaScript。组件是函数，props 是参数，state 是变量，组件内部的逻辑就是你在其他任何地方写的同一种语言。没有捷径。如果你还没做过 JavaScript 手册，从那里开始，因为花在巩固基础上的时间在这里会直接得到回报。同样值得看的是 什么是框架，能从更大的图景上理解 React 这样的库坐在哪里、它为你做什么。

这就是范围，所以你知道这个手册涵盖什么。它从 React 是什么、它的来源，以及如何在你自己的机器上用 Vite 运行一个项目开始。从那里：构建和组合组件，用 JSX 写标记，给它们样式，用 props 传递数据，用 key 渲染列表，在 state 中保存变化的数据，响应事件，条件渲染，处理表单，在组件间共享 state，用 useEffect 运行副作用，从服务器获取数据，用 ref 访问 DOM，以及更广泛的 hook 集合。最后讲的是 React 思维、使界面可访问，以及接下来的地图。这是你在几乎每个 React 应用中使用的核心。把这些基础打扎实，其余的就容易得多了。

第二套章节从那些之外开始，等你想要的时候：用 children、context 和自定义 hook 构建的可重用组件模式；用 React Router 做路由，从嵌套布局到 URL 参数再到守卫路由；React 如何渲染以及这对性能意味着什么；以及身份验证和 TypeScript。它们遵循同样的三个导师和同样的级别切换器，它们与 Scrimba 的 Advanced React 课程配套的方式，就像这些章节与免费课程配套的方式一样。超越基础 就是把你交接给后面内容的地图。

JunoReact 仍然是 JavaScript 这是关于 React 的一个令人欣慰的事实：没有单独的 React 语言要学。组件是一个 JavaScript 函数，props 是它的参数，state 是你存储的一个值。

每当 React 感觉困惑时，通常会有帮助的是问问底层的纯 JavaScript 在做什么，因为这就是它的全部。

JunoReact 仍然是 JavaScript 当你继续时记住这一点：React 在你已经写的 JavaScript 之上添加了少量新想法，组件、JSX、props、state、hook。其余的就是函数、数组、对象和事件在做它们通常的工作。

当一个组件表现不正常时，把它当作普通 JavaScript 来读往往会比试图找一个 React 特定的答案更快地让你摆脱困境。

JunoReact 仍然是 JavaScript 这个抽象刻意很薄。组件就是一个关于其 props 和 state 的函数，它返回 UI 的一个描述；React 的工作是高效地把那个描述与 DOM 协调。

几乎所有陷阱，陈旧的闭包、不必要的重新渲染、effect 在你没想到的时候触发，都来自于忘记函数在每次渲染时都会再次运行。在你的脑子里握住 JavaScript 执行模型，React 的行为就不会再令人惊讶了。

认识你的导师

这个手册由三位导师承办，你选择哪一位带你参观。材料对所有人都是相同的；你的导师设置讲述它的声音，以及在有调整的页面上，每个部分会有多深。

可以随时从任何页面顶部的选择器切换导师，或打开右下角的偏好设置来改变你的导师、语言或字体大小。

一旦你准备好了，手册就开始认真起来了。下一章，什么是 React，讲的是 React 真正是什么、它被构建来解决的问题，以及它如何与你已知的 JavaScript 并列。

在 Scrimba 上学 React 课程在你的浏览器中免费构建六个 React 项目，由 Bob Ziroll 指导。→