浅谈React16与Vue3

前言

最近对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就追不上我