state相当于vue的data,也就是用于存放数据,但使用上和data却很不一样
下面例子中,创建一个类组件,在类组件的构造函数constructor中定义this.state,并进行赋值,在render()函数中,直接使用this.state.xxx即可访问state的数据
import React from 'react'
import ReactDOM from 'react-dom'
class Clock extends React.Component {
constructor (props) {
super (props)
// 状态(数组)=>view
this.state = {
time: new Date().toLocaleTimeString()
}
}
// 渲染元素
render () {
// 通过return模板的形式
return (
<div>
<h1>当前时间:{this.state.time}</h1>
</div>
)
}
}
ReactDOM.render(
<Clock />,
document.getElementById('root')
)
但是,需要注意的是,这个时候页面中的时间是不会自动变化的,只有刷新页面才会重新变化,根据上几篇文章的做法是,通过setInterval,每隔一秒钟渲染一次,可是结果如下:
注意,在setInterval和构造函数中添加了输出函数
import React from 'react'
import ReactDOM from 'react-dom'
class Clock extends React.Component {
constructor (props) {
super (props)
// 状态(数组)=>view
this.state = {
time: new Date().toLocaleTimeString()
}
console.log('this.state.time=' + this.state.time)
}
// 渲染元素
render () {
// 通过return模板的形式
return (
<div>
<h1>当前时间:{this.state.time}</h1>
</div>
)
}
}
setInterval(() => {
ReactDOM.render(
<Clock />,
document.getElementById('root')
)
console.log(new Date())
}, 1000)
可以看到,只有setInterval的console每隔一秒有输出,而构造函数的console只输出一次
这是因为:React会默认认为构造函数的数据时不变的,所以没有进行重新初始化,这在一定程度上是进行了优化,可是有时候却不能满足需求
但是需要注意的是,虽然构造函数不会每次都初始化,但是渲染函数是每次都会执行的,随意可以选择在render函数中修改时间
注意,这只是一个解决的办法,但是不推荐使用,推荐使用生命周期的方法,这个在下篇文章中详说
import React from 'react'
import ReactDOM from 'react-dom'
class Clock extends React.Component {
constructor (props) {
super (props)
// 状态(数组)=>view
this.state = {
time: new Date().toLocaleTimeString()
}
// console.log('this.state.time=' + this.state.time)
}
// 渲染元素
render () {
// 通过return模板的形式
this.state.time = new Date().toLocaleTimeString()
return (
<div>
<h1>当前时间:{this.state.time}</h1>
</div>
)
}
}
setInterval(() => {
ReactDOM.render(
<Clock />,
document.getElementById('root')
)
// console.log(new Date())
}, 1000)