前端之render函数的理解

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

概念

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

作用

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

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

参数(createElement)

createElementrender 函数 的参数,它本身也是个函数,并且有三个参数

  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 渲染函数 - 简书

相关推荐
子兮曰5 小时前
async/await高级模式:async迭代器、错误边界与并发控制
前端·javascript·github
恋猫de小郭5 小时前
2026 Flutter VS React Native ,同时在 AI 时代 VS Native 开发,你没见过的版本
android·前端·flutter
GIS之路7 小时前
ArcGIS Pro 中的 Notebooks 入门
前端
IT_陈寒9 小时前
React状态管理终极对决:Redux vs Context API谁更胜一筹?
前端·人工智能·后端
gxp1239 小时前
初学React:请求数据参数未更新 && 数据异步状态更新问题
react.js
lemon_yyds9 小时前
《vue 2 升级vue3 父组件 子组件 传值: value 和 v-model
vue.js
Kagol10 小时前
TinyVue 支持 Skills 啦!现在你可以让 AI 使用 TinyVue 组件搭建项目
前端·agent·ai编程
柳杉10 小时前
从零打造 AI 全球趋势监测大屏
前端·javascript·aigc
simple_lau10 小时前
Cursor配置MasterGo MCP:一键读取设计稿生成高还原度前端代码
前端·javascript·vue.js
睡不着先生10 小时前
如何设计一个真正可扩展的表单生成器?
前端·javascript·vue.js