【React】组件的三大属性之state

state的理解：

① state是组件对象最重要的属性，值是对象（可包含多个数据）；

② 组件被称为“状态机”，通过更新组件的state来更新对应的页面显示（重新渲染组件）。

 一、需求描述

       点击文本“你喜欢我”，切换成文本“我喜欢你”

二、具体代码（牢记状态的三个操作：① 初始化状态；② 读取状态；③ 更新状态）

import React from 'react';
import './App.css';

class App extends React.Component {
    constructor(props) {
        super(props);
        // 1. 初始化状态
        this.state = {
            isLikeMe: false
        }
        // 将新增函数中的this强行绑定为组件对象
        this.handleClick = this.handleClick.bind(this);
    }

    // 3. 更新状态
    handleClick() {
        console.log("this.handleClick()", this)
        const isLikeMe = !this.state.isLikeMe
        this.setState({isLikeMe})
    }

    render() {
        // 2. 读取状态
        const isLikeMe = this.state.isLikeMe
        return (
            <div>
                <h3 onClick={this.handleClick} style={{textAlign:"center"}}>{isLikeMe ? "你喜欢我" : "我喜欢你"}</h3>
            </div>
        );
    }
}

export default App;

三、注意点

       state仅在以类的方式定义组件中使用，并且state的状态不能直接更改，必须通过this.setState()的方式来进行更改。