致访客
感谢各位一年多的陪伴,因内容调整,本站将于近日迁移到新域名并不再更新主要内容。
特此通知。
感谢各位一年多的陪伴,因内容调整,本站将于近日迁移到新域名并不再更新主要内容。
特此通知。
第六节
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')
)
补充:Tab.css
.content{
display: none;
}
.content.active{
display: block;
}