MENU

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')
)

文章标题:React学习笔记【5】
如果文中内容侵犯了您的权益,请及时与博主取得联系进行删除!
本站文章未经许可禁止转载,本文地址:https://blog.wanvale.com/archives/239/

Archives QR Code Tip
QR Code for this page
Tipping QR Code
Leave a Comment

已有 1 条评论
  1. 万谷

    补充:Tab.css

    .content{
    display: none;
    }
    .content.active{
    display: block;
    }