7.React组件状态

一、组件状态

1. 什么是组件状态？

• 组件状态是指组件可以自行维护的数据。
• 组件状态仅在类组件中有效。
• 状态本质上是类组件的一个属性，一个对象。

二、状态初始化

1. 在类组件的构造函数中添加state，状态是必须要初始化的，否则为undefined。

constructor(props){
        super(props);
        this.state = {
            n:this.props.number
        }
    }

2. 在类组件中直接添加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>)
    }
}

三、状态的变化

1. 改变组件状态不能直接用this.state.XXX来改变，React无法监控到状态发生了变化。
2. 改变状态要用this.setState(param)，该函数为父类提供的构造函数，一旦调用该函数，组件会重新渲染。

• param是一个对象，函数执行时，param会混入到this.state对象中。
• 即如果param中有属性与this.state中的属性相同，那么this.state中的属性会被覆盖。
• 如果属性不相同，则param中的属性会添加到this.state中。

// 组件Tick
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>
            </>
        )
    }
}

四、组件的数据来源

1. 目前组件中数据的来源有如下两种途径。

• props：该数据是由组件的使用者传递的数据，所有权不属于自身，所以组件无法改变数据。
• state：该数组是由组件自身创建的，所有权属于组件自身，因此组件有权改变该数据。

五、案例解析

1. 组件Test.js中，组件A中的状态数据n数据流向依次是A->B->C

// 组件Test.js
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>
}

// 入口文件index.js
import React from 'react';
import ReactDOM from 'react-dom';
import A from "./components/Test"
ReactDOM.render(<A/>, document.getElementById('root'))

• 该案例中组件A数据变化导致组件B组件C数据依次变化。
• 这说明数据属于谁，谁就有权利更改，该案例中A自己更改了数据，假如组件A还有一个父组件，但是父组件是不能修改A数据的。
• 该案例同样说明了React数据流是自顶向下流动的。