发布于 

类组件中state和setState()

state的基本使用:状态(state)即是数据,是组件内部的私有数据,只能在组件内部使用,且state的值是对象,表示一个组件中可以有多个数据

初始语法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class KEL extends React.Component {
constructor() {
super () {
// 初始化state
this.state = {
count: 0
}
}
render () {
return {
<div>有状态组件</div>
}
}
}
}

简化语法:

1
2
3
4
5
6
7
8
9
10
11
class KEL extends React.Component {
// 初始化state
state = {
count: 0
}
render () {
return {
<div>有状态组件, {this.state.count}</div>
}
}
}

获取状态:this.state

1
{this.state.count}

setState()修改状态:注:不要直接修改state中的值,【this.state.num=2】<-错误。【数据驱动视图】

语法:this.setState({key:val, key2:val2})

作用:修改state和更新UI

Eg:

1
2
3
4
5
6
// 正确
this.setState({
count: this.state.count + 1
})
// 错误
this.state.count += 1

本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。

唯獨少了個字.