react的组件

组件

组件是用来实现局部功能的代码和资源的集合(html/css/js),用来复用代码。
react中分为函数式组件和类式组件。函数式组件就是一个函数,函数的返回值就是组件的视图内容。类式组件就是通过class关键字创建的类,类式组件通过render函数返回视图内容。

函数式组件

function Good(){return <div><h1>news</h1></div>
}

类式组件

类式组件必须继承React.Component

class Good extends React.Component{}
  1. React解析组件标签,找到Good组件
  2. 发现组件是使用类定义的,随后new出来该类的实例,并通过该类实例调用到原型上的render()
  3. 将render返回的虚拟DOM转为真实DOM,随后呈现在页面中

简单组件和复杂组件

如果一个组件有状态就是复杂组件,如果一个组件没有状态就是简单组件。

组件实例的属性

组件实例属性包含state、props、refs这三个常用的属性。其中refs只能在类组件中使用,如果在函数式组件中想要使用refs需要使用其他的api获取元素引用。

state

state是组件对象最重要的属性,值是对象。组件被称为状态机,通过更新组件的state来更新对应的页面显示。

状态必须通过setState修改,setState()接收一个对象,对象中设置需要更改的key和value。

class Demo extends React.Component{state = {description:'hello'}handleClick(){this.setState({descriptin:'hello'});	}render(){return <div><span>{this.state.description}</span><button onClick={this.handleClick}>change</button></div>}
}

props

组件实例属性props指的是从外部传递给组件的值,props在组件内部是只读的,不能通过this.props.xxx修改。

class Person extends React.Component{render(){const {name,age,sex} = this.props;return <><ul><li>{name}</li><li>{age}</li><li>{sex}</li></ul></>}
}

我们可以通过propsTypes限制props的类型,通过defaultProps设置props的默认值。propsTypes和defaultProps都是类的静态成员,除了直接使用Person设置之外还可以通过类的语句块中通过static关键字设置。

// 限制props的类型
Person.propTypes = {name:PropTypes.string,age:PropTypes.number,sex:PropTypes.string
}
// 设置props的默认值
Person.defaultProps = {name:'hello'
}
// 向组件传递props
React.render(<Person name="Tom" age={18} sex="Man" />,document.getElementById('app'));
let p = {name:"Tom", age:18, sex:"Man" 
}
React.render(<Person {...p}/>,document.getElementById('test'));

static关键字设置propsTypes

class Person extends React.Component{static propsTypes = {name:PropTypes.string,age:PropTypes.number,sex:PropTypes.string}static defaultProps = {name:'hello'}render(){return <div>// ...</div>}
}

refs

组件实例属性refs,refs指的是获取元素的引用。通过给元素设置ref属性得到其引用。refs从使用方式上分为字符串类型、函数类型。字符串类型的如下所示:

class Person extends React.Component{render(){return <><input ref="input_left" type="text" placeholder="点击按钮提示数据" /><button onClick={this.tooltip}>点击提示数据</button><input ref="input_right" type="text" placeholder="失焦提示数据" /></>}
}
回调函数形式的refs

回调形式的ref在更新时会执行两次,第一次会传递一个null,第二次才会传递元素。这是因为在更新时会实例化一个新的对象,并重新渲染。

回调函数分为内联的回调函数和类绑定的回调函数

 class Person extends React.Component {state = {}static propTypes = {name: PropTypes.string,age: PropTypes.number,gender: PropTypes.string}static defaultProps = {name: 'hello'}constructor(props) {super(props);}tooltip = (e)=>{alert(this.input_left.value)}toolTipRight = () => {alert(this.input_right.value)}render() {return <div><input ref={(el) => {this.input_left = el;}} type="text" 			placeholder="点击按钮提示数据" /><button onClick={this.tooltip}>点击提示数据</button><input ref={(el) => {this.input_right = el;}} onBlur=			{this.toolTipRight} type="text" placeholder="失焦提示数据" /></div>}}
createRef的refs

除了上面的方式之外,还可以通过createRef创建容器,然后获取元素的引用。

class Person extends React.Component {myRef = React.createRef()myRef2 = React.createRef()state = {}constructor(props) {super(props);}tooltip = (e)=>{console.log(this.myRef)alert(this.myRef.current.value);}toolTipRight = () => {alert(this.myRef2.current.value);}render() {return <div><input ref={this.myRef} type="text" placeholder="点击按钮提示数据" /><button onClick={this.tooltip}>点击提示数据</button><input ref={this.myRef2} onBlur={this.toolTipRight} type="text" placeholder="失焦提示数据" /></div>}}

事件处理

通过onXxx属性指定事件处理函数。

