# 11.组件中的 state 和 setState()
# 1.state的基本使用
- 状态 (state) 即数据, 是组件内部的私有数据, 只能在组件内部使用
- state的值是对象, 表示一个组件中可以有多个数据
- 获取状态: this.state
class Hello extends React.Component {
constructor() {
super()
// 初始化state
this.state = {
count: 0
}
}
render() {
return (
<div>有状态组件: {this.state.count}</div>
)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
class Hello extends React.Component {
constructor() {
// 简化语法 ⭐⭐
state = {
count: 0
}
}
}
render() {
return (
<div>有状态组件: {this.state.count}</div>
)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 2.setState()修改状态
- 状态搜索可变的
- 语法:
this.setState({要修改的数据}) - 注意: 不要直接修改state中的值, 这是错误的!!!
- setState()作用: 1.修改state 2.更新UI
- 思想: 数据驱动视图
// 正确
this.setState({
count: this.state.count + 1
})
// 错误
this.state.count += 1
1
2
3
4
5
6
7
2
3
4
5
6
7
# 3.从 JSX 中抽离事件处理程序
- JSX 中掺杂过多 JS 逻辑代码, 会显得非常混乱
- 推荐: 将逻辑抽离到单独的方法中, 保证 JSX 结构清晰
- 原因: 事件处理程序中 this 的值为 undefined
- 希望: this指向组件实例 (render()方法中的this即为组件实例)