Skip to content
This page has been auto-translated and may contain errors.View in English

超越基础知识

这份手册已经涵盖了基础知识:项目配置、组件、JSX、样式、props、state、事件、表单、effects,以及将它们联系在一起的hooks,还有用 React 的思维方式将设计转化为可用应用的过程,以及保持应用无障碍访问的工作。这是这个库的核心,足以构建真实、可用的界面。有一些问题超出了这个核心范围,但几乎每个生产环境的 React 应用迟早都会用到其中的某些组合。这一章就是这份地图:每个部分用来做什么、它在哪里,以及去哪里学习它。

路由

单页面应用在浏览器中渲染所有内容,只是交换屏幕上显示的部分,而不是每次都向服务器请求新页面。这就是它感觉快速的部分原因,但这也意味着浏览器常见的导航操作——输入 URL、点击返回、书签标记页面——如果没有东西来实现它们就无法工作。路由 就是这个部分:它把 URL 映射到应该显示的视图,在用户移动时保持地址栏同步,让返回按钮正常工作,所有这些都不需要完整的页面重新加载。React Router 是大多数 React 应用用来处理这个问题的库。

元框架

React 本身只负责渲染界面。它不提供关于路由的建议、如何在页面出现前加载数据,或如何在服务器上渲染页面后再发送到浏览器——这三样东西几乎每个生产应用都需要。元框架 是建立在 React 之上的框架,提供这些缺失的部分,Next.js 是 React 世界中大多数人选择的。这就是为什么大多数生产环境的 React 应用不是单独的 React:它们是在 Next.js 或类似框架内运行的 React。框架的种类 更深入地涵盖了元框架,包括 Next.js 与 React 的关系。

工具链

这部分已经有自己的章节了。设置 React 项目 说明了为什么这份手册中使用的 JSX 本身不是有效的 JavaScript,以及 Vite 如何运行开发服务器、即时编译 JSX,以及在发布时将所有内容打包成优化后的文件。它出现在这份地图上是因为它在其他所有项目的下面:路由、元框架和部署步骤都依赖于一个构建工具已经在做这项工作。当你想再次了解机制时,回到设置章节。

部署

应用构建完成后,它需要一个家。运行构建命令,对于 Vite 项目来说是 vite build,会生成一个包含纯 HTML、CSS 和 JavaScript 文件的文件夹:应用的静态输出。把这个文件夹发送到托管服务,比如 Netlify、Vercel 或 Cloudflare Pages,就能把应用放到互联网上供其他人使用。

这把你留在了哪里

这就是地图:用路由在视图之间移动,用 Next.js 这样的元框架处理 React 遗留下来的部分,用设置章节中的 Vite 构建将代码变成浏览器可以加载的文件,用主机把结果放到网上。这些都不需要今天学。选择和学习框架 是个指南,帮助你决定是否以及何时添加像 Next.js 这样的部分,以及在需要时如何权衡选项。快速通过所有这些的最快方法是你目前为止采取的同样方法:构建一个小的真实项目。选择值得做的东西,依靠这份手册中的基础知识,只在项目真正需要的时候才引入上面的部分。

Juno你已经拥有所需的一切 这一章中的所有内容今天都是可选的,没有任何东西会削弱你在这里构建的内容。组件、state 和事件足以用于真实、可用的 React。Vite 已经从设置章节掌握在你手中,当项目实际需要时,路由、Next.js 和部署是你会自然习得的部分。接下来去构建一个小项目。你已经准备好了。
Juno你已经拥有所需的一切 把这个列表保存到以后:用这份手册中的内容构建一个小项目,当应用需要多个视图时使用 React Router,当路由、数据加载和服务器端渲染开始堆积得比你想手动处理的还多时,引入 Next.js。从设置章节开始,Vite 部分就在你身后了,而一个部署主机是构建输出之上的一个小决定。
Juno你已经拥有所需的一切 值得延续的模式:React 给你提供渲染模型,就到此为止。这一章中提到的所有内容都是生态系统填补剩余部分,一个路由器用于导航,一个元框架用于数据加载和服务器端渲染,一个打包工具用于把 JSX 变成浏览器运行的东西,一个主机用于静态输出。根据你实际面临的问题来评估每一个,而不是从一开始就采用整个技术栈。