React 入门

Juno

欢迎来到 React 手册！我是 Juno，很高兴你来了。React 是一个用来构建用户界面的工具，先要说清楚一点：React 从头到尾都是 JavaScript。如果你的 JavaScript 基础还不太稳，这很正常,先把那部分打牢也值得。

我们会一步一步来：这里讲一小块页面，那里讲一点数据,慢慢地你就会看出它们是怎么拼在一起的。这里没有什么问题是"太基础不值得问"的。

如果你还没学过JavaScript 手册，先去那边看看再回来。等你把那部分弄明白，React 会一下子清楚很多。

Juno

欢迎来到 React 手册。我是 Ace，我喜欢讲得实用一点。React 的核心，是围绕组件来组织用户界面：一个个小巧、独立的部分，你写一次就能到处复用,每个组件都管着自己那一份数据。

我们全程都会动手做：先讲清楚一个概念，然后用它搭一个组件，接上一些 state，看它对点击作出反应。React 是一个要靠动手用才能学会的库，所以我们就这么学。

Juno

欢迎来到 React 手册。我是 Sol，我会带你过一遍它的思维模型,还有那些容易踩坑的地方。核心就这一句：你描述在给定的一份数据下，界面应该长成什么样,当数据变化时，React 会重新渲染。把这个模型理解对了，React 的大部分内容就都顺理成章了。

有一部分功夫在于判断什么时候用 React 才值得。当界面需要管理真正的 state 时，它能帮你省下不少事;但它也会带来一些你未必总是需要的复杂度。接下来你会接触到渲染模型、hook 的规则,以及这层抽象会露出破绽的地方。仔细读，也大胆质疑,包括我说的这些。

一旦页面开始需要交互，问题就来了。用原生 JavaScript 时，你得伸手进页面里，找到你要的元素,每次数据变化都手动更新它,自己去让屏幕和数据保持同步。一两个按钮还好办。页面一大，这套做法很快就变得脆弱，因为每一份 state 都有自己那套要手动维护的更新逻辑。React 把这个流程倒过来：你描述当前数据下界面应该长什么样，数据变化时的更新交给 React 来处理。

React 是一个用来构建用户界面的 JavaScript 库，它的构建单元是组件，你把这些小块拼装成完整的页面。

什么是组件？

组件就是一个返回一段界面内容的函数。更大的页面，是由许多这样的组件组合搭建出来的。组件这一章会讲怎么写组件、怎么把它们组合起来。

如果你学过 JavaScript 手册，你其实已经手动做过这件事的"困难版本"了。DOM 那一章教你怎么读取和修改页面上的元素,事件那一章教你怎么让页面对点击或按键作出响应。React 正是建立在这些概念之上的。随着应用变大，它给你提供了一种更简洁的表达方式。

有一点要说得明确一点：React 从头到尾都是 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 在做什么，通常都能帮上忙,因为它本来就只是 JavaScript。

JunoReact 终究还是 JavaScript 一路往下学的时候，记住这一点：React 在你已经会写的 JavaScript 之上，加上了少数几个新概念——组件、JSX、props、state、hook。剩下的都是函数、数组、对象和事件在做它们平常做的事。

组件出问题的时候，先把它当成普通的 JavaScript 来读，往往比直接去找"React 专属"的答案更快能解决问题。

JunoReact 终究还是 JavaScript 这层抽象刻意做得很薄。一个组件本质上是关于它的 props 和 state 的一个函数，返回的是界面的一份描述；React 的工作，是高效地把这份描述对应到 DOM 上。

几乎所有的坑——过期的闭包、多余的重新渲染、effect 在你没预料到的时候触发——都源于忘了这个函数在每次渲染时都会重新执行一次。把 JavaScript 的执行模型放在心里，React 的行为就不会再让你觉得意外。

认识你的向导

这本手册由三位向导主持，你可以自己选一位来带你逛。内容对每个人都是一样的；不同的向导，讲述的语气不同，在可以自适应深浅的页面上，每个部分讲多深也会有所不同。

你可以随时在任意页面顶部的选择器里切换向导，或者点开右下角的偏好设置来更改向导、语言或字号。

准备好之后，手册的正式内容就开始了。下一章什么是 React会讲 React 究竟是什么、它是为了解决什么问题而诞生的，以及它和你已经掌握的 JavaScript 是怎么配合的。

Take the React course on ScrimbaBuild six React projects in your browser, free, with Bob Ziroll.→