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官网渲染函数