(给前端大全加星标,提升前端技能)
作者:政采云前端团队公号/天泽
性能和渲染(Rndr)正相关Ract基于虚拟DOM和高效Diff算法的完美配合,实现了对DOM最小粒度的更新。大多数情况下,Ract对DOM的渲染效率足以我们的业务日常。但在个别复杂业务场景下,性能问题依然会困扰我们。此时需要采取一些措施来提升运行性能,其很重要的一个方向,就是避免不必要的渲染(Rndr)。
渲染(Rndr)时影响性能的点Ract处理rndr的基本思维模式是每次一有变动就会去重新渲染整个应用。在VirtualDOM没有出现之前,最简单的方法就是直接调用innrHTML。VirtualDOM厉害的地方并不是说它比直接操作DOM快,而是说不管数据怎么变,都会尽量以最小的代价去更新DOM。Ract将rndr函数返回的虚拟DOM树与老的进行比较,从而确定DOM要不要更新、怎么更新。当DOM树很大时,遍历两棵树进行各种比对还是相当耗性能的,特别是在顶层stStat一个微小的修改,默认会去遍历整棵树。尽管Ract使用高度优化的Diff算法,但是这个过程仍然会损耗性能。
渲染(Rndr)何时会被触发○组件挂载Ract组件构建并将DOM元素插入页面的过程称为挂载。当组件首次渲染的时候会调用rndr,这个过程不可避免。
○stStat()方法被调用stStat是Ract中最常用的命令,通常情况下,执行stStat会触发rndr。但是这里有个点值得