当前位置： 首页 > news >正文

react动态渲染列表与函数式组件

news 2026/5/11 9:22:27

1.如何使用jsx语法动态渲染列表呢，下边我用一个例子来切实总结一下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jsx练习动态渲染列表</title>
</head>
<body><!-- 引入react 核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom库 ，用于支持react操作Dom --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel 解析jsx语法的库，用于将jsx转换为js --><script type="text/javascript" src="../js/babel.min.js"></script><!-- 准备一个容器用于渲染接收虚拟dom --><div id="test"></div><script type="text/babel">// 一定注意区分：【js语句】和【js表达式】// 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方// 下边这些都是表达式// （1）a// （2）a+b// （3）demo（1）// （4）arr.map()//  (5)function(){}// 语句（代码）// 下边这些都是语句（代码）控制代码走向// （1）if(){}// （2）for(){}// （3）while(){}// （4）switch(){}const myData = [{id:1,name:'张三',age:18},{id:2,name:'李四',age:19},{id:3,name:'王五',age:20},{id:4,name:'赵六',age:21},{id:5,name:'孙七',age:22},]// 创建虚拟domconst VDOM = (<div><h1>前端jsx框架</h1><ul>{myData.map((item,index) =>{return <li key={index}>{item.id}{item.name}{item.age}</li>})}</ul></div>)// 渲染虚拟dom到页面ReactDOM.render(VDOM,document.getElementById('test'))</script>
</body>
</html>

2.函数式组件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>函数式组件</title>
</head>
<body><!-- 引入react 核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom库 ，用于支持react操作Dom --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel 解析jsx语法的库，用于将jsx转换为js --><script type="text/javascript" src="../js/babel.min.js"></script><!-- 准备一个容器用于渲染接收虚拟dom --><div id="test"></div><script type="text/babel">// 1.创建函数式组件function Hello_react(){console.log(this);//此处this是undefinded,因为babel编译后开启了严格模式return(<div><h2>你好我是函数式组件</h2></div>)}ReactDOM.render(<Hello_react/>,document.getElementById('test'))</script>
</body>
</html>

通过上述例子总结

        1.函数式组件，其实就是一个函数，返回值就是虚拟dom
        2.函数名就是组件名，首字母必须大写
        3.函数名必须和文件名一致
        4.函数式组件没有this，但是可以通过props获取父组件向子组件传递的属性
        5.函数式组件没有状态，但是可以通过props向子组件传递状态
        6.函数式组件没有生命周期，但是可以通过props向子组件传递生命周期


        ReactDOM.render(<Hello_react/>,document.getElementById('test'))之后发生了什么？
        1.React解析组件标签，找到了ello_react组件
        2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后就是看到的页面


       

相关文章：

react动态渲染列表与函数式组件

1.如何使用jsx语法动态渲染列表呢&#xff0c;下边我用一个例子来切实总结一下 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scal…...

编程日记 2024/7/11 2:20:29

小程序内容管理系统设计

设计一个小程序内容管理系统&#xff08;CMS&#xff09;时&#xff0c;需要考虑以下几个关键方面来确保其功能完善、用户友好且高效&#xff1a; 1. 需求分析 目标用户&#xff1a;明确你的目标用户群体&#xff0c;比如企业、媒体、个人博主等&#xff0c;这将决定系统的功…...

编程日记 2024/7/11 2:19:28

HDFS 块重构和RedundancyMonitor详解

文章目录 1. 前言2 故障块的重构(Reconstruct)2.1 故障块的状态定义和各个状态的统计信息2.2 故障文件块的查找收集2.5.2.1 misReplica的检测2.5.2.2 延迟队列(postponedMisreplicatedBlocks)的构造和实现postponedMisreplicatedBlocks中Block的添加postponedMisreplicatedBloc…...

编程日记 2024/7/11 2:18:26

Power BI DAX常用函数使用场景和代码示例

