前端之render函数的理解

news/2024/9/29 22:27:28 标签: 前端, vue.js, react.js

看项目代码的时候,一直会看到一个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 渲染函数 - 简书 


http://www.niftyadmin.cn/n/5683827.html

相关文章

yolov8/9/10模型在安全帽、安全衣检测中的应用【代码+数据集+python环境+GUI系统】

yolov8910模型安全帽、安全衣检测中的应用【代码数据集python环境GUI系统】 yolov8/9/10模型在安全帽、安全衣检测中的应用【代码数据集python环境GUI系统】 背景意义 安全帽和安全衣在工业生产、建筑施工等高风险作业环境中是保护工人免受意外伤害的重要装备。然而&#xff0…

vue3:路由守卫(全局守卫、路由独享守卫、组件内守卫)

全局守卫 import {createRouter,createWebHashHistory } from vue-router// 省略了routes 中的路由规则 const routes [...... ]const router createRouter({history: createWebHashHistory(),routes })// 全局守卫:登录拦截 本地没有存token,请重新登录 router.…

情感短视频素材下载推荐

在制作热门的情感短视频时,优质的素材是不可或缺的。作为一名资深视频剪辑师,今天我将为你推荐几个可以下载高清无水印情感视频素材的网站,助你轻松找到创作灵感。 蛙学网 蛙学网是国内领先的视频素材平台,专注于情感和治愈类视频…

python测试开发---前后端交互Axios

Axios 是一个基于 Promise 的 HTTP 客户端,常用于浏览器和 Node.js 中发送 HTTP 请求。它封装了 XMLHttpRequest 和 Node.js 的 http 模块,使得处理网络请求更加简单和直观,尤其适合处理异步请求。以下是 Axios 的基础概念和使用方法&#xf…

JavaScript 基础 - 第22天_Webpack模块打包工具

Day03_Webpack模块打包工具 目录 Webpack 简介与体验案例 - 打包注册用户网页插件 plugins 和加载器 loader 的使用案例 - 注册用户完成 - npm 作用在前端项目Webpack 开发服务器,打包模式调试代码 source map配置 路径 学习目标 了解 Webpack 的作用掌握 npm …

Qt_网络编程

目录 1、Qt的UDP Socket 1.1 用Udp实现服务器 1.2 用Udp实现客户端 2、Qt的TCP Socket 2.1 用Tcp实现服务器 2.2 用Tcp实现客户端 3、Qt的HTTP 3.1使用Qt的HTTP 结语 前言: 网络协议是每个平台都必须遵守的,只是不同的平台所提供的网络API不…

GPT与大模型行业落地实践探索

简介 本课程探讨GPT和大模型技术在行业中的实际应用和发展。课程将涵盖GPT的基础知识、原理、及其在行业中的应用案例,如财报分析和客服机器人。重点在于结合实际案例中的使用效果,讲解如何利用GPT的API开发企业级应用以及利用更高级的功能构造AI Agent。…

第六章 6.1 字符串常用方法

字符串初始原理 JVM在启动过程中,有一个类加载的过程,会进行一系列的初始化(包括类的加载,静态变量的初始化)会初始化字符串常量池中。JVM一启动,整个字符串直接全部扫描到字符串常量池中。 源码&#xff…