如何学习一个新框架

Islam Muhammad 原做，受权 New Frontend 翻译。

你必定有过这样的经历：在学习一个新框架的时候打开视频网站或者搜索引擎寻找教程，而后在看了差很少三十多分钟后忽然发出「咦，这跟我以前用过的那个差很少诶，我不用从头学了」这样的感慨。在这篇文章里，我会向你介绍我学习前端框架的经历，以及这些框架之间的类似性。

「组件」、「路由」、「状态管理」……每当你学习一个新框架的时候，都会反反复复接触到这些词。下面我们就来看看它们究竟是什么东西：

组件

• 提供复用性，是各大框架的核心。
• 多数现代框架都会使用 JSX 或 HTML 模版引擎。
• 全部框架都会提供「建立」、「渲染」、「销毁」等生命周期钩子，不只帮助你了解组件的运做方式，还容许你在相应事件发生时执行一些操做。

路由

• 多数现代框架都会提供在客户端建立和管理路由的 API。

状态管理

• 全部框架都自带管理组件内部状态的方法，它们不依赖外部库和工具。
• 还有不少框架自带组件间共享状态的方案，好比 Angular 的服务、React 的 Context API。
• 有时候框架自带的方案不足以知足需求，尤为是状态较多的时候。这种状况下能够考虑使用第三方状态管理库，好比 Redux。

了解了这些基本知识，下面我们来作几个项目。

项目

想要真正了解一个东西的话，不能只看书或者看视频，还要动手去实践。下面介绍的这些项目帮助你在学习新框架的时候快速上手它的各项功能。

注：

• 下面这些项目的难度是递增的，每一个项目都会用到前面的那个涵盖的知识点。
• 项目的复杂度也是递增的。

展现型应用（复刻一个网站）

一般用新框架作的第一个项目能够是借助一个已有的网站提供的公共 API 复刻这个网站。能够作一个搜索框，在下拉列表里显示从 API 获取到的数据，并根据必定的条件展现不一样的内容（好比说，若是有图片的话，就把图片显示出来）。

一些 API 的例子：

• GitHub API
• OMDb API
• Spotify Web API
• Wunderground API
• Reddit API

你将学会：

• 从客户端经过 HTTP 访问 API。
• 使用键盘事件监听器。好比说，当用户敲回车后从 API 读取数据。
• 显示一条数据或者一组数据。
• 经过插值来改变展现方式。
• 将数据以结构化的方式展示。
• 制做主从页面：在结果中放一个连接，点击后进入对应结果的详情页。
• 将数据从主页面传给从页面。

用户鉴权

上面的部分 API 须要用户登陆后才能进行某些操做。在这一节，咱们试着作一个有登陆、注册页面的应用，而后在用户登陆后把用户重定向到我的主页，同时防止未登陆用户访问只有登陆用户才能访问的页面。

你将学会：

• 使用导航守卫：一些页面只有登陆用户才能够看到。
• 借助 JWT（JSON web token）来发送只有登陆用户才能进行的请求。

CRUD（增删改查）

这是最流行的一类前端应用。在这一节，你能够选择把数据存在本地，也能够选择用 Firebase 这样的服务把数据存到云端，还能够把应用跟后端框架结合起来。

一些例子：

• 书签应用。
• To-Do 应用。

你将学会：

• 检查表单输入，并在遇到非法值的时候显示错误信息。
• 使用 PUT、DELETE、POST、GET 这些 HTTP 请求。
• 把应用跟后端框架结合到一块儿。
• 为后端框架添加鉴权的功能。

聊天应用

在前面几个小节里，全部日后端发的请求都是单向的，不须要在后端维持应用状态。但这一节里面，咱们会试着用双向传输请求的 web socket 来作一个聊天应用。这就不能依靠发出请求后收到的结果来更新视图了，而是要经过另外一种方式来管理客户端的状态。

你将学会：

• 使用 React 的 Redux、Angular 2+ 的 NgRx 以及 Vue.js 的 Vuex 来管理状态，并将它们和你的应用结合到一块儿。
• 让你的应用监听网络状态，并在收到新消息的时候通知用户。

Photo by Reto Simonet on Unsplash