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

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

news 2026/3/27 0:36:50

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

C++新手必看：如何用最简单的方法找出一个数的所有因数（附GESP真题解析）

C实战指南&#xff1a;高效求解因数的5种方法及GESP真题精讲 在编程学习的道路上&#xff0c;理解基础算法就像盖房子打地基一样重要。因数计算这个看似简单的题目&#xff0c;其实蕴含着循环控制、条件判断和算法优化等核心编程思想。很多初学者在第一次遇到这类问题时&#x…...

编程新知 2026/3/27 0:31:30

微软服软！被骂5年的Win11将被“整改”：告别强制更新、减少Copilot、任务栏摆放自由

整理 | 屠敏出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09;Windows 11 自 2021 年发布以来&#xff0c;因任务栏功能缩水、UI 不统一、强制网络登录以及更高的硬件门槛&#xff0c;成为用户集中吐槽的焦点。再加上近来微软猛推 AI 功能&#xff0c;Copilot 的入口…...

编程新知 2026/3/26 21:54:03

从‘深度学习之美’到TensorFlow 2.9：一个MNIST手写识别项目的实战重构记

1. 当经典教材遇上TensorFlow 2.9&#xff1a;我的MNIST重构历险记 记得第一次翻开《深度学习之美》这本书时&#xff0c;我被其中用TensorFlow实现MNIST手写识别的案例深深吸引。但当我兴冲冲打开电脑准备复现时&#xff0c;却发现书中的TensorFlow 1.x代码在2.9环境下几乎寸步…...

编程新知 2026/3/26 21:32:00

DAMO-YOLO部署教程：SSL证书配置与HTTP自动跳转HTTPS设置

DAMO-YOLO部署教程&#xff1a;SSL证书配置与HTTP自动跳转HTTPS设置 1. 引言 当你成功部署了DAMO-YOLO智能视觉探测系统后&#xff0c;可能会发现浏览器提示"不安全"的警告。这是因为默认的HTTP协议缺乏加密保护&#xff0c;对于涉及图像处理的AI系统来说&#xff…...

编程新知 2026/3/26 20:07:40

数据开发平台如何落地实操？数据开发平台核心价值是什么？

数据开发平台是企业数字化建设的核心载体&#xff0c;搭建合规高效的数据开发平台&#xff0c;才能打通数据流转全链路&#xff0c;而多数企业落地数据开发平台时&#xff0c;往往陷入流程混乱、效率低下的困境。开始之前给大家分享一份数字化全流程资料包:https://s.fanruan.c…...

编程新知 2026/3/26 18:46:39

Steam致命错误failed to load steamui.dll？小白必看的6种实用修复方案

软件获取地址 https://pan.quark.cn/s/4cc6a4c0e881 打开Steam时突然弹出“failed to load steamui.dll”提示&#xff0c;无法进入平台甚至启动Y戏&#xff1f;这是Steam最常见的致命错误之一&#xff0c;在failed to load类问题中占比超4成&#xff0c;很多小白不清楚dll文件…...

编程新知 2026/3/26 18:34:37

零基础玩转OpenClaw：借助GLM-4.7-Flash实现首个自动化脚本

零基础玩转OpenClaw&#xff1a;借助GLM-4.7-Flash实现首个自动化脚本 1. 为什么选择OpenClaw作为个人自动化助手 去年夏天&#xff0c;当我第三次因为忘记定时发送周报而被领导提醒时&#xff0c;终于下定决心寻找一个能24小时待命的数字助手。在尝试了各种RPA工具后&#x…...

编程新知 2026/3/26 17:51:54

刷题无效、偏科严重？脑能模型解构 K12 学习底层能力问题

一、问题定义&#xff1a;K12 学习低效的核心并非知识缺口&#xff0c;而是大脑能力结构断链在 K12 家庭教育场景中&#xff0c;刷题耗时但效率无提升、偏科补学却差距扩大、孩子拖延喊不动、学习焦虑厌学等问题成为普遍痛点&#xff0c;多数家长将其归因于孩子智商、天赋或学习…...

编程新知 2026/3/26 17:41:46

【Godot】【整活】用 50 行代码做一个“抖音同款解压小游戏”（附源码）

最近短视频平台上经常能看到一种“解压小游戏”： 点一下 → 爆炸特效 💥 滑一下 → 连锁反应 🎯 满屏粒子 → 爽感拉满 😎 这些游戏的核心特点只有三个字： 👉 简单、直接、上头 今天我们就用 Godot 4，只用 约 50 行代码，实现一个“点击爆炸”的解压小游戏。 精…...

编程新知 2026/3/26 17:17:31

深度学习赋能国税局发票查验：中英文混合验证码的高效识别方案

1. 验证码识别的税务场景痛点 每次打开国税局网站查验发票时&#xff0c;那个扭曲变形的中英文混合验证码是不是让你特别头疼&#xff1f;作为财务人员&#xff0c;我每天要处理上百张发票&#xff0c;手动输入这些验证码不仅效率低下&#xff0c;还容易出错。传统OCR技术在这里…...

编程新知 2026/3/26 15:03:57