阅读 2133

从事前端半年,我是这样看待三大框架的

Vue、Angular、React对比

前端在复杂性日增的今天,三个框架被我们熟知,Vue、React、Angular,三个经常经常被我们拿来讨论,对比,比如学习哪个?

前端框架解决的核心问题

在我入门的时候,第一个学习的就是Vue,基本跳过了后台php、jsp结合JQuery,三个框架成为了开发三选一的问题,在后面的工作和学习中,我逐渐意识到前框框架解决的核心问题在于数据和视图同步,我也发现挺多人意识到了这一点,并且在向大众普及这个前端需要解决的核心问题

前端框架如何解决数据向视图的复杂映射

我们说目前前端的核心问题是数据和视图的同步,这里我姑且采用了一个个人觉得更适合的名词,数据到视图的映射,那么框架们是以怎么样的思路思考这个问题的呢,我们这里开展一个功能实现的讨论,首先是JQuery实现,我们需要更新输入框值

直接命令式

// 当前用户名的值
let curUsername = 'cj'
// 找到类名为username的元素
let username = $('.username')
// 设置username为cj
username.val(curUsername)
复制代码

按照以下步骤,即可完成我们的小需求

  • 定义修改的值

  • 找到需要修改的元素

  • 修改元素的值为我们给定的值

问题

这里找到元素、设置元素的值,明显是很命令式的写法,如果我们需要多次操作,一个简单的方法就是多次重复这段代码

使用函数维护

function updateUsername(username) {
  let usernameInput = $('.username')
  usernameInput.val(username)
}

let curUsername = 'cj'
updateUsername(curUsername)
复制代码

从上述代码可以抽象出,我们只需要关心改变的值和改变的元素,其他细节是我们不需要知道的,中间选取元素、修改元素在过程中可以认为是完全抽离成一个新的抽象,下面就是基于这一点的思考

更深的思考

既然我们关注的点在于目标元素、数据,这两者可以在编译时确定,只要我们更新这个数据,系统就更新对应引用这个数据的元素,从而将我们从指定元素、修改元素的重复劳动中脱离出来,这是一个基本的思路,当然Vue采用的是上述的思路,而React采用的是暴力diff的方式

目前实现

  • Vue绑定数据和节点在一起,在数据更新时,更新对应的元素

  • React比较直接,直接对整个组件diff,找到前后不同的地方,内部根本不需要知道数据和节点的对应关系

  • Angular,接触很少,目前好像是脏检查和proxy结合

关于Virtual DOM解决的问题

目前来说,Virtual DOM 和配套的diff算法,逐渐出现在大家面前,这里我们为什么要引入这两套技术?,大家其实看的也多了,解决DOM更新缓慢,跨平台等,那么它引入的初心是什么,这还得看React为什么要引入它

为什么需要Virtual DOM

Virtual DOM是由React推出时引入的技术,个人理解是,React系统不知道数据对应的节点是哪些,所以按照常规方式来说,肯定是要更新全部节点,React需要一种在操作节点之前用于性能优化的一套方案,这就是React引入Virtual DOM技术的初心

Vue为什么引入Virtual DOM

目前很多Vue响应式基本实现会像以下一样:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div id='app'>
        <h3>姓名</h3>
        <p>{{name}}</p>
        <h3>年龄</h3>
        <p>{{age}}</p>
    </div>
