React

React的优点有很多,现在很多应用都接入React这个框架。 
在我看来,有下列优点: 
- Facebook团队研发并维护——有团队维护更新且有质量保证 
- 在MVVM结构下只起View的作用——简单接入,不需要花费大量人力重构代码 
- 组件化形式构建Web应用——复用性强,提高开发效率 
- 用Virtual DOM减少对DOM的频繁操作提高页面性能——批量操作减少重排(reflows)和重绘(repaints)次数——性能对比旧的方式有提高

React对重排和重绘的提高

雅虎性能优化比较重要的点,老司机自行忽略。 
如下图,HTML被浏览器解析为DOM树,CSS代码加载进来解析为样式结构体,两者关联组成渲染树,之后浏览器把渲染树绘制出来就是我们看到的网页了。这里如果我们对DOM树或者样式结构体做一些操作,如删除某个节点,样式改为隐藏(display:none)等等,会触发重排进而导致重绘。 

触发重排的条件

  • DOM元素的数量属性变化
  • DOM树的结构变化——节点的增减、移动
  • 某些布局属性的读取和设置触发重排——offsetTop/offsetWidth/scrollTop等等 
    导致子级、后续兄弟元素、父节点因重新计算布局而重排

触发重绘的条件

  • 简单样式属性的变化——颜色、背景色等
  • 重排导致的重绘

而React维护了一个Virtual DOM将短时间的操作合并起来一起同步到DOM,所以这也是它对整个前端领域提出的最重要的改变。

为什么引入Reflux?

网友评论