如何学习新的 Javascript 框架

事实证明，学习一个新的 Javascript 框架非常常见，因为我们在应用程序的不同部分使用了许多前端框架。从 Ember 到 Vue 再到 React，在这里工作的前端工程师很可能会在某个时候接触到至少一个 Javascript 框架中的代码。考虑到这一点，我决定采取一种更有条理的学习方式。我能做些什么来更快地学习这个新框架，并能够更快地做出有意义的贡献？事实证明，你可以做很多事情，而不仅仅是学习 Ember.js。在使用 Ember 工作了一年多后，我开始学习 React，我们也开始在其中构建新的项目。我意识到，为了学习一个框架，有些事情不是该框架特有的，它们可以帮助你学习任何前端框架。虽然我每天都在学习，但我觉得我学习新 Javascript 框架的方法已经得到了回报。可以随意选择创建一个适合你的计划，但在这篇文章中，我会分享我发现的有用之处。以下是如何学习一个新的 JS 框架：

1. 阅读框架的介绍
2. 编写 Hello World 教程
3. 将其与您了解的框架进行比较
4. 了解您将要使用的代码库
5. 与比你更有经验的人配对
6. 征求对您工作的反馈
7. 探索社区
8. 不要停止学习！

1. 阅读框架的介绍

如果这听起来很明显，那是因为它确实如此。但值得注意的是，人们很想在不阅读基础知识的情况下跳到一些代码中。每个 Javascript 框架都有不同的指导思想，并采用稍微独特的方法来构建 web 应用程序：

• 该框架最初的目的是什么？
• 为什么要创建它？
• 谁维护它？
• 指导思想是什么？

这些都是该框架的引入可以回答的问题。花 30 到 60 分钟阅读文档的介绍内容，您将了解框架的核心概念。当您学习使用框架构建时，这些概念会一次又一次地出现。学习和理解指导框架的基本哲学是很重要的，因为它会在做出架构和设计决策时给你一些参考。以 Ember 在线文档中的这句话为例：“ Ember 为开发人员提供了管理现代 web 应用复杂性所必需的许多功能，以及实现快速迭代的集成开发工具包。现在将其与 React 简介中的这句话进行比较：“React 是一个用于构建用户界面的声明式、高效和灵活的 JavaScript 库。它可以让你用称为“组件”的小而孤立的代码组成复杂的 UI。”差别太大了！从这句话中，我们了解到 Ember 试图成为构建 web 应用程序的一体化解决方案，集成开发人员可能需要的所有功能。相比之下，React 强调灵活性和可组合性，强调其组件驱动的架构。通过从 Embe r和 React 的介绍性文档中挖掘这两个示例简介，很明显，它们可以提供很多关于框架哲学的信息。每一个设计决策都源于核心哲学，因此理解它很重要。除了理解核心概念外，您还将了解实际框架的起点和终点。重要的是要了解框架由什么组成，以及什么是框架生态系统的一部分。例如：React 经常与 Redux 一起使用，但 Redux 不是 React 的一部分。理解什么是“React 代码”与“Redux 代码”很重要，原因如下：

• 您应该知道是否需要导入 Redux
• 你有问题时，你会确切地知道要参考哪些文档来查找信息。这使得查找东西的速度更快。

2. 编写 Hello World 教程

终于到了编写代码的时候了！但我建议不要在你将要开发的代码库中乱动。相反，试试 Hello World 教程：使用启动框架和运行应用所需的最低要求。有些框架将教程集成到其介绍内容中，因此步骤 1 和步骤 2 可能会以某种方式组合在一起。无论哪种方式，做 JS 教程都意味着你可以用一些实际的代码将框架的概念付诸实践。只有你知道如何学习最好，所以 Javascript 教程的类型在这里很重要。你更喜欢跟随一个视频系列或书面教程？您是从项目模板开始还是从头开始？无论你喜欢哪种学习方式，都有一个教程供你使用。由于您可能会进入一个已经设置好的项目，因此尽量不要在设置和配置方面花费太多时间。有时，完全跳过它，从 CodePen 或 CodeSandbox 上的项目开始是值得的。这样你就可以直接深入到代码中。

3.与你已经知道的框架进行比较

一旦你完成了教程并使用该框架编写了一些代码，你就应该有一个很好的基础来了解使用它的感觉。你将知道如何将数据绑定到元素、添加事件监听器和结构组件。尽管你可能已经下意识地这样做了，但现在是思考该框架与你过去可能使用过的其他框架和工具相比如何的好时机。寻找 X 与 Y 的帖子，在你已经知道的框架的背景下理解新框架：

