学完框架后的反思—为什么要使用框架？

“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情”

学习前端也有一定的时间了，最近在网上看到了一个问题让我反思了很久——为什么要使用前端框架？

我发现自己当初学习框架时并没有想那么多，只是看中了其在业界企业的应用，大部分公司开发页面基本上都是使用框架进行开发的，而最为被大厂广泛接受的就是 React 框架，所以我当时也没有想那么多，直接就开始看视频、看文档开启了框架学习之路~

直到 React 学完了，我脑海里面也没有去思考过过这个问题，好像我学习框架只是为了通过公司的招聘、满足市场需求一样，但现在回过头反思之后，发现这种想法并不利于技术的进阶。我们学习一项技术，应该要追根溯源，了解它到底为什么出现？它的出现又解决了哪些问题？这样不仅有利于我们继续在该领域深耕下去，而且也可以说服我们自己去接触更多前沿的技术

说到框架，它是用于替代原生三剑客进行开发的第三方库，那么它的出现，一定在原生开发存在问题的背景下来解决开发过程中的问题或者优化项目的，下面我们来看看框架到底带给了我们哪些好处？真正解决了哪些问题？

组件化

组件化的思想就是将我们的页面拆分成一个个小的模块后再进行开发，对应的逻辑也随着组件一起拆分开来，这种开发思想给我们带来了很多好处：

复用性强，适合做单页面应用 SPA

SPA 最大的特点就是用户的每一个动作都不会重新加载页面，而是动态的变换当前页面上的内容，然而这个变换的页面在很多情况下都存在一些可以复用的部分，比如说页面头部和底部，考虑到刚刚所说的复用性特点，是不是觉得用框架非常适合做单页面应用呢~

利用项目维护和扩展

由于页面已经被拆分成了一个个的组件，组件所在文件的代码量并不会太大，如果项目中某一个地方出了问题，那么只需找到对应的组件查找问题即可，有利于项目的维护。如果后续页面中需要增加其它功能，只需要再添加对应的组件即可，十分利于项目的扩展

数据驱动视图更新

学习过框架的人都知道，像 React、Vue 这类框架都有个很大的特点，那么就是使用数据去驱动视图更新，那框架这样设计到底有什么好处呢？

减少书写 DOM 操作的代码，加快开发速率

相信大家学习前端的过程中肯定是用过原生 JS 开发项目的，老牌的程序员可能还用过 jQuery，但都避免不了一个问题就是在遇到数据变动需要重新改动 UI 时，即使 jQuery 操作 DOM 非常方便，但仍然需要在代码中频繁的操作 DOM，这样就导致了在开发过程中很多的时间都花在了 DOM 元素上面

而像 React 这样的框架采用数据驱动视图更新的思想，对 DOM 的操作是其内部帮助我们完成的，这样一来，我们的关注点就可以从整个组件的更新变化为了对应数据的更新，只需要维护下一次页面展示要用到的数据就能实现页面复杂的更新操作，从而大幅加快了项目的开发速率

性能上的优化

像一些优秀的框架内部都集成了 diff 算法这样的东西，通过引入虚拟 DOM 的概念，当视图需要更新时，先使用 diff 算法比较新旧虚拟 DOM 上发生的变化，明确哪些旧的 DOM 元素是可以进行复用的，哪些需要更新、删除或重建，然后再精确的去操控需要变化的真实 DOM，这样真正操作 DOM 的次数就会少很多，浏览器的回流和重绘压力也会随之减少，从而达到性能优化的目的

生态

像 React 这样的流行框架，社区里面有大量的活跃用户，每天都会有人分享自己遇到的问题以及解决方案，甚至很多人专门对一些常见的场景写了一套开箱即用的第三方库，这让我们在开发过程即使遇到了问题也能够迅速解决，碰到了常见的场景也可以迅速利用别人写好的、成熟的第三方库来完成需求

总结

经过了这次的思考之后，感觉对框架的理解又透彻了一些，以前只觉得别人将这个东西做出来了，公司也有这样的需求，那我就去学、会用就行。不过，随着自己经验的积累，发现“知其然，知其所以然”才会更有利于我们在前端之路上的探索，毕竟很多的前沿技术现在用不上，不代表以后用不上，前端更新迭代那么快，在短时间内就会有大量的新技术取代旧技术，如果我们对于每个技术的学习都是因为外界驱动，那么将很难真正走向进阶之路~