加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 建站 > 正文

前端:Vue和React的优点分别是什么?两者的最核心差异对比是什么?

发布时间:2019-07-18 04:35:49 所属栏目:建站 来源:代码开发
导读:Vue template 对比 JSX 我认为这只是「解决同一个问题的不同实现思路」,完全可以由开发者的个人偏好来决定。退一步讲,Vue 中也不是不可以使用 JSX;同样,JSX 也不是无法实现 Vue template 的特性,比如模版指令,我们完全可以从工程化的角度实现: 当然

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

前端:Vue和React的优点分别是什么?两者的最核心差异对比是什么?
前端:Vue和React的优点分别是什么?两者的最核心差异对比是什么?
前端:Vue和React的优点分别是什么?两者的最核心差异对比是什么?

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

2.React 中事件处理函数中的 this 默认不指向组件实例。

3.Vue 事件系统.

Vue不多讲,大家看图:

前端:Vue和React的优点分别是什么?两者的最核心差异对比是什么?

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

前端:Vue和React的优点分别是什么?两者的最核心差异对比是什么?

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

第三点

预编译优化问题。

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

前端:Vue和React的优点分别是什么?两者的最核心差异对比是什么?
前端:Vue和React的优点分别是什么?两者的最核心差异对比是什么?

我关心的是:React 能否像 Vue 那样进行预编译优化??

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

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

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

前端:Vue和React的优点分别是什么?两者的最核心差异对比是什么?

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

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

我就用 Prepack 结合 React 尝了个鲜:

前端:Vue和React的优点分别是什么?两者的最核心差异对比是什么?

对比:

前端:Vue和React的优点分别是什么?两者的最核心差异对比是什么?

这不正是 React 梦寐以求的吗?

另外一个 React 的方向就是 fiber 时间分片了, 尤雨溪说过:“React 是伤害已经造成,无法自身在预编译阶段做到更多,时间分片这样的优化只是在弥补伤害”。其实作为 React 的粉丝,这里吹了这么久 Vue,我发表一下我的想法:这反倒算是 React 多管齐下的一个做法。最后,上一个借助 Babel plugin AST 实现一个类似预编译优化:remove inline functions 的小例子。

前端:Vue和React的优点分别是什么?两者的最核心差异对比是什么?

预编译后:

前端:Vue和React的优点分别是什么?两者的最核心差异对比是什么?

(编辑:核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读