React组件三大核心属性state、props、refs

一、state

1.state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
2.组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
3.注意
3.1.组件中render方法中的this为组件实例对象
3.2.组件自定义的方法中this为undefined，如何解决？
a)强制绑定this: 通过函数对象的bind()
b)箭头函数
3.3.状态数据，不能直接修改或更新

// 定义初始状态
state = {count:0,isHot:false}
//获取原来的isHot值
const {isHot} = this.state.isHot
//严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。
this.setState({isHot:!isHot})
console.log(this);

//严重注意：状态(state)不可直接更改，下面这行就是直接更改！！！
//this.state.isHot = !isHot //这是错误的写法

二、 props

1.理解：
1.每个组件对象都会有props(properties的简写)属性
2.组件标签的所有属性都保存在props中
2.作用：
1.通过标签属性从组件外向组件内传递变化的数据
2.注意: 组件内部不要修改props数据
3.基本使用

// 传值 方式一：
<Person name="jerry" age={19}  sex="男"/> 
// 传值 方式二：
const p = {name:'老刘',age:18,sex:'女'}
<Person {...p}/>

// 拿值
const {name,age,sex} = this.props

4.对props进行限制
首先props是只读的，可以对props进行传值约束限制

//对标签属性进行类型、必要性的限制
Person.propTypes = {
	name:PropTypes.string.isRequired, //限制name必传，且为字符串
	sex:PropTypes.string,//限制sex为字符串
	age:PropTypes.number,//限制age为数值
	speak:PropTypes.func,//限制speak为函数
}
//指定默认标签属性值
Person.defaultProps = {
	sex:'男',//sex默认值为男
	age:18 //age默认值为18
}
// 按照约束进行传值
const p = {name:'老刘',age:18,sex:'女'}
<Person {...p}/>
// 拿值
const {name,age,sex} = this.props
//props是只读的
//this.props.name = 'jack' //此行代码会报错，因为props是只读的

也可以使用 static 关键字 对props进行传值约束限制

//对标签属性进行类型、必要性的限制
static propTypes = {
	name:PropTypes.string.isRequired, //限制name必传，且为字符串
	sex:PropTypes.string,//限制sex为字符串
	age:PropTypes.number,//限制age为数值
}

//指定默认标签属性值
static defaultProps = {
	sex:'男',//sex默认值为男
	age:18 //age默认值为18
}

三、refs与事件处理

要获取渲染后的节点，我们可以使用 ref 。 这个属性相当于 id 属性。是节点的唯一标识。

使用 ref 获取节点，React 提供了 3 种方式。字符串形式的 ref 。回调函数形式的 ref 。createRef API 形式的 ref。
1.字符串形式
字符串形式的 ref 使用方法与 id 很类似 。在需要标识的标签里 通过 ref = “字符串值”就可以标识标签节点 。
在渲染时 ，会在实例的 refs 属性（React创建） 上增加一个键值对。键为属性的值，值是标签本身的节点。
在使用时，通过引用实例里的 refs.节点ref属性值 访问目标节点

//展示左侧输入框的数据
showData = ()=>{
	const {input1} = this.refs
	alert(input1.value)
}

showData2 = ()=>{
	const {input2} = this.refs
	alert(input2.value)
}
render(){
	return(
		<div>
			<input ref="input1" type="text" placeholder="点击按钮提示数据"/>&nbsp;
			<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
			<input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
		</div>
	)
}

注意：字符串形式的 ref 官方已经不推荐使用，并且在将来可能抛弃。因为效率比较低。但当前还支持这个方法。
2.回调形式的 ref
回调形式的 ref 即 ref 属性的值不是一个字符串 ，而是一个回调函数。
这个回调函数会在渲染时被执行。并且接收一个参数，就是节点本身。
通过获取到的节点参数，把节点赋值到实例上，我们就可以在其他地方操作这个节点了。
回调函数可以有两种方式 ：
（1）行内的匿名箭头函数
第一次渲染时 ，回调执行一次，之后每一次更新回调执行两个。第一次传入参数是 null .第二次才是节点本身。
（2）实例上的箭头函数。
只会执行一次，之后更新渲染时也不会重新执行

showData = ()=>{
	const {input1} = this
	alert(input1.value)
}

showData2 = ()=>{
	const {input2} = this
	alert(input2.value)
}
render(){
	return(
		<div>
			<input ref={c => this.input1 = c } type="text" placeholder="点击按钮提示数据"/>&nbsp;
			<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
			<input onBlur={this.showData2} ref={c => this.input2 = c } type="text" placeholder="失去焦点提示数据"/>&nbsp;
		</div>
	)
}

3.createRef API 方式的 ref
React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的，如果需要在实例上保存多个节点，可以多次调用此API

myRef = React.createRef()

然后在标签的 ref 属性内 直接放入实例创建的这个容器。

ref = {this.myRef}

在渲染时，React会将节点放到 实例的 myRef 属性里。通过属性的 current属性访问节点

this.myRef.current

myRef = React.createRef()
myRef2 = React.createRef()

showData = ()=>{
	alert(this.myRef.current.value);
}

showData2 = ()=>{
	alert(this.myRef2.current.value);
}
render(){
	return(
		<div>
			<input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>&nbsp;
			<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
			<input onBlur={this.showData2} ref={this.myRef2} type="text" placeholder="失去焦点提示数据"/>&nbsp;
		</div>
	)
}