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规则

  1. 要从组件返回多个元素,使用一个父标签封装他们。如果你不想在标记中额外添加div可以使用<></>
  2. JSX要求标记被显示闭合:像这样的自闭标签一定要写成,想
  3. 这样的环绕标签一定要写成
  4. 驼峰式大多数东西。比如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
步骤

  1. 运行 npm install use-immer 以将 Immer 添加为依赖
  2. 然后用 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;});}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/238117.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用C#也能做机器学习?

前言✨ 说到机器学习&#xff0c;大家可能都不陌生&#xff0c;但是用C#来做机器学习&#xff0c;可能很多人还第一次听说。其实在C#中基于ML.NET也是可以做机器学习的&#xff0c;这种方式比较适合.NET程序员在项目中集成机器学习模型&#xff0c;不太适合专门学习机器学习&a…

大规模采用奇点临近?Web3应用爆发离不开这个“支撑”赛道

作者&#xff5c;Jason Jiang 数据是当今世界最具价值的资源&#xff0c;也是数字掘金的必争之地。尽管Web3迄今仍有诸多争议&#xff0c;但随着铭文、Gamefi、DeFi等链上生态的多样化发展&#xff0c;我们正身处Web3应用爆发的洪流之中&#xff0c;区块链数据赛道也因此备受关…

vue关闭当前路由页面并跳转到其父页面