Power BI函数表达式对于没有接触过的朋友可能会有些迷茫&#xff0c;花一点时间了解一下原理在学习一些常用的DAX函数&#xff0c;就可以解决工作中绝大部分问题&#xff0c;函数使用都是共同的。 以下是一些最常用的DAX函数&#xff0c;如聚合&#xff0c;计数&#xff0c;日期…...

编程日记 2024/7/11 2:17:26

机器学习与深度学习：区别与联系（含工作站硬件推荐）

一、机器学习与深度学习区别 机器学习&#xff08;ML&#xff1a;Machine Learning&#xff09;与深度学习&#xff08;DL&#xff1a;Deep Learning&#xff09;是人工智能&#xff08;AI&#xff09;领域内两个重要但不同的技术。它们在定义、数据依赖性以及硬件依赖性等方面…...

编程日记 2024/7/11 2:15:24

大模型/NLP/算法面试题总结5——Transformer和Rnn的区别

Transformer 和 RNN&#xff08;循环神经网络&#xff09;是两种常见的深度学习模型&#xff0c;广泛用于自然语言处理&#xff08;NLP&#xff09;任务。 它们在结构、训练方式以及处理数据的能力等方面有显著的区别。以下是它们的主要区别&#xff1a; 架构 RNN&#xff0…...

编程日记 2024/7/11 2:14:23

【RHCE】转发服务器实验

1.在本地主机上操作 2.在客户端操作设置主机的IP地址为dns 3.测试,客户机是否能ping通...

编程日记 2024/7/11 2:13:22

AI提示词：打造爆款标题生成器

打开GPT输入以下内容&#xff1a; # Role 爆款标题生成器## Profile - author: 姜小尘 - version: 02 - LLM: Kimi - language: 中文 - description: 利用心理学和市场趋势&#xff0c;生成吸引眼球的自媒体文章标题。## Background 一个吸引人的标题是提升文章点击率和传播力…...

编程日记 2024/7/11 2:10:19

skywalking-1-服务端安装

skywalking很优秀。 安装服务端 skywalking的服务端主要是aop服务&#xff0c;为了方便查看使用还需要安装ui。另外采集的数据我们肯定要存起来&#xff0c;这个数据库就直接用官方的banyandb。也就是aop、ui、banyandb都使用官方包。 我们的目的是快速使用和体验&#xff0c…...

编程日记 2024/7/11 2:09:18

查看oracle ojdbc所支持的JDBC驱动版本

oracle jcbc驱动的下载地址参考&#xff1a;JDBC and UCP Downloads page 其实上文中对ojdbc所支持的JDBC驱动版本已经有说明了&#xff0c;不过&#xff0c;因为oracle的驱动包很多时间&#xff0c;都是在公司内部私服里上传维护的&#xff0c;上传的时候&#xff0c;可能又没…...

编程日记 2024/7/11 2:07:16

自媒体运营怎样引流客源？

不管是企业还是个人&#xff0c;越来越多都在做自媒体引流运营&#xff0c;那有什么引流客源的方式呢&#xff1f; 高质量内容&#xff1a;创作并分享有价值的内容&#xff0c;吸引目标受众&#xff0c;提升内容的分享和传播效果。 SEO优化&#xff1a;优化文章标题、关键词和…...

编程日记 2024/7/11 2:06:15

【算法】十进制转换为二进制

目的&#xff1a;将十进制转换为二进制 思路&#xff1a; 首先我们手算的情况是通过求余数算出进制数&#xff0c;同样代码也是通过做除法和求余数的方式&#xff0c;除法是得出下一次的被除数&#xff0c;而求余数是得到进制数 代码&#xff1a; #include<stdio.h>/…...

编程日记 2024/7/11 2:05:14

Postman中的API安全堡垒：全面安全性测试指南

&#x1f6e1;️ Postman中的API安全堡垒&#xff1a;全面安全性测试指南 在当今的数字化世界中&#xff0c;API安全性是保护数据和系统不可或缺的一环。Postman作为API开发和测试的领先工具&#xff0c;提供了多种功能来帮助开发者进行API安全性测试。本文将深入探讨如何在Po…...

