是什么
是组件的自身属性;
是 一个UI数据模型,是组件渲染时的数据依据;
是页面组件的支撑属性。
工作原理
state属性对组件进行更新之后,会自动将状态反应到虚拟DOM上,最后将信息更新到DOM上。
所以,state是异步的。
如何使用
import React,{Component} from 'react';
class StateComponent extends Component {
constructor ( ) {
/* 1、初始化
a、调用基类所有的初始化方法:
context、props、state、refs、updater、原型链上的方法(setState()等 )
b、初始化state,赋值(该state的作用域是当前的类StateComponent)
*/
// a
super();
// b
this.state = {
userName: '哇哈哈',
age: 18
}
}
componentDidMount () {
/*2、更改state属性值
需要在DOM树生成之后进行更改。
state的更新是一个浅合并的过程。即只需要更新需要修改的部分而不用将整个state更新
*/
this.setState({
userName: '我有新名字'
})
}
render () {
return (
<div>
<p>这是更新后的userName { this.state.userName }</p>
</div>
)
}
}
export default StateComponent;