其他分享
首页 > 其他分享> > 学习框架后的反思——为什么要使用框架?

学习框架后的反思——为什么要使用框架?

作者:互联网

“我报名了Goldstone Project Phase 1 Challenge——瓜分100,000奖池,这是我的第一篇文章, 点击查看活动详情

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

发现刚学这个框架的时候并没有想太多,只是看中了它在行业中的应用。公司大部分开发页面基本都是使用框架开发的,大厂接受度最高的就是 反应 框架,所以当时也没多想,就开始看视频和文档,开始框架学习之路~

直到 反应 学完之后,我脑子里没有去想这个问题。貌似只是通过公司招聘才学会了满足市场需求的框架,但现在回过头来反省,发现这种思维方式不利于技术的进步。当我们学习一项技术时,我们应该回到源头,了解它为什么会出现?它解决了哪些问题?这不仅能帮助我们在这个领域继续深耕,还能说服自己接触更多的前沿技术

说到框架,它是一个第三方库,用来替代原来的三剑客进行开发,所以它的出现必须解决开发过程中的问题,或者在原生开发出现问题的背景下对项目进行优化。让我们看一下框架。它给我们带来了什么好处?真正解决了哪些问题?

组件化

组件化的思想就是在开发之前把我们的页面分成小模块,相应的逻辑也跟着组件一起划分。这种开发思路给我们带来了很多好处:

复用性强,适合单页应用SPA

说到组件化,就不得不提到可重用性。我们在浏览一些网站的时候会发现,比如掘金,它的header导航栏在多个页面中是一样的,也就是说这个header可以在多个页面中复用。封装成一个组件,那么复用是一件很简单的事情,你只需要在对应的地方引入这个组件,这样就减少了很多重复的逻辑代码

SPA最大的特点是用户的每一个动作都不会重新加载页面,而是动态变换当前页面的内容。但是,这个转换后的页面在很多情况下都有一些可重用的部分,例如页眉。综上所述,考虑到刚才提到的复用特性,你觉得使用框架是不是很适合单页应用呢?

利用项目维护和扩展

由于页面已经被拆分成组件,组件所在文件的代码量不会太大。如果项目的某个部分出现问题,只需要找到相应的组件即可找到问题,这对项目是有利的。维护。如果后续页面需要添加其他功能,只需要添加相应的组件,非常有利于项目的扩展

数据驱动的视图更新

任何研究过框架的人都知道,比如 反应 , Vue 这类框架有一个很大的特点,就是用数据来驱动视图更新。这样的框架设计有什么好处?

减少编写DOM操作的代码,加快开发速度

相信在学习前端的过程中,你一定用过native JS 开发项目,资深程序员可能用过 jQuery ,但是有一个不可避免的问题,遇到数据变化需要重新改。 用户界面 什么时候,即使 jQuery 操作 DOM 很方便,但还是需要在代码中频繁操作 DOM ,这导致在开发过程中花费了大量时间 DOM 元素之上

和喜欢 反应 这样的框架采用了数据驱动视图更新的思想, DOM 操作是由它在内部帮我们完成,这样我们的关注点就可以从整个组件的更新转变为对应数据的更新,我们只需要维护好用于下一页显示的数据即可实现复杂的页面。更新操作,显着加快项目开发速度

性能优化

像一些优秀的框架是内部集成的 差异 像这样的算法,通过引入虚拟 DOM 概念,当视图需要更新时,首先使用 差异 比较新旧虚拟的算法 DOM 发生的变化 DOM 元素可以重复使用,需要更新、删除或重构,然后精确操纵需要改变的现实 DOM , 这确实有效 DOM 次数会少很多,浏览器的回流和重绘压力也会降低,从而达到性能优化的目的

生态

图片 反应 对于这样一个流行的框架,社区有大量的活跃用户,每天都有人分享他们的问题和解决方案,甚至很多人为一些人写了一套开箱即用的第三方库常见的场景。即使我们在开发过程中遇到问题,也可以快速解决。当我们遇到常见的场景时,我们可以快速使用别人写的成熟的第三方库来完成需求。

总结

这次想了想,感觉自己对框架的理解变得更加透彻了一些。以前觉得这个东西别人做的,公司也有这样的需求,所以我会学习使用。但是随着我们自身经验的积累,发现“知己知彼”会更有利于我们在前端道路上的探索。毕竟很多前沿技术现在用不上,不代表以后也不会用。更新迭代如此之快,短时间内会有大量新技术取代旧技术。如果我们对每一项技术的学习都是靠外界驱动的,那么就很难真正走向高级之路了~

版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议。转载请附上原文出处链接和本声明。

这篇文章的链接: https://homecpp.art/5709/7475/2128

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明

本文链接:https://www.qanswer.top/23492/52561000

标签:框架,DOM,更新,学习,组件,开发,反思,页面
来源: https://www.cnblogs.com/amboke/p/16675851.html