什么场景下使用Render函数，如何配置JSX

前言

这些天很久没更文了，最近又迷上打CF，耽搁了写文时间（打游戏真的有瘾），仍是劝你们合理安排游戏时间（反正我是控制不住，哈哈哈）。javascript

哈哈哈，固然有兴趣的小伙伴加我wx，来运输船约一下哦，"北部大区"。html

回归正题。前端

Render函数

render函数是组件渲染的重要核心，它跟template模板开发同样，只不过这种形式开发，它(render)更接近底层，这样能让Vue编译时少转换一次。vue

让咱们来看一下哪里能用到render函数。java

咱们都知道Vue项目入口文件main.js里面有个render函数长下面这样，将项目的App根组件，挂载到根实例上经过render渲染。node

new Vue({
  render: h => h(App)
}).$mount('#app')
复制代码

咱们来解刨一下render函数身体。webpack

render函数返回值是一个VNode -> "virtual node"虚拟节点git
render函数的参数是一个createElement函数github
- createElement返回值也是一个VNode节点
- createElement函数的参数有三个
  - 第一个标签名称
  - 第二个属性值
  - 第三个标签子级元素

代码演示：web

index.js

export default {
    data() {
        return {
            name: '蛙人'
        }
    },
    render(createElement) {
       	return createElement(
            "div", 
            { attrs: {title: "蛙人"} }, 
            [
                createElement("span", null, "蛙人")
            ]
        )
    }
}
复制代码

main.js

import config from "./index.js"
Vue.component("test", config)
复制代码

上面会调用标签会建立出一个div带有span子级的内容，注意createElement第二个参数属性这里，这里不能乱写，必须遵照官网风格点击这里。

固然这里确定有人会问，这样写有什么用，跟template写不同嘛，render函数这样写还麻烦可读性不强。

分状况，有时候用render更加灵活，咱就拿官网最典型的案例来举个例子。

封装一个组件，进行传入数字参数，就显示数字参数的标签，你确定会先想到这样。

<template>
    <div> <h1 v-if="num == 1"></h1> <h2 v-if="num == 2"></h2> <h3 v-if="num == 3"></h3> <h4 v-if="num == 4"></h4> <h5 v-if="num == 5"></h5> <h6 v-if="num == 6"></h6> </div>
</template>
复制代码

上面这样实现是没问题的，可是代码会冗余，一堆判断。咱们再来看一下render函数的实现

<script>
  render: function (createElement) {
    return createElement(
      'h' + this.num,
    )
  },
  props: {
    num: {
      type: Number,
      required: true
    }
  }
</script>
复制代码

上面两种都实现了一样的功能，是否是render函数这种方式看起来要简洁的多。因此通常用render函数封装东西是比较灵活的，尤为是配置和模板分离。深刻理解配置这里。

什么是JSX

JSX是JavScript和XML结合一种的格式，是JavaScript的扩展语法。说白了就是能够在JavaScript代码中使用JSX。JavaScript在解析JSX时会先建立虚拟DOM，JSX最后会被编译为JavaScript代码执行。

为何要用JSX

有的人确定以为用render函数写若是嵌套子级太多层看着太别扭了，可读性太差。

export default {
    render(createElement) {
       	return createElement(
            "div", 
            { attrs: {title: "蛙人"} }, 
            [
                createElement(
                    "span", 
                    null, 
                    "蛙人"
                ),
                createElement(
                    "span", 
                    null, 
                    createElement(
                        "b", 
                        null, 
                        "前端娱乐圈"
                    )
                ),
                createElement(
                    "span", 
                    null, 
                    createElement(
                        "b", 
                        null, 
                        createElement(
                            "i", 
                            null, 
                            "关注前端娱乐圈"
                        )
                    )
                )
            ]
        )
    }
}
复制代码

好比上面这种，嵌套多层，可读性太差，时间一长本身还得捋半天。

因此为了解决这问题，JSX就登场了，JSX至关于就是createElement的语法糖，这种形式能够直接使用template模板那种格式在render函数里写。

咱们用这种形式来还原一下上面的createElement写的，是否是这种很简洁易读。

export default {
    render() {
        return (<div> <span>蛙人</span> <span> <b>前端娱乐圈</b> </span> <span> <b> <i>关注前端娱乐圈</i> </b> </span> </div>)
    }
}
复制代码

JSX和Render函数有什么不一样

除了写法不同外，没什么不一样，属性都是遵循Vue文档上的。

咱们来使用JSX语法，看看怎么使用，这里玩过React的同窗估计都会使用。

export default {
	data() {
		return {
			name: "前端娱乐圈",
			dataList: {
				title: "前端娱乐圈",
				href: "www.baidu.com"
			}
		}
	},
    render() {
        return <div onClick={this.xxx} {...{attrs: this.dataList}}>{ this.name }</div>
    }
}
复制代码

使用

若是你的项目是Webpack搭建，babel@6的状况

npm i @babel/core @vue/babel-preset-jsx babel-loader
复制代码

根目录.babelrc文件

{
	"plugins": ["transform-vue-jsx"]
}
复制代码

webpack.config.js

{
    test: /\.js/,
    use: "babel-loader"
}
复制代码

若是你的项目是Webpack搭建，babel@7的状况

npm i @babel/core @vue/babel-preset-jsx babel-loader @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
复制代码

根目录.babelrc文件

文档说明babel7兼容JSX问题

{
	"presets": ["@vue/babel-preset-jsx"]
}
复制代码

webpack.config.js

{
    test: /\.js/,
    use: "babel-loader"
}
复制代码

若是你的项目是Vue-cli

最新版本的cli是会默认支持JSX语法的，若是你的版本较老请跟上面同样的配置。

npm i @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
复制代码

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}
复制代码

结语

感谢观看，有问题随时找我哈，若是有想运输船约一下的记得私聊我哦，嘿嘿

感谢

谢谢你读完本篇文章，但愿对你能有所帮助，若有问题欢迎各位指正。

我是蛙人(✿◡‿◡)，若是以为写得能够的话，请点个赞吧❤。

感兴趣的小伙伴能够加入 [ 前端娱乐圈交流群 ] 欢迎你们一块儿来交流讨论

写做不易，「点赞」+「在看」+「转发」 谢谢支持❤

往期推荐

《聊聊在Vue项目中使用Decorator装饰器》

《分享15个Webpack实用的插件！！！》

《手把手教你写一个Vue组件发布到npm且可外链引入使用》

《分享12个Webpack中经常使用的Loader》

《聊聊什么是CommonJs和Es Module及它们的区别》

《这些工做中用到的JavaScript小技巧你都知道吗？》

《【建议收藏】分享一些工做中经常使用的Git命令及特殊问题场景怎么解决》

参考

blog.csdn.net/sansan_7957…

cn.vuejs.org/v2/guide/re…