render函数与JSX快速掌握

render函数

render: h => h(element|component)

h作为一个形参，是一个回调函数，可以拥有三个参数：

element | componenet props content

element | componenet

原生dom元素：div、span等，或是自定义组件

render: h => h(div, {
	style: {
		color: red
	}
}, 这是一个div)

component情况

render: h => h(myComponent)

props

属性、样式等，可省略

render: h => h(div, {
	class: [class1, {class2: true}],
	attrs: {
		id: box1
	},
	style: {
		color: red,
		backgroundColor: lightblue
	},
	props: {},//组件中的props属性
	on: {
		click: () => { console.log(单击了一下) }
	},
	nativeOn: {},//渲染组件时，给组件根元素绑定事件
	directives: {},//自定义指令
	scopedSlots: {},
	slot: ,//default|具名name
	key: ,//唯一识别名，如同v-for时使用的key
	ref: 
}, 这是一个div)

render: h => h(div, 省略属性的div)

content

内容：字符串或者数组，字符串作为元素内部文本呈现，数组可继续渲染子节点

//在元素中传入字符串
render: h => h(div, 这是一个字符串内容)

//在元素中生成子元素节点，必须是数组
render: h => h(ul, [
	h(li, 第一个li),
	h(li, 第二个li)
]

//通过循环来插入子节点
let list = [
	{el: li ,text: 第一个内容},
	{el: li ,text: 第二个内容},
	{el: li ,text: 第三个内容}
];
const getLiArr= (h, list) => {
	return list.map(item => h(item.el, item.text);
}
render: h => h(ul, getLiArr)

函数组件

通过以组件形式，使用render函数渲染，用于在使用slot插槽时，可以自定义插槽渲染的内容样式

//list.vue
<template>
	<ul>
		<li v-for="(item, itemIndex) in list">
			<span v-if=!render>{
         
  {item.name}}</span>
			<render-dom v-else :renderFunc=render :name=item.name></render-dom>
		</li>
	</ul>
</template>

<script>
	import renderDom from ./render_dom
	
	export default {
		name: list,
		props: {
			list: {
				Array,
				default: () => []
			},
			render: Function,
			default: () => {}
		},
		components: { renderDom }
	}
</scirpt>

//render-page.vue
<template>
	<list :list=list :render=renderFunc></list>
</template>

<script>
	import List from ./list
	
	export default {
		name: render-page,
		components: {
			List
		},
		data() {
			return {
				list: [
					{ name: 张三 },
					{ name: 李四 }
				]
			}
		},
		methods: {
			renderFunc (h, name) {
				return h(h3, {
					style: {
						color: white,
						backgroundColor: lightblue
					}
				}, name);
			}
		}
	}
</scirpt>

//render_dom.js
export default {
	functional: true,//vue中提供的允许组件无状态，无实例的函数组件化
	props: {
		name: String,
		renderFunc: Function
	},
	render: (h, ctx) => {
		//ctx 提供的上下文对象，可以访问实例组件里面的data、props等
		return ctx.props.renderFunc(h, ctx.props.name);
	}
}

JSX语法

//引用上面代码
//render-page.vue中的renderFunc
renderFunc (h, name) {//形参的h不能改变
	return (
		//on- 绑定事件的前缀，如若绑定组件里面的自定义事件：on-on-select写法
		//nativeOn- 绑定组件根元素事件
		//{} 属性绑定的所有变量放入{}内，属性前不需要：
		<p on-click={ handleClick } style={
         
  {color: red}}>{name}</p>
	)
},
handleClick () {
	console.log(单击了);
}

总结

今天重新学习了vue的render函数和JSX语法，刷新了对render的感官，对一些比较模糊的知识点有了清晰的认识，也许还有些不对的地方，会持续改进。由难而易，render的写法也许较为繁琐，最后看到了JSX的语法，感觉又是一股清流，焕然一新的同时，也不会感到有半点滞涩。

天天都是美好的一天，勇士加油！