react动态渲染列表与函数式组件
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语法动态渲染列表呢，下边我用一个例子来切实总结一下 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scal…...
小程序内容管理系统设计
设计一个小程序内容管理系统（CMS）时，需要考虑以下几个关键方面来确保其功能完善、用户友好且高效： 1. 需求分析 目标用户：明确你的目标用户群体，比如企业、媒体、个人博主等，这将决定系统的功…...
HDFS 块重构和RedundancyMonitor详解
文章目录 1. 前言2 故障块的重构(Reconstruct)2.1 故障块的状态定义和各个状态的统计信息2.2 故障文件块的查找收集2.5.2.1 misReplica的检测2.5.2.2 延迟队列(postponedMisreplicatedBlocks)的构造和实现postponedMisreplicatedBlocks中Block的添加postponedMisreplicatedBloc…...
Power BI DAX常用函数使用场景和代码示例
Power BI函数表达式对于没有接触过的朋友可能会有些迷茫，花一点时间了解一下原理在学习一些常用的DAX函数，就可以解决工作中绝大部分问题，函数使用都是共同的。 以下是一些最常用的DAX函数，如聚合，计数，日期…...
机器学习与深度学习：区别与联系（含工作站硬件推荐）
一、机器学习与深度学习区别 机器学习（ML：Machine Learning）与深度学习（DL：Deep Learning）是人工智能（AI）领域内两个重要但不同的技术。它们在定义、数据依赖性以及硬件依赖性等方面…...
大模型/NLP/算法面试题总结5——Transformer和Rnn的区别
Transformer 和 RNN（循环神经网络）是两种常见的深度学习模型，广泛用于自然语言处理（NLP）任务。 它们在结构、训练方式以及处理数据的能力等方面有显著的区别。以下是它们的主要区别： 架构 RNN࿰…...
【RHCE】转发服务器实验
1.在本地主机上操作 2.在客户端操作设置主机的IP地址为dns 3.测试,客户机是否能ping通...
AI提示词：打造爆款标题生成器
打开GPT输入以下内容： # Role 爆款标题生成器## Profile - author: 姜小尘 - version: 02 - LLM: Kimi - language: 中文 - description: 利用心理学和市场趋势，生成吸引眼球的自媒体文章标题。## Background 一个吸引人的标题是提升文章点击率和传播力…...
skywalking-1-服务端安装
skywalking很优秀。 安装服务端 skywalking的服务端主要是aop服务，为了方便查看使用还需要安装ui。另外采集的数据我们肯定要存起来，这个数据库就直接用官方的banyandb。也就是aop、ui、banyandb都使用官方包。 我们的目的是快速使用和体验，…...
查看oracle ojdbc所支持的JDBC驱动版本
oracle jcbc驱动的下载地址参考：JDBC and UCP Downloads page 其实上文中对ojdbc所支持的JDBC驱动版本已经有说明了，不过，因为oracle的驱动包很多时间，都是在公司内部私服里上传维护的，上传的时候，可能又没…...
自媒体运营怎样引流客源？
不管是企业还是个人，越来越多都在做自媒体引流运营，那有什么引流客源的方式呢？ 高质量内容：创作并分享有价值的内容，吸引目标受众，提升内容的分享和传播效果。 SEO优化：优化文章标题、关键词和…...
【算法】十进制转换为二进制
目的：将十进制转换为二进制 思路： 首先我们手算的情况是通过求余数算出进制数，同样代码也是通过做除法和求余数的方式，除法是得出下一次的被除数，而求余数是得到进制数 代码： #include<stdio.h>/…...
Postman中的API安全堡垒：全面安全性测试指南
🛡️ Postman中的API安全堡垒：全面安全性测试指南 在当今的数字化世界中，API安全性是保护数据和系统不可或缺的一环。Postman作为API开发和测试的领先工具，提供了多种功能来帮助开发者进行API安全性测试。本文将深入探讨如何在Po…...
学圣学最终的目的是：达到思无邪的状态（ 纯粹、思想纯正、积极向上 ）
学圣学最终的目的是：达到思无邪的状态（ 纯粹、思想纯正、积极向上 ） 中华民族，一直以来，教学都是以追随圣学为目标，所以中华文化也叫圣学文化，是最高深的上等学问； 圣人那颗心根本…...
JS进阶-构造函数
学习目标： 掌握构造函数 学习内容： 构造函数 构造函数： 封装是面向对象思想中比较重要的一部分，js面向对象可以通过构造函数实现的封装。 同样的将变量和函数组合到了一起并能通过this实现数据的共享，所不同的是借助…...
使用Spring Boot和Couchbase实现NoSQL数据库
使用Spring Boot和Couchbase实现NoSQL数据库 大家好，我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编，也是冬天不穿秋裤，天冷也要风度的程序猿！ 一、引言 NoSQL数据库越来越受到开发者的欢迎，特别是…...
【数据库】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 哨…...
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[]); //求出成绩…...
【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 小总…...
轻松理解c++17的string_view
文章目录 轻松理解c17的string_view设计初衷常见用法构造 std::string_view常用操作作为函数参数 注意事项总结 轻松理解c17的string_view std::string_view 是 C17 引入的一个轻量级、不拥有（non-owning）的字符串视图类。它的设计初衷是提供一种高效、…...
: K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？)
云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？
大家好，欢迎来到《云原生核心技术》系列的第七篇！ 在上一篇，我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在，我们就像一个拥有了一块崭新数字土地的农场主，是时…...
Prompt Tuning、P-Tuning、Prefix Tuning的区别
一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接：3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯，要想要能够将所有的电脑解锁&#x…...
生成 Git SSH 证书
🔑 1. 生成 SSH 密钥对 在终端（Windows 使用 Git Bash，Mac/Linux 使用 Terminal）执行命令： ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 参数说明： -t rsa&#x…...
Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级
在互联网的快速发展中，高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司，近期做出了一个重大技术决策：弃用长期使用的 Nginx，转而采用其内部开发…...
Rust 异步编程
Rust 异步编程 引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...
工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年，作为行业领先的3D工业相机及视觉系统供应商，累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成，通过稳定、易用、高回报的AI3D视觉系统，为汽车、新能源、金属制造等行…...
何谓AI编程【02】AI编程官网以优雅草星云智控为例建设实践-完善顶部-建立各项子页-调整排版-优雅草卓伊凡
何谓AI编程【02】AI编程官网以优雅草星云智控为例建设实践-完善顶部-建立各项子页-调整排版-优雅草卓伊凡 背景 我们以建设星云智控官网来做AI编程实践，很多人以为AI已经强大到不需要程序员了，其实不是，AI更加需要程序员，普通人…...
写一个shell脚本，把局域网内，把能ping通的IP和不能ping通的IP分类，并保存到两个文本文件里
写一个shell脚本，把局域网内，把能ping通的IP和不能ping通的IP分类，并保存到两个文本文件里 脚本1 #!/bin/bash #定义变量 ip10.1.1 #循环去ping主机的IP for ((i1;i<10;i)) doping -c1 $ip.$i &>/dev/null[ $? -eq 0 ] &&am…...
MeshGPT 笔记
[2311.15475] MeshGPT: Generating Triangle Meshes with Decoder-Only Transformers https://library.scholarcy.com/try 真正意义上的AI生成三维模型MESHGPT来袭！_哔哩哔哩_bilibili GitHub - lucidrains/meshgpt-pytorch: Implementation of MeshGPT, SOTA Me…...