</body>
</html>
<script>
document.addEventListener('DOMContentLoaded', function(){
    let opt = {el:'#app', data:{name:'检索中...', age:30}}
    let vm = new Vue(opt)
    setTimeout(() => {
        opt.data.name = '王永峰'
    }, 2000);
}, false)
class Vue{
    constructor(opt){
        this.opt = opt
        this.observe(opt.data)
        let root = document.querySelector(opt.el)
        this.compile(root)
    }
    // 为响应式对象 data 里的每一个 key 绑定一个观察者对象
    observe(data){ 
        Object.keys(data).forEach(key => {
            let obv = new Observer() 
            data["_"+key] = data[key]
            // 通过 getter setter 暴露 for 循环中作用域下的 obv,闭包产生
            Object.defineProperty(data, key, {
                get(){
                    Observer.target && obv.addSubNode(Observer.target);
                    return data['_'+key]
                }, 
                set(newVal){
                    obv.update(newVal)
                    data['_'+key] = newVal
                }
            })
        })
    }
    // 初始化页面,遍历 DOM,收集每一个key变化时,随之调整的位置,以观察者方法存放起来    
    compile(node){
        [].forEach.call(node.childNodes, child =>{
            if(!child.firstElementChild && /\{\{(.*)\}\}/.test(child.innerHTML)){
                let key = RegExp.$1.trim()
                child.innerHTML = child.innerHTML.replace(new RegExp('\\{\\{\\s*'+ key +'\\s*\\}\\}', 'gm'),this.opt.data[key]) 
                Observer.target = child
                this.opt.data[key] 
                Observer.target = null
            }
            else if (child.firstElementChild) 
            this.compile(child)
        })
    }    
}
// 常规观察者类
class Observer{
    constructor(){
        this.subNode = []    
    }
    addSubNode(node){
        this.subNode.push(node)
    }
    update(newVal){
        this.subNode.forEach(node=>{
            node.innerHTML = newVal
        })
    }
}
</script>
复制代码

上述代码是Vue1的核心实现简化,每个数据知道引用自己的精确节点,Vue的实现是在每个节点编译,引用数据时都为其生成一个Watcher,显而易见,为每一个引用数据的节点都要生成一个Watcher,是有比较大的内存压力,如何解决,很简单,将粒度提升到组件级别,将低粒度的diff交给Virtual DOM

前端框架认知反思

框架解决的核心是选择节点,操作节点这一过程的抽象,将其隐藏在框架实现之内,我们只需要关注数据和节点的对于关系即可,其余技术是在这个大背景下的优化。

数据驱动方案

数据驱动方案决定了其性能以及后续性能与优化方向,数据驱动是前端的一大潮流,已经成为了框架必备特性了,因为从前面的讨论得知,操作节点、修改节点已经可以很好地进行抽象,优化。这里简单讨论一下三个框架的数据驱动方案

Vue

数据驱动设计

Vue2的数据驱动还是数据劫持和Virtual DOM方案结合,即保持了较为精准的更新能力又保持了内存使用的低水平,Vue这种方式有着天然的性能优势,所以大家在对组件的认知上不仅仅要知道组件复用才被抽取,其实,组件可以进行良好的代码组件,维持适当大小的组件规模,还可以利用Vue2的数据驱动方案进行一个天然的性能优化,关于这一点具体的情况,后面我会研究分离组件和整体的性能差异

模板优化

Vue使用模板时,还可以获得静态优化的优势,在Vue3更加优化了模板编译

React

数据驱动设计

React更新采用了Virtual DOM,解决了数据更新时,完全替换的问题,实现了局部更新的可能,但是对于数据更新这一层薄弱,或者说,完全不知道数据变了,需要我们主动setState,这就产生了后续需要在生命周期交由开发者避免不必要的渲染优化,这里还有一个重要的点,就是时间分片,React推出了Fiber,用于优化视图更新时的性能问题,这里多说一句,Vue3本来也实现了时间分片,考虑到收益不大,又移除了,这应该是本身Vue的数据驱动方案的优势造成时间分片的收益较低

模板优化

由于采用了JSX,没法提供足够的信息在编译时进行优化,但是可以尝试在JSX 编译成 React.createElement 的整个过程进行优化,目前 FaceBook 推出了Prepack 用于这个过程的优化

Angular

数据驱动设计

angular9目前采用了脏检测和proxy结合的方式,基本没使用,不予评价

模板优化

Angular支持模板,随着V9版本发布,ivy渲染引擎推出,用于优化,也算是一个弥补

数据驱动设计反思

实现数据驱动的方式有很多,Vue和Angular走得是类MVVM的形式,React实质上不可以称为MVVM框架,就如它所说的,他就是一个视图层框架,数据驱动的不同方式各有优劣,个人能力水平有限,也说不出谁好谁坏,但是可以看出的是,每个数据驱动的方式都有存在一点缺陷,框架本身也针对这些缺陷在优化

组件化设计

组件化除了数据驱动另外一大前端趋势,框架如何设计组件也是一个关注点

Vue

定义

