state状态只在class类组件才有，函数组件没有此功能
- 状态(state)即数据，是组件内部的私有数据，只能在组件内部使用
- state的值是对象，表示一个组件中可以有多个数据
- 通过this.state来获取状态
- state数据值可以修改 this.setState
- state可以定义在类的构造方法中也可以写在类的成员属性中
export default class extends React.Component {
constructor(props){
super(props)
// 第一种初始化方式
this.state = {
count : 0
}
}
/*
// 第二种初始化方式
state = {
count:1
}
*/
render(){
return (
<div>计数器 :{this.state.count}</div>
)
}
}
state中的值不能直接通过修改state中的值来进行修改数据操作，react提供一个this.setState方法来完成state数据的修改操作
import React, { Component } from 'react'
export default class CmpState extends Component {
// state组件内部使有的数据源
// 方案1 成员属性
/* state = {
username: '张三'
}
*/
constructor(props) {
super(props);
// 方案2 构造方法初始化state数据
this.state = {
// username: '李四'
username: this.props.username,
count: 100
}
}
render() {
return (
<div>
得到state中的数据为：{this.state.username}
<hr />
<h3>{this.state.count}</h3>
<button onClick={this.incr.bind(this)}>自增一下</button>
</div>
)
}
incr() {
// 更新数据的同时，更新ui显示
// 方案1 对象写法 不支持并发处理 同步修改
/* this.setState({
count: ++this.state.count
}) */
// 方案2 异步处理，支持并处理 ssf 官方推荐写法
/* this.setState((state) => {
return {
count: ++state.count
}
}) */
// 简写
this.setState((state) => ({
count: ++state.count
}))
}
}
props与state区别
- props 中存储的数据，都是外界传递到组件中的
- props 中的数据，都是只读的
- state 中的数据，都是可读可写的
- props 在函数声明或类申明的组件中都有
- state 只有类申明的组件中才有