2021: 值得关注/学习的前端框架和工具库汇总
Posted 前端人
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2021: 值得关注/学习的前端框架和工具库汇总相关的知识，希望对你有一定的参考价值。
添加无广告优质学习群
前言
最近在知乎看到了这么个问题：学完Vue还有必要学习React和Node吗？， 有很奇妙的感觉，因为我在最开始入门前端时，也是以Vue入的门，在“学完”Vue之后， 我也有了类似的疑问，但当时的我没多想，觉得“技多不压身”，反正都是前端，以后肯定用得上，那就学呗——
这个问题的题主很明显遇到了大部分同学入门前端时会遇到的困惑：怎么这个还没学完又看到说那个才是主流的，怎么这个版本还没吃透又来了一个break change的新版本，怎么前端出框架的速度这么快？？
很简单，如果学有余力，学就是了。如果学不动了，就完全没必要盯着前沿方向学。就盯着一个方向甚至是一个框架吃透，在简历上，“了解过A、B、C，使用过D、E、F” 绝对不如 “深入了解A原理，精通B架构实现，C的collaborator/maintainer之一”。
但有一点请注意，学有余力不是因为当前方向浅尝辄止而学有余力，是在当前方向足够深入同时还学有余力~ 对于不知道学啥的同学，就有了这篇文章，我会在接下来罗列我深入/尝试/了解过的，认为值得学习的各个方向框架与工具类库，并且对它们做一个简要介绍。
React
状态管理
-
Jotai [2]，原子化的状态管理思路（就像React官方的Recoil），亮点是API比Recoil简洁很多，对Suspense模式支持好，可以考虑用来代替useContext + useReducer。 -
IceStore [3]，淘系Ice团队出品的状态管理库，我在日常业务中使用最多的一个状态管理方案，亮点是基于Immer来实现数据不可变，整体的使用方案类似Dva，state + reducer + effects，支持React Hooks写法，TypeScript支持好。 -
XState [4]，不止适用于React，可以和Vue/Svelte/Ember这样的框架一起，也可以和RxJS这样的响应式库一起用。它对自己的定义也不包含状态管理的字样，而是 有穷状态机(finite state machines[5] )。暂时没有使用过，不做展开介绍。 -
SWR [6]、 React-Query [7]、 useRequest [8]，网络请求的状态管理、缓存、竞态处理等。
生态
-
GatsbyJS [9]，基于React的静态页面生成器，非常快。优点是有非常多的插件（plugin）和模板（starter），并且支持很多CMS（如Contentful、Neltify等），适合喜欢在线写文档的。我正在考虑把博客迁移到GatsbyJS + CMS的方案，这样随便找一台电脑就能写博客了。 -
React-Testing-Library [10]，React测试库，个人感觉和Enzyme代表了两个不同方向，而RTL更符合直觉。RTL还提供了Hooks的测试库，给力奥。 -
AHooks [11]，阿里的React Hooks库，我日常开发经常用到其中的Hooks。 -
Huse [12]，百度工程效能团队的Hooks库，同样很强大，里面的很多实现都比较hack（大量使用了useRef等），适合进阶阅读。 -
Dumi [13]，蚂蚁出品的React文档生成器。 -
Immer [14]，思路巧妙的数据不可变方案。
Angular！
-
Angular[15] 是我最近正在学的框架，在开始前我其实是拒绝的，但写了两个例子之后我觉得真香！你可能听过它不好的一面：笨重、学习成本高、断崖式更新...， 可能也听过它好的一面：不需要再自己挑选路由、状态管理方案、请求库等、依赖注入很香适合后端程序员快速上手...。在最开始我就是处在这么个情况，直到我跟着官方教程走完第一个demo，我觉得我一段时间内不会再学Vue3了（对不起尤大）。整体的感受非常舒服：
-
模块划分，我本人非常喜欢模块化的思想（个人认为React的是组件化而不是模块化），各个模块完全自己干自己的，不管是多级路由还是复杂数据流都显得结构清晰。
-
模板语法，在用Vue的时候我没有感觉到模板语法有多好，可能是因为模板和逻辑写在一个文件里总觉得不纯粹。但在Angular中模板被单独放一个html文件，组件用Class的语法写，我就莫名觉得爽快。
-
大而全，这一点见仁见智，能接受的会觉得很舒服，并且团队做定制也特别容易（schematics、generators、builders），各种规范是真的能确保不会一人一个写法。
-
学习成本，低情商：学Angular还要学TS和RxJS；高情商：学了Angular我就会TS和RxJS了！
深入TS类型编程推荐我之前写的这篇TypeScript的另一面：类型编程[16]
-
具体的不做展开介绍了，真的让我滔滔不绝安利Ng这篇文章就收不住了，所以有兴趣的同学欢迎去体验下。
跨端
-
Taro [17]，京东凹凸实验室出品，应该是我目前见到支持最多端的跨端框架（但问题也不少，这个没办法），一直没有用Taro写过一个完整应用，有机会会试试的。 -
Rax [18]，淘系Ice团队出品，轻量、易用、高性能。同样是淘系到集团广泛使用的跨端方案。 -
Remax [19]，小程序跨端框架，基于React，亮点是运行时方案（大部分跨端方案都是编译时，还有Rax这种两套方案都支持的）。 -
Ionic [20]，出现比较早的一个跨端方案，最开始只支持Angular，现在还支持了React和Vue，暂时没有使用过。目前的了解是性能与Vue支持上存在一些问题（所以Angular YES）。据说是曾经培训班的标配？ -
Electron [21]，不做介绍。 -
NwJS，微信小程序开发者工具就是用这个写的，和Electron是同一个维护者( zcbenz [22])。 -
Flutter [23]，不做介绍。
NodeJS
-
NestJS[24]，一个大而全的Node框架，就像NodeJS里的Angular，实际上作者也是受到了Angular的影响，很多装饰器都和Ng中的同名。你可能同样在犹豫要不要学这玩意，我的意见是：学！因为确实NodeJS中目前没有特别全面的框架（虽然NestJS在Spring面前也是弟弟）。NestJS基于Express（也有Fastify的适配），同样预置好了各种能力，并且能很好的兼容Express中间件生态。我正在捣鼓的新项目就是基于Angular + Nest，越写越爽。
如果你打算Angular和Nest都学，我的建议是先学Nest，这样入门Angular的学习路线会更平滑一点。如果你此前没有接触过依赖注入，可以瞅瞅我之前写的这篇：走近MidwayJS：初识TS装饰器与IoC机制[25]
-
MidwayJS[26]，淘系Node架构出品，整个阿里都在用的Node框架，同样基于装饰器体系，你可以理解为复杂度与完善性方面低于NestJS，但是高于Egg和Koa。
-
Midway-Serverless [27]，支持阿里云/腾讯云的Serverless框架，个人觉得是目前最好用的一个Serverless框架了，虽然 Serverless [28]（框架，不是真·Serverless）支持微信扫码登录也很顶。 -
Midway-Hooks [29]，见下面的介绍 -
ts-node-dev[30] + tsconfig-paths[31]，你是否受够了ts-node的配置？是否难以忍受为了自动重启还需要为nodemon配置ts-node作为执行？请使用
ts-node-dev -r tsconfig-paths/register xxx/index.ts这一行命令即可~ -
TypeORM[32]，最爱的ORM没有之一（装饰器 YES），也是目前NodeJS社区使用最多的两个ORM之一（另一个是Sequelize，但是TS支持只能说emmm，社区的TS实现也只能说一般）。Query Builder、级联、支持依赖注入，非常推荐试一试。
-
PM2[33]，NodeJS进程管理工具，零宕机重启、支持fork和cluster模式、blabla...，更
以上是关于2021: 值得关注/学习的前端框架和工具库汇总的主要内容，如果未能解决你的问题，请参考以下文章