React尝鲜
组件
React的组件就是一个js函数,函数内部return一个由jsx语法创建的html代码片段。
//MyComp.js
export default function MyComp(){return (<h1>我是新组件MyComp</h1>)
}
在需要引入组件的地方import导入组件,并放在相应位置
//App.js
import MyComp from './components/MyComp'
function App() {return (<div className="App"><header className="App-header"><img src={logo} className="App-logo" alt="logo" /><p>编辑 <code>src/App.js</code> 并且重新加载</p><aclassName="App-link"href="https://reactjs.org"target="_blank"rel="noopener noreferrer">Learn React</a>//新组件<MyComp></MyComp></header></div>);
}export default App;
需要注意的地方
- 组件名称首字母必须大写
- 如果return的内容太大,不能与return 处于同一行,则需要对return的内容添加小括号()
JSX规则
- 要从组件返回多个元素,使用一个父标签封装他们。如果你不想在标记中额外添加div可以使用<></>
- JSX要求标记被显示闭合:像这样的自闭标签一定要写成,想
- 这样的环绕标签一定要写成
- 驼峰式大多数东西。比如class要命名成className
JSX中使用大括号
js中的变量可以通过"{}"的方式传入JSX中,从而使html中渲染的数据可以得到控制。任何 JavaScript 表达式都可以在大括号之间工作,包括像 formatDate() 这样的函数调用:
export default function TodoList() {const name = 'Gregorio Y. Zara';return (<h1>{name}'s To Do List</h1>);
}
//函数调用
const today = new Date();function formatDate(date) {return new Intl.DateTimeFormat('en-US',{ weekday: 'long' }).format(date);
}export default function TodoList() {return (<h1>To Do List for {formatDate(today)}</h1>);
}
何处使用{}
- 作为文本 直接在 JSX 标签内
<div>{name}'s To Do List\.</div>有效,但<{tag}>Gregorio Y. Zara's To Do List</{tag}>无效。 - 作为属性 紧跟在 = 符号之后: src={avatar} 将读取 avatar 变量,但 src=“{avatar}” 将传递字符串 “{avatar}”。
使用双大括号
除了字符串、数字和其他js表达式外,甚至可以在jsx中插入对象。在jsx中插入对象,必须将对象封装在另一个对大括号中。person={{name:'henry',age:22}}
一般在插入内联样式的时候会用到双大括号
export default function TodoList() {return (<ul style={{backgroundColor: 'black',color: 'pink'}}><li>Improve the videophone</li><li>Prepare aeronautics lectures</li><li>Work on the alcohol-fuelled engine</li></ul>);
传递属性
React通过传递属性(props)相互通信。每个父组件都可以通过给他们属性将一些信息传递给他们的子组件
第一步 将属性传递给子组件
首先在父组件中给子组件添加属性
export default function Profile() {return (<Avatarperson={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}size={100}/>);
}
第二步 子组件读取属性
function Avatar({ person, size }) {// person and size are available here
}
默认属性
可以在接受时为属性添加默认值
function Avatar({ person, size = 100 }) {// ...
}
使用JSX的展开语法转发属性
当组件需要把自身接受到的属性转发给子组件时,可用展开语法精简代码
function Profile({ person, size, isSepia, thickBorder }) {return (<div className="card"><Avatarperson={person}size={size}isSepia={isSepia}thickBorder={thickBorder}/></div>);
}
简化后:
function Profile(props) {return (<div className="card"><Avatar {...props} /></div>);
}
传递JSX
可以把组件作为prop参数传递,父组件通过{children}来接收,类似于vue的slot
import Avatar from './Avatar.js';function Card({ children }) {return (<div className="card">{children}</div>);
}export default function Profile() {return (<Card><Avatarsize={100}person={{ name: 'Katsuko Saruhashi',imageId: 'YfeOqp2'}}/></Card>);
}
条件渲染
通过if判断渲染
通过变量来控制返回的jsx
if (isPacked) {return <li className="item">{name} ✔</li>;
}
return <li className="item">{name}</li>;
条件(三元)运算符 (? : )
还可以用更简洁的三元运算符进行条件渲染
return (<li className="item">{isPacked ? name + ' ✔' : name}</li>
);
逻辑与运算符(&&)
当你想在条件为真时渲染一些jsx,或者什么也不渲染,可以使用“&&”
return (<li className="item">{name} {isPacked && '✔'}</li>
);
渲染列表
可以通过js数组的filter() 和 map() 来过滤数据数组并将其转换为组件数组。
从数组中渲染组件
const people = ['Creola Katherine Johnson: mathematician','Mario José Molina-Pasquel Henríquez: chemist','Mohammad Abdus Salam: physicist','Percy Lavon Julian: chemist','Subrahmanyan Chandrasekhar: astrophysicist'
];export default function List() {const listItems = people.map(person =><li>{person}</li>);return <ul>{listItems}</ul>;
}
通过filter()方法过滤条目数组
const people = [{id: 0,name: 'Creola Katherine Johnson',profession: 'mathematician',
}, {id: 1,name: 'Mario José Molina-Pasquel Henríquez',profession: 'chemist',
}, {id: 2,name: 'Mohammad Abdus Salam',profession: 'physicist',
}, {name: 'Percy Lavon Julian',profession: 'chemist',
}, {name: 'Subrahmanyan Chandrasekhar',profession: 'astrophysicist',
}];
export default function List() {const chemists = people.filter(person =>person.profession === 'chemist');const listItems = chemists.map(person =><li><imgsrc={getImageUrl(person)}alt={person.name}/><p><b>{person.name}:</b>{' ' + person.profession + ' '}known for {person.accomplishment}</p></li>);return <ul>{listItems}</ul>;
}
响应事件
在组件内定义事件响应函数,并把函数作为属性值传递到JSX上
export default function Button() {function handleClick() {alert('You clicked me!');}return (<button onClick={handleClick}>Click me</button>);
}
也可以直接在JSX中内联事件
<button onClick={function handleClick() {alert('You clicked me!');
}}>
状态:组件的内存
组件内需要存储的数据叫做状态。状态相当于组件的内存,存放着需要记忆的数据。
使用useState()
import { useState } from 'react';
创建state使用useState()来创建,他需要给定一个初始值作为参数。创建一个数组来接收这个状态,这个数组包含一个state的名称,和一个修改这个state的方法。
const [isSent, setIsSent] = useState(false);
const [message, setMessage] = useState('Hi!');
修改state的值
state的值不能直接修改,需要借用useState提供的第二个参数。
setIsSent(true);
setXXX()方法会触发React进行重新渲染。
将state中的引用类型视为只读
如果state的值是数组或者对象,那么使用setXXX()方法修改时就不能直接修改原值,而是需要重新创建一份赋给state
对象
修改对象一般通过扩展运算符、Object.assign()等方法来复制原对象然后重新赋值给state
export default function Form() {const [person, setPerson] = useState({firstName: 'Barbara',lastName: 'Hepworth',email: 'bhepworth@sculpture.com'});function handleFirstNameChange(e) {setPerson({//通过扩展运算符复制一份原对象给新对象再赋值给state...person,firstName: e.target.value});}
数组
修改数组一般通过map()、filter()、slice()等方法复制一份新数组再赋值给state
import { useState } from 'react';let nextId = 0;export default function List() {const [name, setName] = useState('');const [artists, setArtists] = useState([]);return (<><h1>Inspiring sculptors:</h1><inputvalue={name}onChange={e => setName(e.target.value)}/><button onClick={() => {setArtists([...artists,{ id: nextId++, name: name }]);}}>Add</button><ul>{artists.map(artist => (<li key={artist.id}>{artist.name}</li>))}</ul></>);
}
Immer插件
如果对象或数组有深层嵌套用普通的复制方法比较复杂,使用immer插件可以简化操作。它可以让你像修改原数组那样直接修改对象的属性或数组中的某项值,但其实他在内部已经帮你创建了一个副本并赋予state
步骤
- 运行 npm install use-immer 以将 Immer 添加为依赖
- 然后用 import { useImmer } from ‘use-immer’ 替换 import { useState } from ‘react’
使用方法
import { useImmer } from 'use-immer';export default function Form() {const [person, updatePerson] = useImmer({name: 'Niki de Saint Phalle',artwork: {title: 'Blue Nana',city: 'Hamburg',image: 'https://i.imgur.com/Sd1AgUOm.jpg',}});function handleNameChange(e) {updatePerson(draft => {draft.name = e.target.value;});}function handleTitleChange(e) {updatePerson(draft => {draft.artwork.title = e.target.value;});}
组件通信
父传子通过props进行,子传父通过调用父组件定义的方法来实现,此方法通过prop传递给子组件
父传子
//子组件
function Child (prop){return <div>{props.msg}</div>
}//父组件
function Father (){
let msg = 'hello world'return (<Child msg={msg}></Child>)
}
子传父
// 子传父,通过 props 调用父组件的方法
this.props.handleClick(xxx)// 父组件中
<Child handleClick={this.handleClick}></Child>
兄弟传值
可以通过context来进行兄弟组件传值。context不仅可以用于兄弟组件传值,还可以用于更复杂关系的组件的传值。
引入
export const { Provider, Consumer } = React.createContext("sky")
在兄弟组件的共同上层定义一个Provider,通过provider中的value属性把想要传递的值赋予它
export default class ClassComp extends React.Component {constructor(props) {super(props)this.state = {name: 'tracer'}}render() {return (<Provider value={this.state.name}><div><h1>爷爷:{this.state.name}</h1><ClassComp2 /></div></Provider>)}
}
这个Provider所在的组件的所有下级都将共享这个数据。后代组件通过在该组件中创建的Consumer来获取值。
import { Consumer } from './ClassComp' //引入
export default class ClassComp2 extends React.Component {constructor(props) {super(props)this.state = {}}render() {return(<Consumer>{(value)=><div><h1>爸爸:{value}</h1><ClassComp3/></div>}</Consumer>)}
}
相关文章:
React尝鲜
组件 React的组件就是一个js函数,函数内部return一个由jsx语法创建的html代码片段。 //MyComp.js export default function MyComp(){return (<h1>我是新组件MyComp</h1>) } 在需要引入组件的地方import导入组件,并放在相应位置 //App.js…...
锯齿云服务器租赁使用教程
首先登陆锯齿云账号 网盘上传数据集与代码 随后我们需要做的是将所需要的数据集与代码上传到网盘(也可以直接在租用服务器后将数据集与代码传到服务器的硬盘上,但这样做会消耗大量时间,造成资源浪费) 点击工作空间:…...
HarmonyOS和OpenHarmony的区别
1.概要 众所周知,鸿蒙是华为开发的一款分布式操作系统。因为开发系统,最重要的是集思广益,大家共同维护。为了在IOS和Android之间生存,鸿蒙的茁壮成长一定是需要开源,各方助力才能实现。 在这种思想上,…...
Redis Stream消息队列之基本语法与使用方式
前言 本文的主角是Redis Stream,它是Redis5.0版本新增加的数据结构,主要用于消息队列,提供了消息的持久化和主备复制功能,可以让任何客户端访问任何时刻的数据,并且能记住每一个客户端的访问位置,还能保证…...
制造行业定制软件解决方案——工业信息采集平台
摘要:针对目前企业在线检测数据信号种类繁多,缺乏统一监控人员和及时处置措施等问题。蓝鹏测控开发针对企业工业生产的在线数据的集中采集分析平台,通过该工业信息采集平台可将企业日常各种仪表设备能够得到数据进行集中分析处理存储…...
[python]用python实现对arxml文件的操作
目录 关键词平台说明一、背景二、方法2.1 库2.2 code 关键词 python、excel、DBC、openpyxl 平台说明 项目Valuepython版本3.6 一、背景 有时候需要批量处理arxml文件(ARXML 文件符合 AUTOSAR 4.0 标准),但是工作量太大,阔以考虑用python。 二、方…...
pdf 在线编辑
https://smallpdf.com/edit-pdf#rapp 参考 https://zh.wikihow.com/%E5%B0%86%E5%9B%BE%E5%83%8F%E6%8F%92%E5%85%A5PDF...
自然语言处理(NLP):理解语言,赋能未来
目录 前言1 什么是NLP2 NLP的用途3 发展历史4 NLP的基本任务4.1 词性标注(Part-of-Speech Tagging)4.2 命名实体识别(Named Entity Recognition)4.3 共指消解(Co-reference Resolution)4.4 依存关系分析&am…...
FastAPI使用loguru时,出现重复日志打印的解决方案
首先看图,发现每个日志都被打印了3条。其实这个和uvicorn日志打印的设计有关,在uvicorn中有多个logger,分别是uvicorn、uvicorn.error、uvicorn.access 而LOGGING默认有一个属性propagate,这个属性为True时,子日志记录…...
构建每个聚类的profile和deletion_mean特征
通过summarize_clusters函数构建每个聚类的protein[cluster_profile]和protein[cluster_deletion_mean]特征。目的是把extra_msa信息反映到msa中。 集成函数数据处理流程: sample_msa ->make_masked_msa -> nearest_neighbor_clusters -> summarize_clu…...
Milvus数据一致性介绍及选择方法
1、Milvus 时钟机制 Milvus 通过时间戳水印来保障读链路的一致性,如下图所示,在往消息队列插入数据时, Milvus 不光会为这些插入记录打上时间戳,还会不间断地插入同步时间戳,以图中同步时间戳 syncTs1 为例࿰…...
异常处理和单元测试python
一、实验题目 异常处理和单元测试 二、实验目的 了解异常的基本概念和常用异常类。掌握异常处理的格式、处理方法。掌握断言语句的作用和使用方法。了解单元测试的基本概念和作用。掌握在Python中使用测试模块进行单元测试的方法和步骤。 三、实验内容 编程实现如下功能&a…...
蓝牙物联网在汽车领域的应用
I、蓝牙的技术特点 1998 年 5 月,瑞典爱立信、芬兰诺基亚、日本东芝、美国IBM 和英特尔公司五家著名厂商,在联合拓展短离线通信技术的标准化活动时提出了蓝牙技术的概念。蓝牙工作在无需许可的 2.4GHz 工业频段 (SIM)之上(我国的频段范围为2400.0~248…...
用23种设计模式打造一个cocos creator的游戏框架----(二十二)原型模式
1、模式标准 模式名称:原型模式 模式分类:创建型 模式意图:用原型实例指定创建对象的种类,并且通过复制这些原型创建新的对象 结构图: 适用于: 1、当一个系统应该独立于它的产品创建、构成和表示时 2、…...
paddle 55 使用Paddle Inference部署嵌入nms的PPYoloe模型(端到端fps达到52.63)
Paddle Inference 是飞桨的原生推理库,提供服务器端的高性能推理能力。由于 Paddle Inference 能力直接基于飞桨的训练算子,因此它支持飞桨训练出的所有模型的推理。paddle平台训练出的模型转换为静态图时可以选用Paddle Inference的框架进行推理,博主以前都是将静态图转换为…...
自动化测试工具-Selenium:WebDriver的API/方法使用全解
我们上一篇文章介绍了Selenium的三大组件,其中介绍了WebDriver是最重要的组件。在这里,我们将看到WebDriver常用的API/方法(注:这里使用Python语言来进行演示)。 1. WebDriver创建 打开VSCode,我们首先引…...
如何通过蓝牙串口启动智能物联网?
1、低功耗蓝牙(BLE)介绍 BLE 技术是一种低成本、短距离、可互操作的鲁棒性无线技术,工作在免许可的 2,4 GHZ 工业、科学、医学(Industrial Scientific Medical,ISM)频段。BLE在设计之初便被定位为一种超低功耗(Ultra Low Power,ULP)无线技术&…...
Linux---基础操作命令
内容导航 类别内容导航机器学习机器学习算法应用场景与评价指标机器学习算法—分类机器学习算法—回归机器学习算法—聚类机器学习算法—异常检测机器学习算法—时间序列数据可视化数据可视化—折线图数据可视化—箱线图数据可视化—柱状图数据可视化—饼图、环形图、雷达图统…...
uniapp怎么动态渲染导航栏的title?
直接在接口请求里面写入以下: 自己要什么参数就写什么参数 本人仅供参考: this.name res.data.data[i].name; console.log(名字, res.data.data[i].name); uni.setNavigationBarTitle({title: this.name}) 效果:...
【机器学习】决策树
参考课程视频:https://www.icourse163.org/course/NEU-1462101162?tid1471214452 1 概述 样子: 2 分裂 2.1 分裂原则 信息增益 信息增益比 基尼指数 3 终止 & 剪枝 3.1 终止条件 无需分裂 当前节点内样本同属一类 无法分裂 当前节点内…...
深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录
ASP.NET Core 是一个跨平台的开源框架,用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录,以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...
C++:std::is_convertible
C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...
抖音增长新引擎:品融电商,一站式全案代运营领跑者
抖音增长新引擎:品融电商,一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中,品牌如何破浪前行?自建团队成本高、效果难控;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...
2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师(题目+回答)
安全领域各种资源,学习文档,以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具,欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...
【Linux】Linux 系统默认的目录及作用说明
博主介绍:✌全网粉丝23W,CSDN博客专家、Java领域优质创作者,掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围:SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...
PostgreSQL——环境搭建
一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在࿰…...
pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)
目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 (1)输入单引号 (2)万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...
【Veristand】Veristand环境安装教程-Linux RT / Windows
首先声明,此教程是针对Simulink编译模型并导入Veristand中编写的,同时需要注意的是老用户编译可能用的是Veristand Model Framework,那个是历史版本,且NI不会再维护,新版本编译支持为VeriStand Model Generation Suppo…...
Modbus RTU与Modbus TCP详解指南
目录 1. Modbus协议基础 1.1 什么是Modbus? 1.2 Modbus协议历史 1.3 Modbus协议族 1.4 Modbus通信模型 🎭 主从架构 🔄 请求响应模式 2. Modbus RTU详解 2.1 RTU是什么? 2.2 RTU物理层 🔌 连接方式 ⚡ 通信参数 2.3 RTU数据帧格式 📦 帧结构详解 🔍…...
二维FDTD算法仿真
二维FDTD算法仿真,并带完全匹配层,输入波形为高斯波、平面波 FDTD_二维/FDTD.zip , 6075 FDTD_二维/FDTD_31.m , 1029 FDTD_二维/FDTD_32.m , 2806 FDTD_二维/FDTD_33.m , 3782 FDTD_二维/FDTD_34.m , 4182 FDTD_二维/FDTD_35.m , 4793...
