一、组件状态
- 什么是组件状态?
- 组件状态是指组件可以自行维护的数据。
- 组件状态仅在类组件中有效。
- 状态本质上是类组件的一个属性,一个对象。
二、状态初始化
- 在类组件的构造函数中添加state,状态是必须要初始化的,否则为undefined。
constructor(props){
super(props);
this.state = {
n:this.props.number
}
}
- 在类组件中直接添加state,该方法属于JS Next 语法,目前处于实验阶段。
import React, { Component } from 'react'
export default class Tick extends Component {
state = {
left: this.props.number,
n: 123
}
constructor(props) {
super(props);
}
render() {
return (<div></div>)
}
}
三、状态的变化
- 改变组件状态不能直接用this.state.XXX来改变,React无法监控到状态发生了变化。
- 改变状态要用this.setState(param),该函数为父类提供的构造函数,一旦调用该函数,组件会重新渲染。
- param是一个对象,函数执行时,param会混入到this.state对象中。
- 即如果param中有属性与this.state中的属性相同,那么this.state中的属性会被覆盖。
- 如果属性不相同,则param中的属性会添加到this.state中。
import React, { Component } from 'react';
export default class Tick extends Component {
constructor(props){
super(props);
this.state = {
n:this.props.number
}
this.timer = setInterval(()=>{
this.setState({
n:this.state.n-1
})
},1000);
}
render() {
return (
<>
<h1>{this.state.n}</h1>
</>
)
}
}
四、组件的数据来源
- 目前组件中数据的来源有如下两种途径。
- props:该数据是由组件的使用者传递的数据,所有权不属于自身,所以组件无法改变数据。
- state:该数组是由组件自身创建的,所有权属于组件自身,因此组件有权改变该数据。
五、案例解析
- 组件Test.js中,组件A中的状态数据n数据流向依次是A->B->C
import React, { Component } from 'react'
export default class A extends Component {
state = {
n: 123
}
constructor(props) {
super(props);
setInterval(() => {
this.setState({
n: this.state.n - 1
})
}, 1000);
}
render() {
console.log("A组件重新渲染了")
return (
<div>
<B n={this.state.n} />
</div>
)
}
}
function B(props) {
return <div>
B组件:{props.n}
<C n={props.n} />
</div>
}
function C(props) {
return <div>
C组件:{props.n}
</div>
}
import React from 'react';
import ReactDOM from 'react-dom';
import A from "./components/Test"
ReactDOM.render(<A/>, document.getElementById('root'))
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a6bc3298618899678375421feb1e2401.gif#pic_center)
- 该案例中组件A数据变化导致组件B组件C数据依次变化。
- 这说明数据属于谁,谁就有权利更改,该案例中A自己更改了数据,假如组件A还有一个父组件,但是父组件是不能修改A数据的。
- 该案例同样说明了React数据流是自顶向下流动的。