React中的三大属性
一、前言：
属性1：state
属性2：props
属性3：ref 与事件处理
二、主要内容：
属性1：state
1，认识：
1) state 是组件对象中最重要的属性，值是一个对象（可以包含多个数组，有点像vue中的data属性）
2）组件被称为“状态机”，通过更新组件的state来更新对应的页面显示
2，操作state通常要经历三个状态
) 初始化状态:
constructor (props) {
super(props)
this.state = {
stateProp1 : value1,
stateProp2 : value2
}
} ) 读取某个状态值
this.state.statePropertyName ) 更新状态---->组件界面更新
this.setState({
stateProp1 : value1,
stateProp2 : value2
})
3，案例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="obj"></div>
<script type="text/javascript" src="./js/react.development.js"></script>
<script type="text/javascript" src="./js/react-dom.development.js"></script>
<script type="text/javascript" src="./js/babel.min.js"></script>
<script type="text/babel"> //自定义Like组件
class Like extends React.Component{
//定义初始化状态
constructor(props){
super(props) //交给父类去执行
this.state={ //定义state属性，并添加一个isLikeMe数据
isLikeMe:false } //强制绑定，让函数handleClick等于当前组件
this.handleClick= this.handleClick.bind(this) }
//定义操作函数，注意函数里面的this是undefined handleClick(){
//更新state状态
const isLikeMe = !this.state.isLikeMe
this.setState({
isLikeMe
}) } render(){
//读取状态
const {isLikeMe} = this.state
return <h1 onClick={this.handleClick}>{isLikeMe ? '我喜欢你':'你喜欢我'}</h1> } } //渲染
ReactDOM.render(<Like />, document.getElementById('obj'))
</script>
</body>
</html>
4，注意点：
1）更新 state 状态定义的函数里面的 this 不是指向当前对象的，需要用 bind 强制绑定this为当前组件
2）强制绑定 this ： this.handleClick = this.handleClick.bind(this)
属性1：props
1，理解：
1) 每个组件对象都会有 props 属性
2）组件标签中所以的属性都保存在 props 中
2，作用：
1）通过标签属性从组件外向组件内传递变化的数据
2）组件内部不需要修改 props 数据
3，props 的操作：
//1）内部读取某个属性值 this.props.propertyName //2) 对props中的属性值进行类型限制和必要性限制 方法一：新版本中已经被弃用
Person组件名：
Person.propTypes={ name: React.PropTypes.string.isRequired,
age:React.PropTypes.number.isRequired
} 方法二：
需要用到prop-types.js文件
Person.propTypes={
name:PropTypes.string.isRequired } //3）扩展属性：对象的所有属性通过props传递
<Person {...person} /> //默认传递了所有属性 //4)默认属性值
Person.defaultProps = { name:"Mary" } //5)组件类的构造函数，
constructor(props){ super(props)
console.log(props)//里面存放所有属性 }
4，举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="ul"></div>
<script type="text/javascript" src="./js/react.development.js"></script>
<script type="text/javascript" src="./js/react-dom.development.js"></script>
<script type="text/javascript" src="./js/prop-types.js"></script>
<script type="text/javascript" src="./js/babel.min.js"></script>
<script type="text/babel"> function List(props){ return (
<ul>
<li>姓名：{props.name}</li>
<li>年龄: {props.age}</li>
<li>性别:{props.sex}</li>
</ul> ) } const person ={
name:'xxm',
age:,
sex:'女'
} //设置默认属性
List.defaultProps={ age:,
sex:"男" } //对类型进行限制和必要性限制
List.propTypes={
name:PropTypes.string.isRequired }
//使用扩展属性
ReactDOM.render(<List {...person}/>, document.getElementById('ul'))
</script>
</body>
</html>
属性3：ref与事件处理
1，理解：
1）组件内的标签都可以定义 ref 属性来标识自己
2）在组件中可以通过 this.msglnput 来的到真实的 DOM 元素
3）作用：通过 ref 获取组件特定的标签对象，进行读取相关数据
//ref使用方式一： <input type="text" ref="content"/> //ref使用方式二：
<input type="text" ref={input=>this.input=input}/> //input=>this.input=input 的含义是将当前的input 赋值给组件里面的input
2，事件处理
1）通过onXxx属性指定组件的事件处理函数
2）React中的事件是通过事件委托方式处理的（委托给组件最外层的元素）
3）通过event.target可以得到发生事件的DOM元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="obj1"></div>
<script type="text/javascript" src="./js/react.development.js"></script>
<script type="text/javascript" src="./js/react-dom.development.js"></script>
<script type="text/javascript" src="./js/prop-types.js"></script>
<script type="text/javascript" src="./js/babel.min.js"></script>
<script type="text/babel"> class MyComponent extends React.Component{ constructor(props){
super(props)
//给处理函数强制绑定this
this.handleClick=this.handleClick.bind(this)
this.handleBlur = this.handleBlur.bind(this) } handleClick(){ alert(this.input.value) } handleBlur(event){ alert(event.target.value)
} render(){ return (
<div>
<input type="text" ref="content"/>
<input type="text" ref={input=>this.input=input}/>
<button onClick={this.handleClick}>点击按钮</button>
<input type="text" placeholder="请输入数据" onBlur={this.handleBlur} />
</div>
) } } ReactDOM.render(<MyComponent />, document.getElementById("obj1"))
</script>
</body>
</html>
三，总结
React中props和state都是存储数据的区别如下
1）state: 组件自身内部可变化的数据
2）props: 从组件外部向组件内部传递数据，组件内部只读取不修改
注意点：
1）组件内置的方法中的this为组件对象，z
2) 在组件类中自定义的处理函数方法的this默认为null 所以需要强制绑定
React中的三大属性的更多相关文章
- react 中的路由 属性exact
https://www.cnblogs.com/nailc/p/8718137.html(copy)
- React 中的key值
在react中必须要有key值,key不是用来提升react的性能的,react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key p ...
- 【react】---react中key值的作用
一.React中key值得作用 react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的,而是给React自己使用,有了key属性后,就可以与组件建立了一种对应关系,简单说,react利 ...
- react的三大属性
react的三大属性 state props refs props 来自外部属性 states 来自内部状态 refs 用于表示组件内某个元素 state基础(最重要的属性) state是组件对象最 ...
- React组件三大属性之 refs
React组件三大属性之 refs refs属性 1) 组件内的标签都可以定义ref属性来标识自己 a. <input type="text" ref={input => ...
- React组件三大属性之 props
React组件三大属性之 props 理解1) 每个组件对象都会有props(properties的简写)属性2) 组件标签的所有属性都保存在props中 作用1) 通过标签属性从组件外向组件内传递变 ...
- React组件三大属性之state
React组件三大属性之state 组件被称为"状态机", 页面的显示是根据组件的state属性的数据来显示 理解1) state是组件对象最重要的属性, 值是对象(可以包含多个数 ...
- React 三大属性state,props,refs以及组件嵌套的应用
React 三大属性state,props,refs以及组件嵌套的应用 该项目实现了一个简单的表单输入添加列表的内容 代码如下 <!DOCTYPE html> <html> & ...
- JS中Array数组的三大属性用法
原文:JS中Array数组的三大属性用法 Array数组主要有3大属性,它们分别是length属性.prototype属性和constructor属性. JS操作Array数组的方法及属性 本文总结了 ...
随机推荐
- 如何给HTML页面设置行高
设置行高 由于简单还是老样子直接上代码了哦,注意:line-height属性值可以使用固定值如:20px..和百分比如:20%. 如果想让文字垂直居中如下:行高的主要作用是用来设置文本的垂直方向居中对 ...
- DIY客户端框架
C/S类型的客户端做过好多轮了,在架构上每次都调整优化一部分,慢慢的形成了DIY的框架性东西. 可是最近这一看呢,已经不像MVC了,然后有一天看到了MVP概念,咦!很像.再一看,嗯,就该是MVP. M ...
- Android 蓝牙开发（3）——蓝牙的详细介绍
前面的两篇文章,主要是在 Android 官网关于蓝牙介绍的基础上加上自己的理解完成的.主要针对的是 Android 开发中的一些 API 的使用. 第一篇文章 Android 蓝牙开发(1) 主要是 ...
- ES 25 - Elasticsearch的分页查询及其深分页问题 (deep paging)
目录 1 分页查询方法 2 分页查询的deep paging问题 1 分页查询方法 在GET请求中拼接from和size参数 // 查询10条数据, 默认从第0条数据开始 GET book_shop/ ...
- Linux 查看 添加 修改路由
最近搭建vpn, 使用 ssh 隧道一直在涉及路由相关问题,今天简单整理一下,方便下次使用: 查看路由: [jsi@localhost Desktop]$ route Kernel IP routin ...
- Python格式化输出和深浅复制
字符串的四种拼接方法,常用格式化 deepcopy(深复制) bytes 和 bytearray 的基本用法 字符串拼接 使用 + 格式化字符串 使用join 用单引号内的字符来拼接,参数填一个整体 ...
- Centos7安装vsftp服务
我们需要向centos操作系统的服务器上上传文件或者下载文件,这时候,ftp有必要安装下, 我们选择主流的vsftp: 第一步:安装vsftp yum install -y vsftpd 第二步:设置 ...
- Java学习笔记（1）--- 简介
简介: 注:和之前的C不一样,本人没有学过java,所以内容上可能会相对详细一些. 主要特性: 1.这跟c++一样是面对对象语言: Java语言提供类.接口和继承等面向对象的特性,为了简单起见,只支持 ...
- Ubuntu18.04连接蓝牙耳机
使用的耳机是索尼WI-SP500,打开设置,找到Bluetooth,直接连接(WI-SP500在连接第二台设备时,需要长按开机键7秒才行), 保证Output选择需要连接的耳机,然后确保Profile ...
- windows宿主机和docker容器设置挂载共享文件夹
docker容器内的程序经常需要访问.调用宿主机目录中的数据,每次都要导入导出非常麻烦费力. 接下来,一步步实现将宿主机的指定文件夹挂载到docker容器中. 1. 打开Oracle VM Vitua ...