react与vue

Posted 2020-09-24 狙击手

vue的选择居于react与angular之间，框架自身的语法比react多一点，但是又比angular少一点。

也正是由于选择的不同，所呈现出来的写法与思考方式就一定会有所差异，不论优劣，但肯定会导致不同的偏好。

react的简单在于，它的核心API其实非常少。所以我们会看到很多地方在说react其实是一个UI库，并不是一个完整的框架。他只是告诉我们如何创建组件以及组件之间如何进行数据传递。甚至于创建组件的方式正是使用ES6的class语法(createClass将会在react 16被丢弃)。

因此开发中react的使用对于ES6的语法依赖非常高。因为react自身本来就没有多少强限制的语法。我们只需要掌握组件里的props，state，ref，生命周期，就好像没有过多额外的知识了。就连如果想要在jsx模板来遍历渲染，还得使用原生的map方法。而react的高阶组件，理解之后发现，其实就是javascript函数式编程中所涉及到的思维方式。

所以在我看来，react的最大特点就是简单并且与原生JavaScript非常接近。即给开发者带来的束缚非常少。一个功能的实现，如果你知道使用原生JavaScript如何实现，那么你就一定能够很轻松的知道使用react如何实现。

当然，核心API简单并不代表上手容易。在使用之初，如果你经验缺乏，那么你用react写出来的页面，性能可能会非常差。因为无意识的，你的组件可能会有非常多的多余的渲染。

比如很多人在学习react的时候，会接触到一个倒计时的例子，这个例子使用修改组件中state的方式来实现。但是其实后来大家会慢慢知道，这种方式是非常错误的。因为state的每次修改，都会导致组件及其所有子组件的重新渲染。这是成本非常高的行为。当然，我还知道很多人，在调试react的时候，由于高频的重复渲染直接把浏览器都卡死的。这些问题都是尤雨溪所担心的限制过少带来的。

网上有的自以为牛逼的人，用着react/vue这样的框架，其实写着shi一样的代码，恐怖的是他们还嘲讽这嘲讽那的。还遇到过一个人，口口声声说自己用了angular好多年，说angular真的好垃圾啊，性能好差啊，什么什么的各种黑，结果连track by都不会用。喝！

而react由于没有真正意义上的双向绑定。因此在处理一些复杂场景会非常麻烦，比如复杂的表单验证。

而相对而言，vue提供的能力则更多一点，这些便捷的能力会让初学者感觉到非常的幸福，因为很多效果只需要一些简单的代码既可以实现。我大概列举几条我个人认为非常棒的能力：

• 统一管理的计算属性

JavaScript的表达式非常便利，无论是vue还是react，表达式的能力是必不可少的。但正如vue官方文档所说，在模板中放入太多的逻辑会让模板过重且难以维护。而vue的组件中提供了一个计算属性来统一管理表达式。

<template>

<div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

</template>

<script>

export default {
    name: ‘example‘,
    data () {
        return {
            message: ‘Hello‘
        }
    },
    computed: {
        reversedMessage: function() {
            return this.message.split(‘‘).reverse().join(‘‘)
        }
    }
}

</script>

• class的动态语法让我感觉非常爽

在实践中我们会发现非常多这样的场景，需要根据不同的状态来决定一个元素class的具体值。而如果仅仅只是简单的表达式或者条件判断在jsx模板中，例如下面这个样子就会让人感觉非常难受

<p className={active ? ‘note active‘ : ‘note‘}></p>

当稍微复杂一点的逻辑还这样处理就是难受到忍不了了。而vue中支持的语法则非常轻松的搞定了这个问题。

// 可以放在任何你觉得舒服的位置
const pcls = {
    active: active,
    note: true
}

<p class={pcls}></p>

这样我们继续添加更多的class名也不会造成额外的复杂度了。

当然，这仅仅只是一个工具方法就能搞定的问题，在使用react时，大家可以借助classnames来完成同样的功能。但vue是直接支持了。

• 双向绑定

由于react并不支持双向绑定，因此在复杂的表单验证时实现起来非常痛苦。而vue在以单向数据流为核心的同时，又没有完全抛弃双向绑定，这让在这样复杂的表单验证场景开发效率比react高出非常多。这也是vue省事儿的一个方面。

• 修饰符

我们在写事件处理逻辑时，常常需要e.preventDefault等操作。vue提供的修饰符功能可以帮助我们省去这些代码，极为方便。用多了就会发现，真TM好用。

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

当然，还有按键修饰符等，可以去官网进一步查看学习。

vue提供的方便可爱的语法糖还有很多，就不细说，大家可以在官网上一一体验。正如文章开头所说，vue会有一些语法限制，而这些语法限制在某种程度上来说降低了我们的开发成本，提高了开发效率。这大概也就是很多人认为vue更加简单易学的原因所在吧。

就从学习难易程度上来说，react之所以上手更加困难，主要的原因并不在于react本身，而在于围绕react的丰富的生态圈。正是由于react本身足够简单，所以我们需要掌握的react组件就更多。比如react-router，react-redux等。而且很多好用的，功能特别棒的组件在我们涉猎不广的时候都不知道。例如我在学习ant-design源码的时候，常常会惊讶于发现原来这里有一个组件可以这样用，真的好棒！而我在学习vue的时候又会惊讶的发现，原来这么棒的组件vue直接都已经支持了！

所以后来我才发现，原来vue与react既然如此相似。

我仍然更加偏好于react。但仅仅只是因为react的语法更加接近于ES6而已

学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流群
343599877，我们一起学前端！