如何在2023年学习React

在2023年学习React并不是一件容易的事情。自2019年React Hooks发布以来，我们已经拥有了很多稳定性，但现在形势正在再次变化。而这次变化可能比使用React Hooks时更加不稳定。在本文中，我想比较两种学习React的方式：以库的方式和以框架的方式。

为了让事情更加清晰：React发布了新的文档，并建议将React用于完全集成的框架中。文档主张使用一个（元）框架（例如Next.js），而不是将React作为库（或框架）在像Vite或Parcel这样的打包工具中使用。我对此的看法是，在框架最终成为默认选项之前，仍然建议使用其他React启动工具，而不仅仅是完全集成的React框架，以使转变更加容易。

技术是个圈

谁不知道这个技术短语是来自嘲笑即将到来的不可避免变化的高级开发？没错，我们创造，学习，适应。一直以来都是这样，这是反馈循环的本质。

开发者也对Web开发的当前状态发表了类似的看法：在大约2000年到2010年，我们在PHP、Java、C#中，将Web应用程序实现为服务器端应用程序（SSR - 服务端渲染/服务端路由），接着是Ruby on Rails。他们将越来越多的JavaScript（例如jQuery、MooTools、Dojo）混合在一起，以改善客户端的用户体验。

在2010年，形势转向了以客户端为主的应用程序（CSR - 客户端渲染/客户端路由），这是在单页应用程序（SPA）这个总称下的完整JavaScript解决方案。

第一代：Backbone，Knockout，Ember，Angular
第二代：React，Vue
二点五代：Svelte
第三代：Solid，Qwik

如今，许多人将SPA称为Web开发历史上的错误。

然而，SPA有其存在的意义，而且SPA成为JavaScript（以及后来的TypeScript）作为Web应用框架起飞的条件，并得出将JavaScript/TypeScript用于SSR的结论，因为底层技术的缺失（例如缺少HTTP流）使我们以前（到目前为止）无法实现它。

服务端的React

总之，这种作为SPA的web应用程序的状态大约持续了10年…

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

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

JavaScript（更好的说法是TypeScript）是SSR Web应用程序的一等公民。

它将是下一个十年我们实现Web应用程序的方式...

...在人工智能接管之前（开个玩笑）。

扯远了，我们来谈谈React以及如何在这些动荡的水域中学习它。

学习作为库的React

从发布以来，React已经作为一个库使用了将近十年。React开发人员一直在使用React与丰富的生态系统中的许多其他互补库一起使用。React Router就是其中一个受欢迎的库，因为它为React在SPA世界中启用了客户端路由。

大部分React的学习材料都将其作为一个库来教授。新的React文档这样做，最流行的React书籍《The Road to React》也是如此，还有许多其他在线教程、视频和课程。

学习React作为一个库时，你不会被框架分心。你可以完全专注于学习React的基础知识：元素 vs 组件，React Hooks，自定义Hooks，函数组件，事件处理器，表单，Refs，条件渲染，Props，然后再集成诸如React 测试库或样式组件（或任何其他React样式解决方案）等互补的第三方库。

通常你会使用类似Vite的打包工具来学习React。当打包工具在背后消失时，你将学习如何使用React创建客户端路由/渲染的SPA。

如今，许多React初学者对学习React作为一个库感到不确定，因为当前的说法告诉我们应该学习框架。虽然我同意未来的趋势是完全集成的框架，但是专注于学习React的基础知识并不会使你学到错误的东西。

初学者也不会错过SSR，因为仍然有许多应用程序在没有框架的情况下运行。尽管SSR将在未来成为主流，但现在还没有到达那一步，你将很幸运地掌握如何使用远程REST / GraphQL / tRPC API，来创建客户端应用程序的历史知识。这将是你技术栈中的一项基本技能（特别是与API一起工作）。

学习作为框架的React

未来，React将作为一个提供框架所需基本构建块的库而展现。虽然开发人员过去一直能够自己使用React的功能，但随着React作为一个框架走向未来，这种情况将不再存在。

例如，React服务端组件会与路由和数据获取密切集成。虽然框架将根据React本身提供的明确定义的规范实现这个架构构建块，但日常的React开发人员只会将它们作为框架提供的功能来使用，因为他们不需要自己根据规范来实现它们。

这样做有充分的理由，因为我们希望框架处理细节，而React开发人员可以专注于实现其业务逻辑。

在学习React作为框架时，最好的选择是学习Next.js。它具有基于文件的路由，许多渲染技术（CSR、SSG、ISR、SSR），其中SSR是一等公民，内置图像、SEO和字体支持。它也尽可能接近于在框架中使用React，因为它与React在诸如React服务端组件等功能上密切合作。此外，许多React核心开发人员现在正在为Vercel工作，Vercel是Next.js背后的公司。

建议

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

在学习React作为框架的同时，不要忽略它作为库的基础知识。例如，你可以从框架开始学习React。最有可能的是，你会首先使用像Next这样的框架实现页面之间的路由转换。这个特性完全由框架提供，而不是React本身。但是，一旦你接触到React的基础知识，比如Hooks，回到React作为库的基础知识总是一个好的动力。

2023年学习React的一种方法：在实现一个你感兴趣的领域的应用程序（例如体育、动漫、游戏、电子商务、生产力、音乐）时，同时使用React和Next的文档。

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

如果你想通过补充学习资源来学习React的基础知识，请查看课程、视频或书籍。这些资源可能会为React作为库及其基础知识提供不同的视角。

以上就是本文的全部内容，如果对你有所帮助，欢迎点赞、收藏、转发~