编程日记 2024/7/11 2:03:13

学圣学最终的目的是：达到思无邪的状态（ 纯粹、思想纯正、积极向上 ）

学圣学最终的目的是&#xff1a;达到思无邪的状态&#xff08; 纯粹、思想纯正、积极向上 &#xff09; 中华民族&#xff0c;一直以来&#xff0c;教学都是以追随圣学为目标&#xff0c;所以中华文化也叫圣学文化&#xff0c;是最高深的上等学问&#xff1b; 圣人那颗心根本…...

编程日记 2024/7/11 2:01:11

JS进阶-构造函数

学习目标&#xff1a; 掌握构造函数 学习内容&#xff1a; 构造函数 构造函数&#xff1a; 封装是面向对象思想中比较重要的一部分&#xff0c;js面向对象可以通过构造函数实现的封装。 同样的将变量和函数组合到了一起并能通过this实现数据的共享&#xff0c;所不同的是借助…...

编程日记 2024/7/11 2:00:10

使用Spring Boot和Couchbase实现NoSQL数据库

使用Spring Boot和Couchbase实现NoSQL数据库 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 一、引言 NoSQL数据库越来越受到开发者的欢迎&#xff0c;特别是…...

编程日记 2024/7/11 1:59:09

【数据库】Redis主从复制、哨兵模式、集群

目录 一、Redis的主从复制 1.1 主从复制的架构 1.2 主从复制的作用 1.3 注意事项 1.4 主从复制用到的命令 1.5 主从复制流程 1.6 主从复制实现 1.7 结束主从复制 1.8 主从复制优化配置 二、哨兵模式 2.1 哨兵模式原理 2.2 哨兵的三个定时任务 2.3 哨兵的结构 2.4 哨…...

编程日记 2024/7/11 1:58:08

C基础day8

一、思维导图 二、课后习题 #include<myhead.h> #define Max_Stu 100 //函数声明 //学生信息录入函数 void Enter_stu(int *Num_Stu,char Stu_name[][50],int Stu_score[]); //查看学生信息 void Print_stu(int Num_Stu,char Stu_name[][50],int Stu_score[]); //求出成绩…...

编程日记 2024/7/11 1:57:07

【Spring成神之路】老兄，来一杯Spring AOP源码吗？

文章目录 一、引言二、Spring AOP的使用三、Spring AOP的组件3.1 Pointcut源码3.2 Advice源码3.3 Advisor源码3.4 Aspect源码 四、Spring AOP源码刨析4.1 configureAutoProxyCreator源码解析4.2 parsePointcut源码解析4.3 parseAdvisor源码解析4.4 parseAspect源码解析4.5 小总…...

编程日记 2024/7/11 1:56:06

轻松理解c++17的string_view

文章目录 轻松理解c17的string_view设计初衷常见用法构造 std::string_view常用操作作为函数参数 注意事项总结 轻松理解c17的string_view std::string_view 是 C17 引入的一个轻量级、不拥有&#xff08;non-owning&#xff09;的字符串视图类。它的设计初衷是提供一种高效、…...

编程日记 2024/7/11 1:53:03

为Claude Code配置Taotoken作为稳定后备API的完整步骤

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 为Claude Code配置Taotoken作为稳定后备API的完整步骤 Claude Code 是一款广受开发者欢迎的编程助手工具&#xff0c;它原生支持通…...

编程新知 2026/5/11 8:51:25

英文论文降AIGC教程：2026最新实测3款工具与逻辑重塑避坑指南

赶稿季来临&#xff0c;英文长稿的AI率到底该怎么降&#xff1f;不少同学愁的头都要秃了&#xff0c;不要再一个词一个词的扣了&#xff0c;这不仅慢&#xff0c;还会把好好的学术英语改得支离破碎。 坦率的讲&#xff0c;真正聪明的降ai&#xff0c;绝对不是机械替换&#xf…...

