React学习笔记【5】

第六节

React State

相当于vue的data，但是使用方式和vue不一致

---

本节代码

import React from 'react';
import ReactDOM from 'react-dom';
import './Tab.css'
class Clock extends React.Component {
    constructor(props) {
        super(props);
        //状态（数据）-->View
        //构造函数初始化数据，将需要改变的数据初始化到state中
        this.state = {
            time: new Date().toLocaleTimeString()
        }
    }

    render() {
        return (
            <div>
                <h1>当前时间：{this.state.time}</h1>
            </div>
        )
    }
    //生命周期函数
    //componentDidMount：组件渲染完成时调用的函数
    componentDidMount() {
        setInterval(() => {
            console.log(this.state.time);
            // this.state.time=new Date().toLocaleTimeString();
            //切勿直接修改state数据，直接修改state数据不会重新渲染内容
            //需要使用setState()
            //通过this.setState修改完数据后，并不会立即修改DOM里面的内容
            //react会在函数内部所有setState修改完之后统一对比虚拟DOM对象，再统一修改，提升性能
            //小程序也是借鉴react状态管理操作
            this.setState({
                time: new Date().toLocaleTimeString()
            })
            console.log(this.state.time);
        }, 1000)
    }

}

//切换
class Tab extends React.Component {
    constructor(props) {
        super(props);
        //设置状态
        this.state = {
            c1: "content active",
            c2: "content"
        }
    }

    clickEvent = (e) => {
        console.log(this);
        const index = e.target.dataset.index;
        if (index == "1") {
            this.setState({
                c1: "content active",
                c2: "content"
            })
        } else {
            this.setState({
                c1: "content",
                c2: "content active"
            })
        }
    }

    render() {
        return (
            <div>
                <div className={this.state.c1}>
                    <h1>内容一</h1>
                </div>
                <div className={this.state.c2}>
                    <h1>内容二</h1>
                </div>
                <button data-index="1" onClick={this.clickEvent}>内容一</button>
                <button data-index="2" onClick={this.clickEvent}>内容二</button>
            </div>
        )
    }
}


ReactDOM.render(
    // <Clock />,
    <Tab />,
    document.getElementById('root')
)