前言
最近对React16的新特性还有其更新机制进行了略有系统的学习,同时也观看了尤玉溪在Vue-Conf上的演讲,受益匪浅,记录一下感想。
React与Vue都采用了Virtual Dom的思想进行页面的更新,但是React是基于JSX语法进行开发,而Vue基于模板编译。v-dom的使用,并不是因为v-dom可以提升渲染性能,实际上,在Diff Tree的过程中,消耗的性能未必比重排重绘少。v-dom的引入更多是为了让开发者对Dom拥有类似JS一样的灵活掌控。解放操纵Dom,面向数据驱动编码。
1. React 与 JSX
React是基于JSX,JSX则几乎拥有了JS所有的灵活度,在开发中我们也可以深感其便利,Dom中开一个大括号就可以写JS逻辑判断,甚至使用map动态生产列表。
JSX通过Balel编译形成数组,再使用React.createElement创建为节点。由此可见,JSX在React中的使用非常灵活。React对v-dom的处理也非常灵活,一切皆是组件。
但是,过度灵活就会付出更多的性能代价用于Diff Tree,虽然可以从组件层面进行Diff,避免渲染,但在组件内部,还是要逐一进行比较的,Reat很难去追踪一个组件里,哪一部分Dom是静态。为此,React16推出Fiber更新策略,采用时间分片和任务优先调度去解决长时间Diff导致主线程被占用,从而导致页面动画渲染以及各种点击事件被阻塞,带给用户卡顿感的问题。
2. Vue 与 template
Vue 3中使用Block Tree(区块树),将template划分为结构性指令v-for、v-if内部和外部,使用Array去追踪会发生改变的节点,极大的减少不必要的Diff操作。
Vue数据绑定,基于defineProperty,进行set,get。但JS希望对象更加稳定,而不是经常会被改动,这样有利于性能优化,因此Vue3将向ES6中的Proxy迁移,Proxy严格来说只是在被操作对象外部进行了一个包装拦截。因此,即使Fiber很优秀,但Vue可以通过更快,而不需要使用Fiber。···大概就是只要我跑得够快,Fiber就追不上我