我是如何学习任意前端框架的

心已赠人 2021-09-20 04:52 438阅读 0赞

![v2-e56426af2ef53260c84e8e3799b05fe4_hd.jpg][]

你决定学习框架`x`，你打开youtube或任何搜索引擎，搜索与`x`框架相关的任何教程，并在30分钟之后突然发出"Eureka"(高兴地表现)的尖叫--**我认为这个框架类似自己之前学过的框架**。你是对的，你不必要从头开始学习它。在这篇文章中，我将向你展示我学习前端框架的经验以及这些框架如何彼此相似的。  
每次你决定学习前端框架时，你定会反复听到这些术语（组件，路由和管理状态/状态管理）。  
下面我们逐步了解下：

##    组件 ##

任何框架的核心都是以创建组件来达到复用的目的。如今，大多数现代框架都使用`JSX`或`HTML`模版引擎，**生命周期钩子**\--提供生命瞬间可见性，比如创建，渲染，注销以及它们发生时的行为能力。

##    路由 ##

如今，大多数现代框架都提供`API`来创建和管理客户端路由。

##    管理状态 ##

有时，你的数据必须在组件之间共享，推荐的方法是使其成为中心（中转站）。  
现在，所有框架都提供`API`来管理你的状态（例如Angular有一个[Service][]，React现在有[Context API][]）以及当你的数据规模变大之后，你可以考虑使用像[redux][]这样的库。  
完成基础学习之后，我们来亲自动手并**创建项目**。  
**创建项目**

![v2-dd956323c34b1964e5ee25c6bbd3e48e_hd.jpg][]

为了理解事物的某些方面，你需要很好地了解它，这些知识（获取）不是仅仅来自阅读书籍或者观看视频课程。在这篇文章中，真实的测试伴随着现实中的真正问题，会带给你些启发，并应用在你选择的任何前端框架的项目中。  
**笔记：**

*  该主题中列出的项目难度逐渐递增，每个项目会在前一个项目基础中增加。
 *  项目的条理是从最简单到最全面。

## **1.查找 & 显示 （模仿）** ##

常用的首个应用是使用其公共的`API`来模仿任何已知站点，尝试构建一个带下拉列表的搜索栏，来保存来自端点`API`的结果，检查其返回的数据，然后再显示它，就像有张图像一样（显示）或不显示。  
**端点API示例：**

*  [Github API][]
 *  [OMDb API][]
 *  [Spotify Web API][]
 *  [wunderground API][]
 *  [reddit API][]

**你将学到：**

*  使用`HTTP客户端`向端点`API`发起请求
 *  使用键盘事件监听器，例如，一旦用户点击进入，就向端点`API`获取结果数据
 *  学会如何展示单条数据或一组数据
 *  给你插入的数据添加点样式
 *  构建你的布局
 *  主要的详细信息：列表结果将结果中的每个项目的链接添加到项目详细页面
 *  了解如何将数据从母版页传递到详细信息页

## 2.Auth App ##

我在上一节中提到的一些端点`API`（可能）需要一些身份验证，因此在这一节中尝试添加或构建另一个带有`登陆/注册`页面的应用程序。如果用户登陆了，则将他/她重定向到用户主页，并阻止`访客用户`访问（主页），因为这需要用户登陆的。  
**你将学到：**

*  路由守卫：某些页面只允许通过身份验证的用户（访问）
 *  如何发送并保存JWT(JSON Web令牌)以发出需要经过身份验证的用户请求

## 3.CRUD App ##

增删查改的应用程序是本节中最受欢迎的前端应用程序，你可以使用本地存储或者使用在线服务（如Firebase）来构建此应用程序，甚至将它与后端框架集成在一起。  
**项目实例：**

*  书签应用
 *  To-Do App

**你将学到：**

*  验证用户的表单输入，如果用户输入错误就提示错误信息
 *  如何创建`put、delete、post和get`的HTTP请求
 *  将你的应用程序和任意后端框架集成
 *  尝试为后端框架添加`auth`功能

## 4.聊天应用 ##

在前面的章节中，对后端的所有请求都是**单向的**，你在管理应用程序状态时没有问题。但在本节中，我们尝试使用`web sockets`来构建聊天应用程序，它是**双向的**，我们不能（总是）等待响应来更新视图，我们需要另一种方法来管理我们的客户端状态。  
**你将学到：**

*  学习如何使用`管理状态`解决方案，如`redux for react, ngrx for angular 2+ 或 vuex for vuejs`以及如何将其与客户端应用程序集成
 *  使你的应用更灵活（接收网络状态并通知用户新消息）

[v2-e56426af2ef53260c84e8e3799b05fe4_hd.jpg]: /images/20210812/fefbb7d2a161489cb27e84a3073afa3a.png
[Service]: https://link.zhihu.com/?target=https%3A//link.juejin.im/%3Ftarget%3Dhttps%253A%252F%252Fangular.io%252Fguide%252Farchitecture-services
[Context API]: https://link.zhihu.com/?target=https%3A//link.juejin.im/%3Ftarget%3Dhttps%253A%252F%252Freactjs.org%252Fdocs%252Fcontext.html
[redux]: https://link.zhihu.com/?target=https%3A//link.juejin.im/%3Ftarget%3Dhttps%253A%252F%252Fredux.js.org%252F
[v2-dd956323c34b1964e5ee25c6bbd3e48e_hd.jpg]: /images/20210812/b1f00c27bf574ababb10f799ec2f167d.png
[Github API]: https://link.zhihu.com/?target=https%3A//link.juejin.im/%3Ftarget%3Dhttps%253A%252F%252Fdeveloper.github.com%252Fv3%252F
[OMDb API]: https://link.zhihu.com/?target=https%3A//link.juejin.im/%3Ftarget%3Dhttp%253A%252F%252Fwww.omdbapi.com%252F
[Spotify Web API]: https://link.zhihu.com/?target=https%3A//link.juejin.im/%3Ftarget%3Dhttps%253A%252F%252Fdeveloper.spotify.com%252Fweb-api%252F
[wunderground API]: https://link.zhihu.com/?target=https%3A//link.juejin.im/%3Ftarget%3Dhttps%253A%252F%252Fwww.wunderground.com%252Fweather%252Fapi%252F
[reddit API]: https://link.zhihu.com/?target=https%3A//link.juejin.im/%3Ftarget%3Dhttps%253A%252F%252Fwww.reddit.com%252Fdev%252Fapi%252F