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

相关推荐
爱学习的程序媛12 小时前
【Web前端】Vue2与Vue3核心概览与优化对比
前端·javascript·vue.js·typescript
li@h13 小时前
如何在电脑端访问小程序时在胶囊添加一个全屏和缩放功能
前端
LFly_ice13 小时前
学习React-23-React-router
前端·学习·react.js
我叫张小白。14 小时前
TypeScript对象类型与接口:构建复杂数据结构
前端·javascript·typescript
墨客希14 小时前
如何快速掌握大型Vue项目
前端·javascript·vue.js
大福ya14 小时前
AI开源项目改造NextChat(ChatGPT-Next-Web)实现前端SSR改造打造一个初始框架
前端·chatgpt·前端框架·开源·aigc·reactjs·ai编程
n***333514 小时前
SpringBoot返回文件让前端下载的几种方式
前端·spring boot·后端
纯粹的热爱15 小时前
🌐 阿里云 Linux 服务器 Let's Encrypt 免费 SSL 证书完整部署指南
前端
北辰alk15 小时前
Vue3 自定义指令深度解析:从基础到高级应用的完整指南
前端·vue.js
AAA阿giao15 小时前
使用 Vite + Vue 3 搭建项目并配置路由的全流程(含国内镜像加速)
vue.js·node.js·vite