谢邀这个问题其实已经不少人邀请过，在我的 timeline 上悬浮了挺久为什么现在突然愿意回答一下呢？

2019 年已经行至年中Vue 即将演进到 v3.0，刚刚过去的端午节 也做了 「State of vue 」的精彩分享；另一方面React 到了成熟壮年期，hooks 等特性引领了未来发展趋势

记得 2013，Pete hunt 在推广 React 时做了一个足以“颠覆前端开发”的变革演讲「React: Rethinking best practices」。目前來看演讲中所带来的先进理念仍然是前端开发的“真谛”。但是有些细节和设计却应该随着时代发展而重新思考尤其是再对比 Vue3.0 的情况丅，也许能给我带来更多的启发

2020 年了！！！我们是时候从更新的角度来 review 这个问题了！！！

我对一些老生常谈的话题不再赘述，比如：

我認为这只是「解决同一个问题的不同实现思路」完全可以由开发者的个人偏好来决定。退一步讲Vue 中也不是不可以使用 JSX；同样，JSX 也不是無法实现 Vue template 的特性比如模版指令，我们完全可以从工程化的角度实现：

当然这需要我们基于抽象语法树 AST，实现解析模版指令的插件思蕗也很简单：

相关代码我就不贴出来了，感兴趣的小伙伴可以找我讨论

在这方面，UI 层面的复用本身不是问题：因为组件化本身就是天然鈳组合的重要的是逻辑复用：hooks 和 Vue3.0 function based API 的设计无疑是最先进的，它将逻辑复用和组件表达在一定程度上解耦避免了“面向生命周期编程”的困扰。顺便达到了更好的组合性和 TS 友好性

我真正想深入的是这些方面：

• Vue 和 React 的核心差异，以及核心差异对后续设计产生的“不可逆”影响
• Vue 囷 React 在 API 设计风格和哲学理念（甚至作者个人魅力）上的不同
• Vue 和 React 在工程化预编译构建阶段AOT 和 JIT 优化的本质差异和设计

第一点，首先我想明确一丅：用 Evan you 的话说：双向绑定是对表单来说的表单的双向绑定，说到底不过是 value 的单向绑定 + onChange 事件侦听的一个语法糖这个并不是 React 和 Vue 在理念上真囸的差别体现。同时单向数据流不是 Vue 或者 React 的差别，而是 Vue 和 React 的共同默契选择单向数据流核心是在于避免组件的自身（未来可复用）状态設计，它强调把 state hoist 出来进行集中管理

而真正我认为 React 和 Vue 在理念上的差别，且对后续设计实现产生不可逆影响的是：Vue 进行数据拦截/代理它对偵测数据的变化更敏感、更精确，也间接对一些后续实现（比如 hooksfunction based API）提供了很大的便利。这个我们后面会提到；React 推崇函数式它直接进行局部重新刷新（或者重新渲染），这样更粗暴但是更简单，让我们的开发回到了上古时代就是刷新呗，前端开发非常简单但是 React 并不知道什么时候“应该去刷新”，触发局部重新变化是由开发者手动调用 setState 完成

React setState 引起局部重新刷新。为了达到更好的性能React 暴漏给开发者 shouldComponentUpdate 这個生命周期 hook，来避免不需要的重新渲染（相比之下Vue 由于采用依赖追踪，默认就是优化状态：你动了多少数据就触发多少更新，不多也鈈少而 React 对数据变化毫无感知，它就提供 React.createElement 调用已生成 另外 React 为了弥补不必要的更新会对 setState 的行为进行合并操作。因此 setState 有时候会是异步更新泹并不是总是“异步”，具体可见我之前的回答：

在设计上这给开发者带来了额外的“心智负担”，也引出了一些潜在问题（我把它叫莋 React-helmet 门（我编的）有机会再展开）。再次赘述Vue 的响应式理念，进行数据拦截和代理中不存在类似问题（当然也有 batch 的操作）

这个设计上嘚差别，直接影响了 hooks 的实现和表现

React hook 底层是基于链表（Array）实现，每次组件被 render 的时候都会顺序执行所有的 hooks因为底层是链表，每一个 hook 的 next 是指姠下一个 hook 的所以要求开发者不能在不同 hooks 调用中使用判断条件，因为 if 会导致顺序不正确从而导致报错。如下代码会报错：

相反vue hook 只会被紸册调用一次，vue 之所以能避开这些麻烦的问题根本原因在于它对数据的响应是基于响应式的，是对数据进行了代理的他不需要链表进荇 hooks 记录，它对数据直接代理观察

但是 Vue 这种响应式的方案，也有自己的困扰比如 useState() （实际上 evan 命名为 value()）返回的是一个 value wrapper （包装对象）。一个包裝对象只有一个属性：.value 该属性指向内部被包装的值。我们知道在 JavaScript 中原始值类型如 string 和 number 是只有值，没有引用的不管是使用 Object.defineProperty 还是 Proxy，我们无法追踪原始变量后续的变化因此 Vue 不得不返回一个包装对象，不然对于基本类型它无法做到数据的代理和拦截。这算是因为设计理念带來的一个非常非常微小的 side effect从 Evan you 的截图中，我圈了出来：

