vue与react组件的思考

前言

我最一开始是先学的react,然后也就前段时间开始学习vue,一开始给我的感受是两者很相似,react给我的感觉是灵活vue是一种死板的感觉。为什么有这种感觉呢,react有一种很强烈的欲望,all in js只要能够用够js写的,就全用js写,所以一切都很灵活,jsx很酷,高阶组件牛逼,es7的装饰器也是可以玩的飞起。反观vue,搞的.vue单文件还是尽量保留原来前端开发的模式,留下了templatescriptstyle三个最基本的东西,其实内部运作应该还是和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属性,同时存在templaterender的时候会忽视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>
    )
  }
})

一个需求引发的思考

通常我们写reactvue都是一个写一个组件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!"
        })
    }
}

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

vue的实现

先拿vue说,先写一个message.vue的组件文件,然后在index.js文件中把这个message.vue文件import进来,你可以试着打印下这个vue文件长得什么样,其实前面也分析过了,其实引进来的就是一个选项对象,而且<template></template>标签的内容也被弄成了render属性了,前面也铺垫过了vue.extend,这里把引入的选项对象传入vue.extend中就返回了一个扩展过的Vue类了,然后我们手动去new一个message的组件实例出来,可以传入一个propsData就能把数据传给到组件内部的prop中去,打印下实例就会发现定义在.vue文件中的dataprop之类的都有,这个时候我们只是实例化了一个实例,其实在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方法去做一些事情了。

总结

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

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

参考资料

  1. vue组件思考
  2. vue官网渲染函数
    原文作者:李梦克
    原文地址: https://segmentfault.com/a/1190000014398263
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