组件实例三大属性

目录

1-组件实例三大属性

1-1state 状态

1-1-1 state状态只能通过特定的方法进行修改

1-2 props

1-2-1 props的基本使用。

 1-2-2 对props进行限制

1-3 refs

1-3-1 字符串形式的ref（不推荐，但可能会有人使用，了解即可）

1-3-2 回调函数形式的ref

1-3-3 创建ref容器

---

1-组件实例三大属性

1-1state 状态

state状态是react中的改变dom渲染的核心，react中的数据驱动视图，说的就是state状态，当state状态的值发生变化时，页面的渲染也会随之变化，所以state又称之为响应式数据。

constructor(prop){
    super(prop);
      this.state = {
      name:'小明'
  }
 console.log(this);
}

 

1-1-1 state状态只能通过特定的方法进行修改

state状态存在于类的原型上，继承自React.Component，state中的值可以是任何类型，state的值修改有一定的要求，首先，不可直接对state的值进行修改，想要修改state的值需要使用setState函数修改state的值，当通过setState对state的值进行修改之后，会重新调用render函数，对虚拟dom进行重新渲染，然后对比虚拟dom与真实dom的区别，进行页面的重新渲染。

render() {
    return(
        <div>
            <h1>{this.state.name}</h1>
                <button onClick={this.changeName}>更改name</button>
        </div>
    )
    
}
changeName = (e)=>{
    this.state = {name:'小白'}
    console.log(this);
}

我们可以很清晰的看到，直接通过修改state的值可以修改，但是页面并没有进行响应式的改变，这是因为想要让页面进行响应式的改变，state更改想要变成响应式需要用特定的方法setState。

changeName = (e)=>{
    this.setState({name:'小白'})
    console.log(this);
}

 当我更改为useState后，state的状态就变成了响应式，更改时会让页面重新渲染。

1-2 props

1-2-1 props的基本使用。

在组件标签中可以直接写一些参数，类似于。

<Person name="jerry" age={19}  sex="男"/>

这种写入的参数，可以在组件内接受到,在类组件中输出this时，实例对象中会有一个props对象，其中存入的就是传入的数据

 可以通过解构赋值的形式，拿到传入的props的值。

const {name,age,sex} = this.props

注意，此值为只读属性，不可更改。

console.log(name); // jerry
name = 'tom'; // 报错
console.log(name);

由于函数式组件没有this，所以函数式组件中的props的位置变为形参。

function Person (props){
	console.log(props);
}

 1-2-2 对props进行限制

首先导入prop-types的库，然后使用组件名.propTypes对props进行过限制。

import PropTypes from 'prop-types';

//对标签属性进行类型、必要性的限制
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
}

1-3 refs

ref是react中获取到当前dom元素的方法，类似与jquery中的$(' '),返回的是元素本身。

1-3-1 字符串形式的ref（不推荐，但可能会有人使用，了解即可）

当标签内添加了ref='字符串'时，在实例对象的this中，会出现一个refs的属性，其中的key为添加的字符串，value为添加的元素本身，可通过原生操作dom的方法，获取元素上的某些属性。

<input ref="input1" type="text"/>

const {input1} = this.refs
alert(input1.value)

1-3-2 回调函数形式的ref

可以看出此种形式的ref不会存在于refs上，而是存在与实例对象的属性上，因为是通过回调函数操作的，元素本身会作为形参c传入到函数中，所以在实例对象的属性上可以访问到该元素。

setInfo = (c)=>{
	this.input1 = c;
}
<input ref={this.setInfo} type="text"/>

1-3-3 创建ref容器

通过react自带的api createRef可以创建一个ref的容器，一个容器只能绑定一个ref

myRef = React.createRef()

 使用时只需要在标签中写入ref = 容器名即可

<input ref={this.myRef} type="text"/>