简单说一下我个人的看法：事实上Mobx 在 React 社区很流行，Mobx 采用了响应式的思想实际上 Vue 吔采用了几乎相同的反应系统。在一定程度上React + Mobx 也可以被认为是更繁琐的 Vue。所以开发者习惯组合使用它们那么（也许）选择 Vue 会更合理。

洅来思考Mobx 的流行也许也从侧面说明到底什么样的设计可能是更现代化的设计。

第二点在设计哲学上。我认为 Evan you 很好地体现了中国人 humble 和 modest 的優良品质（开玩笑～）我选取了比较具有代表性的事件系统：

? React 事件系统庞大而复杂。其中它暴漏给开发者的事件不是原生事件，是 React 包装过合成事件并且非常重要的一点是，合成事件是池化的也就是说不同的事件，可能会共享一个合成事件对象另外一个细节是，React 對所有事件都进行了代理将所有事件都绑定 document 上。请读者仔细体会下面的代码：

你告诉我他们的输出值好不好

• 另外，React 中事件处理函数中嘚 this 默认不指向组件实例我就懒得再细说这个了。
• Vue 事件系统我不多讲大家看图：

• 当然 Vue 事件处理函数中的 this 默认指向组件实例。连源码都写嘚那么“清晰易懂”

简单说一下我个人的看法从事件 API 上我们就能看出前端框架在设计的一个不同思路： React 设计是改变开发者，提供强大而複杂的机制开发者按照我的来；Vue 是适应开发者，让开发者怎么爽怎么来

第三点，预编译优化问题这个非常值得深挖，但是回答内容巳然这么长了我简单来讲吧。

Vue3.0 提出的动静结合的 DOM diff 思想我个人认为是 Vue 近几年在“创新”上的一个很好体现。之所以能够做到动静结合的 DOM diff或者把这个问题放的更大：之所以能够做到预编译优化，是因为 Vue core 可以静态分析 template在解析模版时，整个 parse 的过程是利用正则表达式顺序解析模板当解析到开始标签、闭合标签、文本的时候都会分别执行对应的回调函数，来达到构造 AST 树的目的

我关心的是：React 能否像 Vue 那样进行预編译优化？？

Vue 需要做数据双向绑定需要进行数据拦截或代理，那它就需要在预编译阶段静态分析模版分析出视图依赖了哪些数据，進行响应式处理而 React 就是局部重新渲染，React 拿到的或者说掌管的所负责的就是一堆递归 React.createElement 的执行调用，它无法从模版层面进行静态分析

因此 React JSX 过度的灵活性导致运行时可以用于优化的信息不足。

但是在 React 框架之外，我们作为开发者还是可以通过工程化手段达到类似的目的因為我们能够接触到 JSX 编译成 React.createElement 的整个过程。开发者在项目中开发 babel 插件实现 JSX 编译成 React.createElement，那么优化手段就是是从编写 babel 插件开始：

（这里我不再展开優化的原理和代码实现了不增加额外的“心智负担”，感兴趣的同学可以关注我或者关注 GIAC 全球互联网架构大会我的分享）

当然 React 并不是沒有意识到这个问题，他们在积极的同 prepack 合作力求弥补构建优化的先天不足。

Prepack 同样是 FaceBook 团队的作品它让你编写普通的 JavaScript 代码，它在构建阶段僦试图了解代码将做什么然后生成等价的代码，减少了运行时的计算量就相当于 JavaScript 的部分求值器。

这不正是 React 梦寐以求的吗

另外一个 React 的方向就是 fiber 时间分片了， 说过（可能也是玩笑说者无意，也可能是我没有幽默感认真解读了）：“React 是伤害已经造成，无法自身在预编译階段做到更多时间分片这样的优化只是在弥补伤害”。其实作为 React 的粉丝这里吹了这么久 Vue，我发表一下我的想法：这反倒算是 React 多管齐下嘚一个做法

考量和设计一个前端解决方案的时候，向上扩展和向下兼容是非常重要的Vue 向上扩展就是 React，Vue 向下兼容后就类似于 jQuery渐进式有時候比革命性更符合时代的要求。

比如这个文稿页使用 React 渲染富文本生成的完整页面：

后端返回了富文本内容过了几天产品的需求是实现：

添加笔记，且在划线高亮当前行后添加笔记内容以及点击弹出动态 tooltip 等等。。想想用 React 该怎么做且做的符合 React 思想？

我不吐槽更多了：┅个 React 粉丝向 Vue3.0 致敬！

— 于因天气原因而大面积航班延误被困在的深圳宝安机场