最近在看一些文章，了解到了很多大佬对于前端一个整体化的知识体系架构的认知，想着要不要梳理一下自己对于前端 framework（框架）和 library（库）的一个认知。
OK，先贴个最近在看的卡颂大佬的文章中对于 FrameWork 和 Library 的一段节选
下文摘自于卡颂的React设计原理一文
第一章 // 前端框架原理概览不管是React还是Vue，它们的核心都是构建UI的库，由以下两部分组成1、基于状态的声明式渲染2、组件化的层次架构
MDN 关于框架为何存在的定义
框架为何会存在？
我们已经讨论了因为什么契机而创造了框架，但我们仍不知道为什么开发者认为有必要创造它。要知道这个问题的答案，我们首先需要来看一看软件开发中的各种挑战。
设想一个很常见的软件：一个待办事项清单创建器，在接下来的章节中我们会使用各种框架来实现它。这个应用应让用户可以完成诸如呈现任务列表、添加和删除任务等操作，且在完成这些操作的同时能可靠地跟踪和更新应用程序的底层数据。在软件开发中，这种底层数据被称为状态（state）。
上述每个目标理论上都很简单。我们可以遍历数据来列出清单，添加一个对象来创建新任务，使用标识符来查找、编辑和删除任务。需要注意的是，用户都是在浏览器中使用应用的这些功能，然而这就引出了一些问题： 每当我们修改应用的数据时，我们都需要更新用户界面以使其匹配。
作者 --- 拙见认为，框架出现的问题就是将本来开发者需要关注的状态，dom，更新的时机，组合到一起，使开发者在开发的过程中只需要关注state的驱动即可，简化开发者的心智负担
下面是几个问题
JQuery为什么大家都认知行为上觉得它是一个库而非一个框架？
为什么React会在官网的文档中特意说明自己是一个构建UI的库？
为什么Vue和React在我们心目中是一样的但是我们却都说Vue是个框架呢？
好的，我们依次来思索我们上述的三个问题
第一个问题： JQuery为什么大家都认知行为上觉得它是一个库而非一个框架
首先来说第一个 JQuery 为什么大家都认知统一为一个库，那么它和下面两个哥们儿有啥区别呢？我们不妨想一想，两者之间的操作有什么区别，JQ 本质上是命令式的操作，而 Vue 和 React 是声明式的一个状态。而聊到这里我们就不得不提到命令式和声明式的一个区别了。
有兴趣的可以看作者之前的一篇文章浅谈一下声明式、命令式以及虚拟DOM
基于JQ完成的一个视图更新的流程我们需要做两步，修改state(状态)和改变Dom
而基于React和Vue完成的声明式的视图更新则是一个很经典的公式 UI=fn(state)
OK，我们来讨论一下这两者之间的区别，我们可以想象一下，工具与机床的一个区别，工具我们有扳手，锤子，螺丝，起子等等。工具只给我们提供工作时的助力，但本身它是没有任何产出过程的，所有的产出过程是由工作者来完成的，来进行构建的。那么机床呢？机床是我们把我们期望的材料给它，设计稿给它，它会给我们一个我们所期望的玩意。而制造这个东西过程我们并不需要关注，这是机床和工具的区别。
那么库和框架的区别，作者觉得是同样的道理。
库只提供了API，至于开发者你要怎么做，你想怎么做，你想要什么东西，那是你开发者的事情，跟库本身没有一毛钱的关系，还是以用JQ更新UI视图为例，我们在使用JQ更新的时候需要做两步，改变state，而后更新dom，至于什么时候更新dom，如何更新dom这是你开发者的事情，和JQ并无关系，我只提供方法，而不会代替你进行操作。
而框架不同，框架所做事就是让开发者只需要关注 state状态的本身，通过 state 的改变去映射 UI 视图的改变，而这个中间改变的过程是无需开发者进行关注的，框架为会你完成这段工作。换句话说框架的预期投入和产出是固定的，而库则不是。
第二个问题： 为什么React会在官网的文档中特意说明自己是一个构建UI的库
其实这里如果同学们对于第一个问题有理解的情况下，那么第二个问题也很简单了，那么这个时候我们就来对比React和Vue的区别在于哪里，其实个人觉得就是大家常常纠结的React和Vue的开发范式，爱者对其爱之深，恨者对其恨之切，就是关于开放边界的问题。
Vue 给开发者提供一个明确的开发范式模版，同时完成自己的 UI 构建视图。****
而 React 则不一样，React 只提供一个方式，类似于 JQ 的 API 调用的方式来让开发者享受内核自我驱动的快感，但相较于 JQ 而言，它又很好的关闭了本身库的一个缺点，就是命令式过程的掩盖。通过 React 本身的 API 调用，开发者完成自己需求的功能，但同时 React 避免了开发者直接作用 dom 的一个流程，使开发者的关注视图的重点放在了 state(状态) 的维护上，不用浪费心智于 fn(行为) 和 UI(视图) 上。
但在这些的基础上，v16之前和v16之后，React的开发范式则是在拥抱 OOP(面向对象) 和 FP(函数式) 两种操作。对于开发者则是开放了一部分的心智模型的负担。同时，就像 React 哲学所说那样
react是一个应用级开发的选择，所以保持必要的拓展性是react所应该拥有的一个优秀的特性。
综上所述，这也是作者认为为什么React的作者会说自己是一个库的原因所在
第三个问题： 为什么Vue和React在我们心目中是一样的但是我们却都说Vue是个框架呢
OK，看完上述两个问题的思考之后我觉得其实第三个问题很多同学自己的内心其实有自己的一个答案了。但是在这第三个问题上呢。作者准备换个思路来聊两者之间的区别。
OK，简单点来说，作者认为，这一次我们的切入点，在于整个项目的构建上
Vue 对自己的定义上叫渐进式的开发框架。OK，那么我们来聊一下，我们基于 Vue 去构建一个 SPA 应用时，我们的路由，状态这些东西是如何去挂载的。回忆一下 Vue.use() 这个方法，其实我们在开发的过程如果注意 Vue 本身的一个状态的话，其实 Vue 就是在 React 的基础上创建了一个 Vue 的实例，而后我们所有的状态，所有的插件都是以一个分支的状态存于 Vue 自身的一个原型实例来组合的。
注：这里的开发范式仅止于Vue2，Vue3的开发范式做了很大一部分的更新这里不做比对。
而 React 的引用呢？React 则更加开放式的以各种库的组合来完成我们所需的功能。当我们需要 SPA 时，我们会在这个 React 的应用中组装 React-Router 这个库，来进行开发。
好的这里可能会有同学提出，那 React 的这个周边库本身也是依托React而存在的，本质上换汤不换药啊。在这里呢，作者是这样认为的，代码本质是实现，写法，API调用这些都是固定的，而如何实现则是我们作为开发者来使用，就像所谓的这些编程思想一样，本质上其实都是语言来实现功能，可为什么存在差异呢？原因其实本质上来说就是因开发者的对于问题的思考。出发的角度。
回归到，我们第二个问题所说的地方，本质上 React 是做了集成的很多工作，但是终归这个选择权在于你开发者手中。React 去帮助你完成一些工作，但是它本身并不在意你做了什么。而 Vue 则会去告诉你我需要什么，你应该给我什么。
以上呢就是作者对于 FrameWork 和 Library 的一些个人的思考，希望可以对各位有所帮助
最后贴上这两天看到一篇文章，有点跑题，但是最后的一段话我很赞同
现在的前端我个人感觉有点浮躁，很多人都在追新，每天关注一些今天出了一个新特性，明天出了一个新框架什么的，对于这些我是赞成的，但是我更希望在追新的同时，要看到它的本质。所有技术解决方案的终极目标都是在解决问题，都是先有问题，然后再有解决方案，解决方案可能并不完美，可能解决方案有很多种，那么他们之间都有哪些优缺点？解决问题的同时各自都做了哪些权衡和取舍？我们要透过现象看本质才不至于被表面所迷惑。
原文作者：Berwin作者：奇舞精选链接：https://juejin.cn/post/6844903674116833287来源：稀土掘金
如果喜欢作者的话，可以点击关注一下。
见山的Log