1.dom中添加关闭或取消按钮 <el-button type"primary" class"blueLinearbg cancelBtn" click"cancel" >取 消</el-button>2.cancel方法中 /*取消或关闭*/cancel(){this.$store.dispatch("tagsView/delView", this.$route)…

电梯机房【摊鸡蛋】

小伍&#xff1a;大家好&#xff0c;今天小伍给大家表演个机房【摊鸡蛋】&#xff1b; &#xff08; 哈哈哈 &#x1f602;&#x1f602;&#x1f602; &#xff09; 523能源&#xff1a;别闹了&#xff0c;机房里连个锅都没有&#xff0c;怎么摊鸡蛋啊&#xff1f; 小伍&am…

leetcode做题笔记2866. 美丽塔 II

给你一个长度为 n 下标从 0 开始的整数数组 maxHeights 。 你的任务是在坐标轴上建 n 座塔。第 i 座塔的下标为 i &#xff0c;高度为 heights[i] 。 如果以下条件满足&#xff0c;我们称这些塔是 美丽 的&#xff1a; 1 < heights[i] < maxHeights[i]heights 是一个 …

论文阅读:Long-Term Visual Simultaneous Localization and Mapping

论文摘要指出&#xff0c;为了在长期变化的环境中准确进行定位&#xff0c;提出了一种新型的长期视觉SLAM&#xff08;同步定位与地图构建&#xff09;系统&#xff0c;该系统具备地图预测和动态物体移除功能。系统首先设计了一个高效的视觉点云匹配算法&#xff0c;将2D像素信…

基础数论1

文章目录 质数质因数分解 约数 g c d gcd gcd求最大公约数 质数 质因数分解 算术基本定理&#xff1a; 任何一个大于 1 的正整数都能唯一分解为有限个质数的乘积&#xff0c;可以写作&#xff1a; 任何一个大于1的正整数都能唯一分解为有限个质数的乘积&#xff0c;可以写作…

基于javaWeb的長安智慧医疗管理系统设计与实现论文

長安智慧医疗管理系统 摘 要&#xff1a;如今社会上各行各业&#xff0c;都在用属于自己专用的软件来进行工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。互联网的发展&#xff0c;离不开一些新的技术&#xff0c;而新技术的产生往往是为了解决…

Centos7在安装Graylog时新安装MongoDB报错端口不监听服务不启动无法运行启动失败

由于虚拟机服务器上需要安装Graylog需要安装MongoDB&#xff0c;尝试官网下载安装包&#xff0c;和yum安装均无法正常启动&#xff0c;折腾了好几天&#xff0c;重装了十几次&#xff0c;网上搜索了很多很多资料&#xff0c;均无法正常运行&#xff0c;百度上搜索各种文档&…

Java代码审计Mybatis注入文件上传下载读取(非常详细!!)

目录 0x00 前言 0x01 Mybatis注入审计 - 若依&#xff08;Ruoyi&#xff09;后台管理系统 4.6.0 1、项目介绍与部署 - Ruoyi 2、若依 Ruoyi - Mybatis注入 - 代码审计 3、代审常搜词 - Java SQL 注入 0x02 文件上传漏洞审计 - Inxedu && Tmall 1、项目介绍与部署…

Java智慧工地源码 SAAS智慧工地源码 智慧工地管理可视化平台源码 带移动APP

一、系统主要功能介绍 系统功能介绍&#xff1a; 【项目人员管理】 1. 项目管理&#xff1a;项目名称、施工单位名称、项目地址、项目地址、总造价、总面积、施工准可证、开工日期、计划竣工日期、项目状态等。 2. 人员信息管理&#xff1a;支持身份证及人脸信息采集&#…

MyBatis:动态 SQL 标签

MyBatis 动态 SQL 标签if 标签where 标签trim 标签choose 、when 、otherwise 标签foreach 标签附 动态 SQL 标签 MyBatis 动态 SQL 标签&#xff0c;是一组预定义的标签&#xff0c;用于构建动态的 SQL 语句&#xff0c;允许在 SQL 语句中使用条件、循环和迭代等逻辑。通过使…

JSP 和 servlet 有什么区别?

JSP 和 servlet 有什么区别&#xff1f; JavaServer Pages&#xff08;JSP&#xff09;和Servlet都是Java Web开发中的技术&#xff0c;它们有不同的角色和用途。 JSP&#xff08;JavaServer Pages&#xff09;&#xff1a; 角色&#xff1a; JSP 是一种视图技术&#xff0c…

速盾网络:sdk游戏盾有什么作用?

速盾cdn是一款非常优秀的CDN加速服务&#xff0c;它能够帮助游戏开发者们提升游戏的性能和稳定性。其中&#xff0c;速盾cdn的sdk游戏盾是其一项非常实用的功能&#xff0c;它能够为游戏提供更加稳定和快速的网络连接。 首先&#xff0c;让我们来了解一下什么是sdk游戏…

利用Matplotlib画简单的线形图

实验题目&#xff1a;简单的线形图 实验目的&#xff1a;利用Matplotlib画简单的线形图 实验环境&#xff1a;海豚大数据和人工智能实验室&#xff0c;使用的Python库 名称 版本 简介 numpy 1.16.0 线性代数 Pandas 0.25.0 数据分析 Matplotlib 3.1.0 数据可视化 …

第21课 SQL入门之使用游标

文章目录 21.1 游标21.2 使用游标21.2.1 创建游标21.2.2 使用游标21.2.3 关闭游标 这一课将讲授什么是游标&#xff0c;如何使用游标。 21.1 游标 SQL检索操作返回一组称为结果集的行&#xff0c;这组返回的行都是与SQL语句相匹配的行&#xff08;零行或多行&#xff09;。简单…

备份至关重要!如何解决iCloud的上次备份无法完成的问题

将iPhone和iPad备份到iCloud对于在设备发生故障或丢失时确保数据安全至关重要。但iOS用户有时会收到一条令人不安的消息&#xff0c;“上次备份无法完成。”下面我们来看看可能导致此问题的原因&#xff0c;如何解决此问题&#xff0c;并使你的iCloud备份再次顺利运行。 这些故…

技术分享-Jenkins

持续集成及Jenkins介绍 软件开发生命周期叫SDLC&#xff08;Software Development Life Cycle&#xff09;&#xff0c;集合了计划、开发、测试、部署过程。 在平常的开发过程中&#xff0c; 需要频繁地&#xff08;一天多次&#xff09;将代码集成到主干&#xff0c;这个叫持…

闭包 闭包理解 闭包的应用实例

闭包 形成闭包的条件&#xff1a;一个函数访问外部的变量就形成了闭包 用闭包的好处&#xff1a; (1)可以通过闭包函数形成独立实例的变量 (2)不会造成全局污染 代码调试&#xff0c;演示闭包形成过程 <script> //函数内部访问外部的变量&#xff0c;就形成了闭包functi…

Leetcode 406 根据身高重建队列

题意理解&#xff1a; people [[7,0],[4,4],[7,1],[5,0],[6,1],[5,2]] 给定一个二维数组&#xff0c;&#xff08;h,k&#xff09;h表示此人身高&#xff0c;k表示前面有几个人比他高。 我们按照每个人的h,k两个维度的需求给每个人排在合适的位置。 如&#xff1a; [5,0][7,0]…