编程新知 2026/5/11 5:22:54

从QR码到汉信码：除了日本标准，国产二维码在哪些场景更牛？

从QR码到汉信码&#xff1a;国产技术如何重新定义二维码应用边界 在数字化浪潮席卷全球的今天&#xff0c;二维码已成为连接物理世界与数字世界的隐形桥梁。当我们习惯性地掏出手机扫描各种黑白方块时&#xff0c;很少有人意识到这些看似简单的图案背后&#xff0c;隐藏着一场关…...

编程新知 2026/5/11 5:09:48

GPU并行计算：SIMT架构与性能优化实践

1. SIMT架构的本质与硬件挑战 在GPU计算领域&#xff0c;单指令多线程&#xff08;SIMT&#xff09;执行模型是实现大规模并行的核心机制。与传统的SIMD&#xff08;单指令多数据&#xff09;不同&#xff0c;SIMT允许同一warp&#xff08;通常包含32个线程&#xff09;中的每个…...

编程新知 2026/5/11 4:55:50

509-qwen3.5-9b csdn tmux

技术文章大纲&#xff1a;Qwen&#xff08;通义千问&#xff09;技术解析与应用实践 Qwen概述 背景与研发团队&#xff1a;阿里巴巴达摩院推出的开源大语言模型系列核心定位&#xff1a;支持多语言、多模态的通用AI助手版本迭代&#xff1a;从Qwen-7B到Qwen-72B的模型规模演进 …...

编程新知 2026/5/11 4:41:26

mlc-llm：大语言模型跨平台高效部署的机器学习编译框架

1. 项目概述&#xff1a;当大语言模型遇见“通用编译” 如果你在过去一年里折腾过大语言模型&#xff08;LLM&#xff09;的本地部署&#xff0c;大概率经历过这样的场景&#xff1a;兴冲冲地从Hugging Face下载了一个7B参数的模型&#xff0c;却发现自己的消费级显卡&#xf…...

编程新知 2026/5/11 4:32:20

告别抖动与超调：深入剖析STM32直流电机控制中动态滤波与PI调节的协同优化策略

STM32直流电机控制进阶&#xff1a;动态滤波与PI调节的工程实践 在工业自动化与机器人控制领域&#xff0c;直流电机因其优异的调速性能仍是许多精密运动控制的首选。但当您已经搭建好基于STM32的PWM驱动和编码器反馈系统后&#xff0c;是否遇到过这样的困境&#xff1a;转速波…...

编程新知 2026/5/11 4:29:53

ARM Cortex-R7低功耗架构设计与动态RAM保留技术

1. ARM Cortex-R7低功耗架构设计精要 在嵌入式实时系统中&#xff0c;功耗优化始终是工程师面临的核心挑战。ARM Cortex-R7 MPCore处理器通过创新的动态RAM保留技术&#xff0c;为工业控制、汽车电子等实时应用场景提供了高性能与低功耗的完美平衡方案。这套机制的精妙之处在于…...

编程新知 2026/5/11 4:03:07

FPGA加速中性原子量子计算机的原子检测技术

1. 中性原子量子计算机的原子检测挑战量子计算领域近年来最激动人心的进展之一&#xff0c;就是中性原子量子计算机的快速发展。这种量子计算机利用激光镊子&#xff08;光学镊子&#xff09;阵列来捕获和排列中性原子&#xff08;如铷、铯等碱金属原子&#xff09;&#xff0c…...

编程新知 2026/5/11 3:42:05

AArch64外部调试架构与Debug State机制详解

1. AArch64外部调试架构解析在嵌入式系统开发中&#xff0c;调试技术如同外科医生的手术刀&#xff0c;是定位和修复问题的关键工具。AArch64架构的外部调试模式提供了一套完整的硬件级调试方案&#xff0c;允许开发者通过专用接口直接控制处理器执行流程。这种调试方式不依赖于…...

编程新知 2026/5/11 3:30:34