  • React使用的是自定义事件,不是原生事件。为了更好的兼容性
  • React中的事件是通过委托方式处理的。为了高效

通过event.target得到发生的事件的DOM元素对象

受控组件

页面中所有输入类的DOM,随着输入把数据存入state就是受控组件。

 class Login extends React.Component {state = {userName:'',password:''}submit=(e)=>{e.preventDefault();const {userName,password} = this.state;}saveFormData = (key) => {return (e) => {this.setState({[key]: e.target.value});}}render() {return <form action="" onSubmit={this.submit}>用户名<input ref={(el) => this.userNameInput = el} onChange={this.saveFormData('userName')} type="text" name="username" />密码<input ref={(el) => this.passwordInput = el} onChange={this.saveFormData('password')} type="password" name="password" /> <button>登录</button></form>}}

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

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

相关文章

力扣每日一题(+日常水几题)

121. 买卖股票的最佳时机 - 力扣&#xff08;LeetCode&#xff09;(很水) class Solution { public:int maxProfit(vector<int>& prices) {int ans 0;int pre prices[0];for(auto & x : prices){pre min(pre,x);ans max(ans, x - pre);}return ans;} }; 64…

stl格式-3D三角形

文章目录 什么是stl文件?格式首选stl的语法1.这是一个stl格式的文件:(ASCII码)2.下面先举个例子(难度略微提示)补充:关于\<\<我试了一下:这个法线你随便写好像也没问题\>> 3.来个立方体4.最后再写一个由三个直角形组成的立方体(直棱锥)5.amend 修正(右手定则,法线…

Java 多态

Java 多态 目录 Java 多态 实例 虚方法 多态是同一个行为具有多个不同表现形式或形态的能力。 多态性是对象多种表现形式的体现。 比如我们说"宠物"这个对象&#xff0c;它就有很多不同的表达或实现&#xff0c;比如有小猫、小狗、蜥蜴等等。那么我到宠物店说&q…

决策树剪枝:解决模型过拟合【决策树、机器学习】

如何通过剪枝解决决策树的过拟合问题 决策树是一种强大的机器学习算法&#xff0c;用于解决分类和回归问题。决策树模型通过树状结构的决策规则来进行预测&#xff0c;但在构建决策树时&#xff0c;常常会出现过拟合的问题&#xff0c;即模型在训练数据上表现出色&#xff0c;…

【ArcGIS Pro二次开发】(69):使用MapTool实现隐藏和隔离图层

一、MapTool简介 在ArcGIS Pro SDK中&#xff0c;MapTool是一个重要的组件&#xff0c;用于自定义地图操作工具&#xff0c;使用户能够在ArcGIS Pro中执行特定的地图交互操作。 在VS中添加新项&#xff0c;可以找到ArcGIS Pro 地图工具&#xff0c;即为MapTool。 新建后打开c…

HNU-CSer的推免经历记录

写在前面 本篇不是一个经验贴&#xff0c;不包含任何考核的具体内容。关于本校本年的推免情况&#xff0c;一些准备资料和我校主要推免到的学校的基本情况介绍我正在整理&#xff0c;后续完成后会放链接到这里&#xff08;也是因为一部分这个原因才决定写这一篇&#xff0c;同学…

站点信息搜集

站点信息搜集 1. whatweb 工具 kali自带的工具, 命令: whatweb httpbin.org http://httpbin.org [200 OK] Country[UNITED STATES][US], Email[mekennethreitz.org], HTML5, HTTPServer[gunicorn/19.9.0], IP[54.161.141.91], JQuery, Script[text/javascript], Title[ht…

javaee SpringMVC 乱码问题解决

方法一 在web.xml文件中注册过滤器 <!-- 注册过滤器 设置编码 --><filter><filter-name>CharacterEncodingFilter</filter-name><filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class><init-param&…

优雅的写Controller 层代码这样写才可以

前 言 本篇主要要介绍的就是controller层的处理&#xff0c;一个完整的后端请求由4部分组成&#xff1a; 接口地址(也就是URL地址)请求方式(一般就是get、set&#xff0c;当然还有put、delete)请求数据(request&#xff0c;有head跟body)响应数据(response) 本篇将解决以下3个…

Vue+element开发Simple Admin后端管理系统页面

最近看到各种admin&#xff0c;头大&#xff0c;内容太多&#xff0c;根本不知道怎么改。所以制作了这个项目&#xff0c;只包含框架、和开发中最常用的表格和表单&#xff0c;不用自己从头搭建架构&#xff0c;同时也容易上手二次开发。可以轻松从其他开源项目整合到本项目。项…

基于Qt Creator开发的坦克大战小游戏

目录 介绍开发环境技术介绍安装说明项目目录设计思想项目介绍运行演示知识点记录Gitee源码链接 介绍 &#xff01;&#xff01;&#xff01;资源图片是从网上免费下载&#xff0c;源码都是原创&#xff0c;供个人学习使用&#xff0c;非盈利&#xff01;&#xff01;&#xff…

UE5报错及解决办法

1、编译报错&#xff0c;内容如下&#xff1a; Unable to build while Live Coding is active. Exit the editor and game, or press CtrlAltF11 if iterating on code in the editor or game 解决办法 取消Enable Live Coding勾选

Java编码

Java编码问题 Unicode与码点 所谓Unicode就是全世界的字符字典&#xff0c;也就是把字符给一个编号&#xff0c;这个编码就是码点。比如 2. 编码 由于这种分配的编码无论从占用空间角度&#xff0c;还是读取速度&#xff0c;以及逻辑划分角度&#xff0c;都不是完善。所以出…

【Java-LangChain:面向开发者的提示工程-7】文本扩展

第七章 文本扩展 扩展是将短文本&#xff08;例如一组说明或主题列表&#xff09;输入到大型语言模型中&#xff0c;让模型生成更长的文本&#xff08;例如基于某个主题的电子邮件或论文&#xff09;。这种应用是一把双刃剑&#xff0c;好处例如将大型语言模型用作头脑风暴的伙…

了解”变分下界“

“变分下界”&#xff1a;在变分推断中&#xff0c;我们试图找到一个近似概率分布q(x)来逼近真实的概率分布p(x)。变分下界是一种用于评估近似概率分布质量的指标&#xff0c;通常用来求解最优的近似分布。它的计算涉及到对概率分布的积分或期望的估计

分布式搜索引擎es-3

文章目录 数据聚合聚合的种类RestAPI实现聚合 自动补全自定义拼音分词器自动补全查询案例&#xff1a;实现酒店搜索框自动补全自动补全的javaAPI实现搜索框自动补全 口述自动补全数据同步集群集群的分布式存储集群分布式查询集群故障转移 数据聚合 什么是聚合&#xff1f; 聚合…

【面试经典150 | 矩阵】旋转图像

文章目录 写在前面Tag题目来源题目解读解题思路方法一&#xff1a;原地旋转方法二&#xff1a;翻转代替旋转 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法&#xff0c;两到三天更新一篇文章&#xff0c;欢迎催更…… 专栏内容以分析题目为主&#xff0c;并附带…

【Cesium创造属于你的地球】相机系统

相机系统里面有setView&#xff0c;flyTo&#xff0c;lookAt&#xff0c;viewBoundingsphere这几种方法&#xff0c;以下是相关的使用方法&#xff0c;学起来&#xff01;&#xff01;&#xff01; setView 该方法可以直接切换相机视口&#xff0c;从而不需要通过一个飞入的效…

ruoyi-启动

1 springboot 版本 git 地址 ruoyi-vue-pro: &#x1f525; 官方推荐 &#x1f525; RuoYi-Vue 全新 Pro 版本&#xff0c;优化重构所有功能。基于 Spring Boot MyBatis Plus Vue & Element 实现的后台管理系统 微信小程序&#xff0c;支持 RBAC 动态权限、数据权限…

深度学习(1)---卷积神经网络(CNN)

文章目录 一、发展历史1.1 CNN简要说明1.2 猫的视觉实验1.3 新认知机1.4 LeNet-51.5 AlexNet 二、卷积层2.1 图像识别特点2.2 卷积运算2.3 卷积核2.4 填充和步长2.5 卷积计算公式2.6 多通道卷积 三、池化层 一、发展历史 1.1 CNN简要说明 1. 卷积神经网络&#xff08;Convolut…