前端之render函数的理解

看项目代码的时候，一直会看到一个render函数，不管是react还是vue，那么这个render函数的作用具体是什么呢？

概念

render 函数即渲染函数，它是个函数，它的参数也是个函数------即 createElement

作用

render 函数 跟 template 一样都是创建 html 模板的，但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复，这时候就可以用 render 函数

通常我们都会把我们的页面结构逻辑都写在 template 中，然后再通过vue将我们的代码转换成虚拟DOM，相比于真实DOM，虚拟DOM是通过js代码处理的，所以消耗的性能相对较小，当然大部分情况下使用 template 创建我们的HTML是可以的，但是在有些场景下，我们真的需要通Javascript的完全编程的能力来完成时，就可以用到 render函数，比之 template 更接近编译器

参数（createElement）

createElement 是 render 函数 的参数，它本身也是个函数，并且有三个参数

1. 一个 HTML 标签名、组件选项对象，或者 resolve 了上述任何一种的一个 async 函数，类型:{ String | Object | Function }，必填项
2. 一个与模板中 attribute 对应的数据对象，类型：{ Object }，可选
3. 子级虚拟节点 ( VNodes )，由 createElement() 构建而成，也可以使用字符串来生成 "文本虚拟节点"，类型：{ String | Array }，可选

参考文档：

https://www.jianshu.com/p/d96bebc2bbc8

https://blog.csdn.net/libingjiedd/article/details/138509735

react render 渲染函数 - 简书