什么是渐进式框架?React虚拟Dom理解?diff算法?

《我的职业是前端工程师【四】:如何选择合适的前端框架,告别选择恐惧症》提到一句:“Vue.js 是一套构建用户界面的渐进式框架,专注于MVVM 模型的 ViewModel 层。”那么,什么是构建用户界面的渐进式框架?看了知乎《Vue2.0 中,“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么?》看了@徐飞@Jim Liu解释,自己有了新的理解:“渐进式——在原有项目中,可以先尝试引入一两个组件,可以当插件用....甚至也可以用它来开发整个项目!”

换句话,站在使用者的来说:“给你一个空屋,至于你需要什么自己一件件添,而不是那种家居家电全齐,自己不喜欢再一件件的扔了,甚至required 必须用且耗费空间的!”

引用大神的话:“它给你提供足够的optional,但并不主张很多required,也不多做职责之外的事!这就是渐进式。

2.传统的 DOM 操作是直接在 DOM 上操作,当需要修改一系列元素中的值时,就会直接对 DOM 进行操作。而采用 Virtual DOM 则会对需要修改的 DOM 进行比较(DIFF),从而只选择需要修改的部分。也因此对于不需要大量修改 DOM 的应用来说,采用 Virtual DOM 并不会有优势。

react虚拟dom:依据diff算法台

前端:更新状态、更新视图;所以前端页面的性能问题主要是由Dom操作引起的,解放Dom操作复杂性 刻不容缓

因为:Dom渲染慢,而JS解析编译相对非常非常非常快!jsg更容易表示节点

所以:把js和html混写在一起来解决,React出现了!!!

diff算法是虚拟dom核心:

传统的diff算法复杂度是次方级别增长,而react用的优化过的diff算法:

过程:1.节点比较(属性、文本);2.记录差别(编号);3.增删改查(js);

优化点:

情景1:老的父节点和新的父节点只要不一样,ok,断臂!即使孩子节点一模一样,都要删除,渲染新的节点;

情景2:父节点相同,对比节点的属性、文本,进行替换或者删除


猜你喜欢

转载自blog.csdn.net/y_ancy/article/details/79582512