上一篇说了项目搭建和结构，这篇说说vue 的render 函数，比较核心的概念。去年写过一点react，所以知道render 函数是用来创建虚拟dom 的，那个时候写 jsx 还是不亦乐乎的。列出几个问题作为这篇的结构：
- render 函数的作用？
- 组件中的render 函数什么时候执行？
- 什么时候需要在组件中写 jsx ？
常遇到这个问题：
[Vue warn]: Failed to mount component: template or render function not defined
这个问题是由于当前写的组件没注册为vue 组件，或者组件定义中没有template/render，所以组件没法和具体的element 挂载到一起，无法完成渲染。
render 的作用
render 函数实际上是template 的底层方法，通过调用createElement(h)来创建dom节点，实际上作用就是负责组件视图渲染的！createElement是render的核心方法。Vue编译的时候会把template 编译为对应的render 方法，所以有了render方法就可以不写template 了！
看实例：
<template>
<div class="right-panel">
<div class="right-panel-header">{title}</div>
<div class="right-panel-content">
{content}
</div>
</div>
</template>
如果不写template，对应的render 则是
render(h) {
return (
<div class="right-panel">
<div class="right-panel-header">{this.title}</div>
<div class="right-panel-content">
{this.content}
</div>
</div>
);
}
从生命周期出发，render执行时机
与render 相关的生命周期
还是得把组件的生命周期搬出来，created 钩子函数是组件injection和reactivity 属性初始化后，比如props、data 初始化，后面关键的：如果有template，则把视图编译为render function，如果没有则直接调用被override 的render 方法创建虚拟dom节点，并且把组件对应的 htmlElement 替换为 组件的dom 结构和数据，最后触发mounted 钩子。
所以执行顺序是 beforeMount -- render(h, data) -- mounted .
什么时候需要定义render
上面那个实例，panel content 内容可以是外部传入的一段内容(this.$props.content)，假如内容很复杂呢，假如这个panel 组件需要接受用户自定义的复杂content 呢？ 这时候就需要接受外部传入的函数来渲染一段dom。 这样panel 只是个容器，把内容渲染交给外部模块，实际上是组件拆分和模块化的思想，使得panel 组件可以更好的复用。
我们把panel 的render 函数改为可以接受外部函数：
render(h) {
let contentNode = (<div>default content</div>);
if (this.contentRender && this.contentRender instanceof Function) {
contentNode = this.contentRender(h, this.data);
// 把数据用外部函数来渲染成用户想要的结构
}
console.warn(`rendering...`);
return (
<div class="right-panel">
<div class="right-panel-header">Panel Header</div>
<div class="right-panel-content">
{contentNode}
// 插入dom 结构
</div>
</div>
);
}
contenRender 的定义可以是这样的：
contentRender (h, data) {
return (<div>Current Data: {data['app']}</div>);
},
总结
render 真的很有趣，其实际上就是jquery 时代的 创建dom，构建dom tree 的过程，但是更加的智能化、更优雅。 掌握了render ，就可以自由构建可复用的组件容器。建议详细阅读官方文档，非常有用。
一些思考：
开发一个前端项目，不仅仅是视图和组件逻辑，更重要的是数据服务，现代化前端几乎都是数据驱动的。因为一个app 在组件初始化时完成了数据和视图绑定，对视图的监听，随着app 的运行，实际上是不断变化的数据在驱动视图的变化。
基于MVC 的架构或 MVVM的架构，在不断写组件的过程中，我们不断反思该如何写一个组件，怎么把多个组件集成到一个复杂组件中，组件中的逻辑部分是否应该合理拆分出其他几个通用的模块/类。
比如api service 单独处理api相关的，api service 里面的网络请求有可以单独出 network 层，为了方便替换net 请求库，还有许多通用的数据格式转换层，都是可以单独成类或者service的概念。
参考文章：
官方文档：渲染函数 & JSX
支持 jsx 语法的插件，transform-vue-jsx
被误解的MVC和被神化的MVVM，rethinking-mvc-mvvm
网友评论