Vue.component("my-component", {
  props:['props1'],
  template: `
    <div @click="clickHandler">
      <slot><slot>
    </div>
  `,
  methods: {
    clickHandler() {
      this.$emit('click')
    }
  }
});
复制代码

使用

<my-component @click="clickHandler" :props1="props1" data-x="dataX">
  <template #default>slot</template>
</my-component>
复制代码

数据入口

Vue在组件上划分了props和attrs,组件内部提供了props选项来捕获特点的attr转换为props,其余会成为attrs直接附加到组件根节点上,实质上,这是一种默认大于配置的想法,默认无关的属性应该附加到根节点,但是总会有少数情况,所以后续Vue提供了inheritAttrs来控制attr作用元素

组件事件

Vue在组件之前的事件采用了发布订阅模式EventEmitter来实现,这个模式比起直接传递回调函数,有以下好处

  • 在认知上,区分了触发者和响应者

组件内容替换

Vue提供了slot机制,用于提供扩展组件内部节点,值得一提的是,scopedSlot机制

React

定义

function Square(props) {
  return (
    <button onClick={props.onClick}>
      {props.props1}
    </button>
    <div>props.slot<div>
  );
}
复制代码

使用

<Square value={} onClick={() => this.handlerClick(i)  slot={}}/>
复制代码

数据入口

React没有区分Props和attrs,只是将数据解析好,完全交给开发者去控制

组件事件

React采用了将父组件直接传入子组件的方式,个人认为像Vue那样的EventEmitter对于开发者更加友好

组件内容替换

React没有为slot提供特殊语法,可以直接将slot以普通属性的方式传递进来,剩下的交由组件内部处理

Angular

定义

@Component({
  // 省略
})
export class ProductAlertsComponent implements OnInit {
  // 定义数据入口
  @Input() product;

  // 定义外部事件
  @Output() notify = new EventEmitter();
  constructor() { }

}
复制代码
<div>
  <button @click="notify.emit()"></button>
  <ng-content></ng-content>
</div>
复制代码

使用

<component
  (notify)="onNotify()"
  [product]="product">
  <div>slot</div>
</component>
复制代码

数据入口

Angular也只是提供了一个数据入口

组件事件

Angular类似Vue一样,使用了发布订阅模式来管理组件之间的事件

组件内容替换

Angular提供了类似slot的机制来扩展组件节点能力

组件化设计反思

毫无疑问,组件化一定是未来的持续保持的前端框架特性,如何设计一个良好的组件,这是值得思考的,三个框架也有自己的思考,,这里不予评价

框架特性

这一点我想只是从我的认知来讲,框架除去数据驱动和组件化设计之外,它对开发者带来哪些特性,能力有限,这里分析不是很深入

Vue

Vue 是适应开发者,让开发者怎么爽怎么来,Vue很多特性都是基于开发者角度去开发的,比如attr和props,Angular和React就不会这样处理,完全交给开发者去处理细节,所以就导致,Vue好像看起来没啥框架上的特点,实质上,Vue将一些对开发者认知不友好的处理,内置到了框架之内

React

React 设计是改变开发者,提供强大而复杂的机制,当然这么做,就会社区非常繁荣,后续也可以吸收一些良好的范式,目前我也在学习React,不得不说,React更像是学院派,社区能够诞生很多不错的Idea

  • 推崇函数式编程

Angular

Angular给我最深的印象是Service和DI的机制,它也为开发者考虑了很多,很多库直接用官方的就可以了,完全不需要考虑用哪个,Angular的脚手架用起来还是挺舒服的

  • Service将与视图渲染无关的逻辑提取到单独代码中

  • DI解决了对象管理混乱的问题

  • 更加贴近java那套OOP

总结

从前端框架解决的问题出发,我们反思了数据驱动、组件化等框架必备特性,脱去这两点,剩余的框架特性,推崇的编程范式,也是值得我们品味的,比如Angular视图渲染逻辑和数据分离,在React、Vue我们也可以借鉴,三大框架未来在保持数据驱动和组件化特性下,框架特性这一块,很可能还是要统一走一套,比如Vue3的hook和React的hook,这一点是对开发者友好的,学习、认知成本没那么高,有人会在这种文章上说,谁抄谁这种话,我认为试试不妥的,希望大家能够以一个更高层的视觉看到目前前端的发展。

文章分类
前端
文章标签