【译】探索2023年的React学习之路：库与框架的选择

原文 How to learn React as a Library or Framework 发布于2023年04月04日

在2023年学习React并不是一件容易的事情。虽然自2019年React Hooks发布以来，我们在稳定性方面取得了很多进展，但现在形势正在再次转变。而且这次转变可能是一个比使用 React Hooks 时更加不稳定。在本文中，我想从两个角度比较一下如何在2023年学习React：库的方式和框架的方式。

把事情放在上下文中：新的 React 文档 已经发布，并且建议将 React 用于完全集成的框架中。文档提倡使用框架（例如 Next.js），而不是将 React 作为库（或框架 - 无论你如何称呼它）在像 Vite 或 Parcel 这样的打包工具中来使用。我对此的看法是，在框架最终成为实际默认选项之前，除了完全集成的React框架之外，仍然推荐使用其他的React启动器，从而稍微减轻这种转变的压力。

"WE HAVE COME FULL CIRCLE ..."

谁不知道这个技术短语是来自嘲笑即将到来的不可避免变化的高级开发者？是的，我们创造、学习、适应。这就是它一直以来的样子--这是反馈循环的本质。 开发人员对Web开发的现状也有同样的看法：我们已经在2000 - 2010年间将Web应用实现为服务端应用（SSR -服务端渲染/服务端路由），使用PHP、Java、C#以及后来的Ruby on Rails。它们都在混合越来越多的 JavaScript（例如 jQuery、MooTools、Dojo）来改善客户端的用户体验。 在2010年，潮流转向了以客户端为主的应用（CSR - 客户端渲染/客户端路由），这是在单页面应用（SPAs）这个总称下作为完整的 JavaScript 解决方案出现。

• 第一代：Backbone、Knockout、Ember、Angular
• 第二代：React、Vue
• 中间代：Svelte
• 第三代：Solid、Qwik

如今，许多人称SPA是Web开发历史上的一个错误。

然而，单页面应用（SPAs）有其存在的理由，它们不得不成为 JavaScript（后来是 TypeScript）作为 web 应用框架的起点，并且得出将 JavaScript/TypeScript 用于服务端渲染（SSR）的结论，因为底层技术（例如缺失的 HTTP 流式传输）此前（迄今为止）阻止了我们实现它。

服务端上的React

总之，这种状态的Web应用作为SPA统治了大约10年...

继续阅读： Web应用的历史

圆圈现在闭合了，因为我们正在回归到使用 React 和许多其他框架的 SSR；它们中的每一个（Vue、Svelte、Solid、Qwik、Angular）都相互影响。

虽然许多非原生JavaScript开发人员嘲笑这种转变“只是回到了过去”（参见2000 - 2010年）或“JavaScript正在模仿PHP”，但他们错过了所有的改进（例如：部分/选择性水合的性能、作为架构模式的服务器端组件、可恢复性）。

作为 SSR web 应用的一流公民，这是 JavaScript（更好的是 TypeScript）的角色。 这将是我们实现 web 应用的下一个十年...

... 在 AI 接管之前（半开玩笑）。

但关于为什么这将成为 web 开发的不可避免的下一个阶段，废话就说多了。让我们谈谈 React，以及如何在这些动荡的水域中学习它。

将React视为库来学习

从发布之初，React 就已经作为一个库使用了近十年时间。React 开发人员一直在使用来自丰富的生态系统中的许多其他辅助库与 React 配合使用。React Router 就是其中一个流行的库，因为它在 SPAs 的世界中为 React 提供了客户端路由。

关于 React 的大多数学习材料都将其作为一个库来教授。新的 React 文档这样做，阅读最多的React书籍《The Road to React》（目前仍然如此）这样做，以及许多其他在线教程、视频和课程也是这样。

当涉及到将 React 视为一个库来学习时，你将不会受到框架的干扰。您可以完全专注于学习React的基础知识：Elements vs Components，React Hooks，Custom Hooks，Function Components，Event Handlers，Forms，Refs，Conditional Rendering，Props，然后集成如React Testing Library或Stylled Components（或任何其他React样式解决方案）等其他第三方库。

通常你会使用像 Vite 这样的打包工具来学习 React。虽然打包工具在后台消失了，但你将学习如何使用 React 创建一个具有客户端路由/渲染的 SPA。

然而，这些天很多初学者对于将 React 视为一个库来学习感到不确定，因为当前的说法告诉我们应该学习有关框架。尽管我同意前进的方向将是完全集成的框架，但当你首先专注于学习 React 的基础知识时，并没有学错任何东西。

初学者也不会错过SSR，因为也会有大量的应用在没有框架的情况下运行。总有一天SSR会接管，但它还没有出现，你将有幸拥有如何创建使用远程REST/GraphQL/tRPCAPI的客户端应用程序的历史知识。这将是您技术栈中的一项基本技能（尤其是使用API）。

将React视为框架来学习

未来，React 将作为一个库深度融入到框架中，为框架提供必要的构建块。虽然开发人员过去一直能够自己使用 React 的功能，但在前进的过程中，React 作为一个框架的未来将不会保持这种方式。

例如，RSC在路由和数据获取方面进行了深度整合。虽然框架将根据 React 自身提供的明确定义的规范来实现这个架构构建块，但日常的 React 开发人员将只将它们作为框架提供的功能来使用，因为他们不需要根据规范自己来实现它们。

这是一个很好的理由，因为我们希望框架处理细节，而React开发人员可以专注于实现他们的业务逻辑的实际领域。

当学习React作为框架时，最好是学习Next.js。它带有基于文件的路由，许多渲染技术（CSR，SSG，ISR，SSR），SSR作为一等公民，内置图像、SEO和字体支持。它也非常接近在框架中使用React，因为它与React在RSC等功能上进行了大量合作。此外，许多React核心开发人员现在都在为Next.js背后的Vercel公司工作。

最后

学习React作为一个库或框架并不一定是一个排他性的决定。以下是我对React初学者的建议：

在不忽略其作为库的基础的情况下，将 React 视为一个框架来学习。例如，你可以从一个框架（比如 Next.js）开始入手。很可能你首先会使用一个类似 Next 的框架实现页面之间的路由过渡。这个功能完全由框架提供，而不是 React 本身。然而，一旦你涉及到 React 基础知识，回到 React 作为一个库的基础知识上总是一个很好的动机。

在2023年学习React的一种方法：将React的文档放在Next的文档旁边，用于实现您感兴趣的领域（例如体育，动漫，游戏，电子商务，生产力，音乐）的应用。

你将从 Next 的文档开始。但每当你涉及到 React 的基础知识时，回到 React 的文档。关注两个实体（框架和库）的交汇处以及它们为你提供的工具。

如果你想通过辅助学习资源来学习 React 的基础知识，可以查阅课程、视频或书籍（例如：React之路）。这些可能会提供一个不同的角度来看待React作为一个库及其基本原理。