超越基础知识
这本手册已经涵盖了基础知识:项目设置、组件、JSX、样式、Props、状态、事件、表单、副作用,以及将它们联系在一起的 Hook,还有用 React 的思维方式把设计转化为可工作的应用,以及保持应用 可访问性 的工作。这是这个库的核心,足以构建真实、可工作的界面。还有一些关键点在这个核心之外,而几乎所有生产环境的 React 应用迟早都会用到其中的某些组合。这章就是地图:每一项的用途、它的位置,以及在哪里学习它。
可复用的组件模式
一旦你写过几个组件,问题就从"怎样构建一个"转变成"怎样构建一个能在第二次使用时继续工作的组件"。React 的答案是组合:组件包装内容,而不是为每种可能的变化都接收一个名字的 prop。Children 和组合 就从这里开始,复合组件 将一个组件分裂成调用方以标记方式排列的多个合作部分,render props 和无头组件 把组件的内部状态交还给渲染它的人,而 实际应用中的自定义 Hook 完全将有状态的逻辑从组件中提取出来,这样任何组件都可以共享它。它们合在一起,让组件库在覆盖广泛用途的同时保持精小。
路由
路由 将 URL 映射到应该显示的视图,在用户四处移动时保持地址栏同步,并保持后退按钮的工作,这一切都不需要重新加载页面。React Router 是大多数 React 应用选择的库,路由 全面涵盖了它,包括嵌套布局、URL 参数和受保护的路由。
共享状态
应用的多个不同部分读取的状态是另一件会超出仅用 props 处理能力的事情。React 自身的答案是 Context,它把值传递给 provider 下面的任何组件,而不必经过中间的各层。过了一定规模后,应用会转向使用专门的状态管理库:Redux Toolkit 和 Zustand 是你最常遇到的两个。它们为组织更新、调试它们、以及在写入者数量增长时保持可预测性提供了工具。Context 足以处理主题、已登录用户或菜单的打开状态,所以先从这里开始,让一个状态管理库只在必要时出场。
渲染模型
当状态改变时,React 重新运行一个组件函数,然后根据该函数返回的内容确定在 DOM 中要改变什么。了解它经历的步骤能解释为什么组件会在某个时刻运行,为什么大多数重新渲染的代价小到可以忽视,以及当应用感觉迟缓时缓慢实际来自哪里。React 如何渲染 走过这些步骤,以及使它们可见的工具,StrictMode 和 React Profiler。
性能
性能工作建立在渲染模型之上,因为它的大部分内容就是减少渲染代价的工作。记忆化 涵盖 useMemo、memo 和 useCallback,这三个工具用于在渲染之间记住一个结果,以及决定它们是否有帮助的引用相等性规则。代码分割 处理另一半,浏览器下载的包在任何东西出现之前的大小,通过用 lazy 和 Suspense 按需加载应用的部分。两者都会增加复杂性,所以只在测量了值得修复的问题后再采用它们。
元框架
React 本身只负责渲染界面。它不提供关于路由的观点、如何在页面出现前加载数据、或如何在服务器上渲染页面然后发送到浏览器,这三件事几乎每个生产应用都需要。元框架 是建立在 React 之上的框架,为那些缺失的部分提供支持,而 Next.js 是大多数 React 世界采用的框架。这就是为什么大多数生产 React 应用不是 React 本身:它们是在 Next.js 或类似框架内运行的 React。框架的种类 更深入地涵盖了元框架,包括 Next.js 与 React 的关系。
工具
这部分已经有了自己的章节。设置 React 项目 解释了为什么本手册中使用的 JSX 本身不是有效的 JavaScript,以及 Vite 如何运行开发服务器、动态编译 JSX 并在要发布时将所有内容打包成优化的文件。它之所以在这张地图上,是因为它位于这里其他所有事项的下面:路由器、元框架和部署步骤都假设一个构建工具已经在做这个工作了。当你想再次了解机制时,回到设置章节。
TypeScript
大多数 React 工作和现存的代码库都使用 TypeScript,它在 JavaScript 上加上了类型,这样编辑器和构建工具可以在应用运行前捕捉到拼写错误的 prop 或可能缺失的值。React 无论哪种方式都工作得一样;改变的是组件、props 和状态会附带类型注解。React 中的 TypeScript 涵盖了 React 特定的部分,一旦你对这里的基础感到舒适的话。
部署
一旦应用构建完成,它需要一个归宿。运行构建命令,对 Vite 项目来说是 vite build,会产生一个包含纯 HTML、CSS 和 JavaScript 文件的文件夹:应用的静态输出。把那个文件夹发布到一个宿主,比如 Netlify、Vercel 或 Cloudflare Pages,就是把应用放到互联网上供其他人使用。
这把你带到哪里
那就是地图:被使用超过一次的组件的组合模式、在视图之间移动的路由、跨越状态的 context 或状态管理库、基于它的渲染模型和性能工作、像 Next.js 这样的元框架来处理 React 漏掉的东西、大多数团队工作时用的安全网 TypeScript、来自设置章节的 Vite 构建将代码变成浏览器可以加载的文件、以及一个宿主把结果放到网上。都不需要今天就学。选择和学习框架 是决定是否以及何时添加像 Next.js 这样的部分的指南,以及当那个时刻到来时如何权衡选项。最快通过所有这些的方式和让你走到这一步的方式一样:构建一个小的真实项目。选择值得做的东西,依靠这本手册的基础,只在项目真正需要的时候才引入上面的部分。接下来的章节深入讨论其中几个:基于 children 和 context 构建的可复用组件模式、端到端的 React Router、React 如何渲染以及基于它的性能工作,最后还有认证和 TypeScript。
Vite 已经从设置章节在你手中了,而路由、Next.js 和部署是一旦项目真正需要它们,你就会自然地学到的部分。
接下来去构建一些小东西吧。你已经准备好了。
接下来:Children 和组合,可复用组件从让调用方在其中放入内容开始。