• 如果您正在使用 Vue，请查看 Vue 与其他框架的比较
• 或者阅读这篇关于 Ember 和 Angular 之间差异的文章
• 或者查看 React 和 Svelte 的并排比较

通过将你正在学习的框架与你已经有经验的框架进行比较，你将能够进行比较，这将有助于你将新框架放在上下文中。例如，如果你是 React 的新手，但有 Vue 的经验，你可以将 React 组件的状态对象与 Vue 组件的数据函数进行比较。两者都保存组件拥有的信息，并且当信息更新时，更改会反映在模板中。

4.了解你将要使用的代码库

到目前为止，您已经完成了研究，并在将要使用的框架中编写了一些代码。终于到了仔细研究你将要进行的项目的时候了。这将确保你在使用框架的背景下学习框架。你的队友很可能是你在这里的巨大资源。他们应该能够帮助你建立项目，并带你了解。尽管如此，它还是值得你自己探索的。在熟悉代码时，以下是一些 Javascript 常见问题解答：

项目文件的结构如何？组件位于何处？组件是存在于单个文件中还是存在于多个文件中？

• 构建过程是什么？有命令行工具吗？
• CSS 是如何编写的？类命名是否遵循惯例？项目是否使用 CSS in JS 解决方案？
• 除了框架本身，项目还使用了哪些额外的工具或库？（快速扫描 package.json 文件会让你在这里有一些了解。一定要搜索任何你不熟悉的包，至少知道它们的作用！）

了解项目的结构方式以及不同文件的位置，就像为自己构建一个项目的心理地图。要为地图添加细节，请在随机组件中进行一些明显的更改，然后刷新页面以查看反映的更改。例如，更改元素的背景色或添加一些文本。这不仅有助于确保您的本地开发环境设置正确，还将确保您对项目结构和文件的假设是准确的。

5.与比你更有经验的人配对

要求与 Javascript 工程师配对，以获得处理 bug 或功能的第一手经验。这可能是你学习最快的方式，你已经对框架的运作有了基本的了解，让你有机会提出有意义的问题。还有另一件事：问很多问题！我遇到的大多数开发人员都喜欢回答他们，所以请走开。如果工程师似乎违反了你在指南中读到的 JS 框架约定，问问他们为什么选择这样做。配对时，一定要询问他们使用的开发工具是否在项目回购中的代码之外。例如，他们是否使用特定的浏览器扩展来帮助调试？（大多数框架都有它们！）

6.征求对工作的反馈

当你开始自己处理一个功能时，不断地要求反馈。根据我的经验，在学习新技术时，征求对您工作的反馈是提高代码质量的最快方法之一。这不仅仅意味着提出撤回请求以供审查。你应该问一些具体的问题，以表明你仍在学习，并希望确保你遵循了最佳实践。为了你自己的学习，鼓励你的评论者尽可能挑剔。以下是一些可以使用的反馈问题示例：

• 你会采取什么不同的做法？
• 作为一个仍在学习这个 Javascript 框架和代码库的人，我该如何做得更好？
• 我在这里遵循 JS 框架的最佳实践吗？

这些问题的答案可能会引发关于代码可重用性和框架约定的更大讨论，这意味着你将能够将你的知识应用于你所写代码的当前上下文之外的未来情况。

7. 探索社区

一旦掌握了所使用的框架和代码库，就很容易陷入其中，忘记继续学习。不要忘记社区！无论规模或受欢迎程度如何，你肯定会发现每个 Javascript 框架都有一个写博客和共享代码的社区。通过与社区保持联系，你不仅可以继续学习，还可以学习新的想法和概念，这些想法和概念最终可以融入你自己的项目中。有很多方法可以跟上社区的步伐：

• 关注 Twitter 上使用该框架的其他开发人员
• 浏览 DEV.to 并关注您喜爱的贡献者
• 订阅 Newsletter 或 RSS 订阅源，了解社区撰写的框架和其他博客文章的更新。如果该框架有官方 Newsletter，您应该订阅。否则，找一份第三方 Newsletter 或博客，你可以关注它来了解最新情况。

这不仅有助于你学习，还能让你参与进来：如果你不断看到新的信息，你就会把学习框架放在首位，更有可能继续参与社区。

8.不要停止学习！

框架来了又去，但学习它们的技能会一直伴随着你。这就是为什么当你在职业生涯中取得进步并面对新技术时，专注于自己的学习并采取结构化的方法将继续使你受益。如果有一件事我可以在加入新球队的第一天告诉我过去的自己，那就是对自己的学习能力充满信心。这可能需要时间，但学习一个新的 Javascript 框架并不像看起来那么不可能。当你周围都是工程师和经理的文化，他们重视你的成长，更重要的是投资于你的成长时，你不知道你能完成什么。