vue与react组件的思考

前言

我最一开始是先学的react，然后也就前段时间开始学习vue，一开始给我的感受是两者很相似，react给我的感觉是灵活，vue是一种死板的感觉。为什么有这种感觉呢，react有一种很强烈的欲望，all in js只要能够用够js写的，就全用js写，所以一切都很灵活，jsx很酷，高阶组件牛逼，es7的装饰器也是可以玩的飞起。反观vue，搞的.vue单文件还是尽量保留原来前端开发的模式，留下了template、script、style三个最基本的东西，其实内部运作应该还是和react类似。

react

react看的各种道听途说的文章，这玩意大概是怎么玩的呢？简单的说jsx被解析成createElement的方法，里面传到参数啊什么的就是告诉react怎么渲染之类，然后方法返回一个虚拟dom,大概是这么搞的，具体细节我也不是太懂。

vue

vue一开始让我挺晕的，官网的学习教程和一般写的项目不太一样，官网教程的例子没有单文件，全是在选项对象中加入一个template属性，一般的项目开发的都是用的.vue的单文件。一开始我是没太理解.vue这文件到底是怎么玩，只是按着这样写，不理解原理好像也能够基本完成自己想要的效果。

最近看了一些文章以及看了好几遍官网的api，官网的api还是很有必要每一个都看一遍的，之前大致看一遍感觉好多东西都没有见到过，别人代码看多了，发现很多没用的api还是很强的。下面讲讲我对vue的一些理解。

vue是怎么玩的呢？每一个vue组件都是一个Vue实例，这样说也不是很准确，应该每一个自己写的组件都是通过调用Vue.extend继承Vue后扩展出来的新的类的实例，想一想怎么定义一个vue组件，就是调用了Vue.component方法，

// 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))

// 注册组件，传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })

// 获取注册的组件 (始终返回构造器)
var MyComponent = Vue.component('my-component')

一般情况下我们写的.vue单文件暴露出来的就是一个选项对象，这个方法的内部自动调用了Vue.extend。所以.vue单文件本质上是vue-loader去把<template></template>里的内容转成字符串形式，塞到<scirpt></script>里面的export default {}的对象里面的template去，当然了，这还没有完，template属性里面的字符串也可以说是一种糖，vue内部是要调用Vue.compile去做一次转换，最终把template的值转换成render，这个属性的值是一个方法，这里就和react统一了，用是有个同名的函数createElement去生成Vnode。所以在选项对象中，可以不给出template属性而是给出render属性，同时存在template和render的时候会忽视template。

看看官网render用法：

var getChildrenTextContent = function (children) {
  return children.map(function (node) {
    return node.children
      ? getChildrenTextContent(node.children)
      : node.text
  }).join('')
}

Vue.component('anchored-heading', {
  render: function (createElement) {
    // create kebabCase id
    var headingId = getChildrenTextContent(this.$slots.default)
      .toLowerCase()
      .replace(/\W+/g, '-')
      .replace(/(^\-|\-$)/g, '')

    return createElement(
      'h' + this.level,
      [
        createElement('a', {
          attrs: {
            name: headingId,
            href: '#' + headingId
          }
        }, this.$slots.default)
      ]
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

看的出来这种直接写render比起template要麻烦的多，所以为了简化这种写法就搞出来了一个jsx写法，这里又和react又统一了。

jsx用法:

import AnchoredHeading from './AnchoredHeading.vue'

new Vue({
  el: '#demo',
  render: function (h) {
    return (
      <AnchoredHeading level={1}>
        <span>Hello</span> world!
      </AnchoredHeading>
    )
  }
})

一个需求引发的思考

通常我们写react和vue都是一个写一个组件customComp，然后在别的组件要用的时候都是直接<customComp/>写进去的，但是有的组件就不能这么做了，比如一个提醒的message组件，我希望在react中是这样调用，像是一个工具类函数一般使用：

import message from 'message.js'
import React from 'react'

class XXXcomponent extends React.Component{
    ...
    componentDidMount(){
        message.info({
            type:'success',
            text:'hello react!'
        })
    }
}

在vue中我希望是这样的调用的：

{
    mounted(){
        this.$message({
            type:'success',
            text:"hello vue!"
        })
    }
}

在看了一些三方库的这种组件的实现方式，来回折腾了一段时间，对react和vue理解的更深了一些。

vue的实现

先拿vue说，先写一个message.vue的组件文件，然后在index.js文件中把这个message.vue文件import进来，你可以试着打印下这个vue文件长得什么样，其实前面也分析过了，其实引进来的就是一个选项对象，而且<template></template>标签的内容也被弄成了render属性了，前面也铺垫过了vue.extend，这里把引入的选项对象传入vue.extend中就返回了一个扩展过的Vue类了,然后我们手动去new一个message的组件实例出来，可以传入一个propsData就能把数据传给到组件内部的prop中去，打印下实例就会发现定义在.vue文件中的data、prop之类的都有，这个时候我们只是实例化了一个实例，其实在document上是找不到这个节点的，只需要最后在实例上调用$mount(el)，就能把实例挂载到document上去了。直接修改实例上data里面定义的值，会发现也是响应的，至此这个message组件我们能够手动去控制这个组件了，具体细节该怎么暴露出api来个外部调用就不说了。

//伪代码
import message from 'message.vue'
import Vue from 'vue'

const Constructor = Vue.extend(message) //扩展出一个新的类

const options = {
    innerProps:"inner props"
}

const instance = new Constructor({propsData:options})  //创建一个实例，也可以传给一个props

instance.$mount(document.body) //组件挂在body下

//如果组件内部methods有方法，实例就能直接调用

// instance.innerFunction()

react实现

大体上是和vue类似，有几个地方有变化，引进来的组件，因为是用class extends React.Component的形式写的，看的出来已经是扩展过react后组件类了，直接去new就能拿到实例了,或者是用React.createElement传入组件拿到虚拟dom。和vue不同的事，vue有个$mount方法帮助挂载组件到指定的位置，在react中要用到react-dom里面的render方法，传入前面拿到的虚拟dom以及要挂载的位置，这个方法会返回这个组件实例，这个时候就可以调用组件实例的setState方法去做一些事情了。

总结

react、vue随便用用带还是挺简单的，我的观点是api文档只能教会你70%的东西，但是你有了这70%的功力，大部分的东西基本都没什么问题，但是文档之外的30%，往往是最难学的，可能需要剥开vue、react简单易用的外表，来回看官方文档，每次都能有新的体会，翻看第三方优秀的组件库是最佳学习的方案，深入地去理解内部原理才能真正的掌握。

这种组件函数式用法在我的fantastic-carnival(一个博客系统)中有体现：
其中有一个loadingBar组件是一个加载条的组件，参考的是iview组件库中的vue实现，同时我用react也实现了一遍。

• vue的loadingBar实现
• vue的message实现
• react的lonadingBar实现

参考资料

1. vue组件思考
2. vue官网渲染函数