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

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

news 2026/2/9 9:51:01

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

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2026/2/8 3:54:15

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2026/2/8 12:24:34

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

编程新知 2026/1/28 3:43:20

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

编程新知 2025/10/24 12:31:26

AI+无人机如何守护濒危物种？YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...

编程新知 2026/1/26 12:50:00

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

编程新知 2025/12/29 15:43:26

【前端异常】JavaScript错误处理：分析 Uncaught (in promise) error

在前端开发中&#xff0c;JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作&#xff08;如 Promise、async/await 等&#xff09;&#xff0c;开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝&#xff08;r…...

编程新知 2026/1/1 23:11:45

WPF八大法则：告别模态窗口卡顿

⚙️ 核心问题&#xff1a;阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程&#xff0c;导致后续逻辑无法执行&#xff1a; var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题&#xff1a…...

编程新知 2026/1/26 17:26:03

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...

编程新知 2026/2/5 17:29:21

起重机起升机构的安全装置有哪些？

起重机起升机构的安全装置是保障吊装作业安全的关键部件&#xff0c;主要用于防止超载、失控、断绳等危险情况。以下是常见的安全装置及其功能和原理&#xff1a; 一、超载保护装置&#xff08;核心安全装置&#xff09; 1. 起重量限制器 功能&#xff1a;实时监测起升载荷&a…...

编程新知 2025/11/12 16:14:48