react: 三大属性之state

1. 简介

组件内部可以维护一个状态数据state,通过this.state访问该数据,一般定义为一个对象,可以包含多个key-value组合;

通过setState()更新组件的状态数据时,组件会重新调用render()重新渲染页面

2. 写法

1. 构造器中初始化state

constructor(props){
	super(props)
	//初始化状态
	this.state = {isHot:false,wind:'微风'}
}

2. 简写方式

直接在class中声明并初始化变量,相当于给该实例添加了一个属性

实例本身就有state这个属性,这样就等于直接给该属性赋值

class Weather extends React.Component{
	state = {isHot:false,wind:'微风'}
}

3.更新state

通过赋值方式直接修改state,可以修改state对象的值,但是不能触发react重新调用render()渲染

通过setState修改,这样react才会重新调用render()渲染

setState是异步方式更新

    // 直接修改,错误写法
    this.state.isAdmin = true

1. 更新原理

setState时会将原来的state对象和setState防范传入的对象进行合并,若传入的属性和之前的state对象一样,则进行覆盖,否则进行添加

  this.state = {isAdmin: false, isBig: true};
  this.setState({isAdmin: true, isSmall: true});
  更新后的state对象为{isAdmin: true, isBig: true, isSmall: true}

2. 对象方式更新

setState(stateChange,[callback])

stateChange: 需要更新的状态对象

callback: 可选的回调函数,会在状态更新完毕,界面也更新后(render调用后)执行回调函数

新状态不依赖原状态时通过该方式更新

	state = {count:0}
	add = ()=>{
		//对象式的setState
		//1.获取原来的count值
		const {count} = this.state
		//2.更新状态
		this.setState({count:count+1},()=>{
			console.log(this.state.count);
		})
		console.log('12行的输出',this.state.count); //输出0,因为异步方式更新的
	}

3. 函数方式更新

setState(updateFunction,[callback])

updateFunction: 返回一个state对象的函数,可以接收到state和props

callback: 可选的回调函数,会在状态更新完毕,界面也更新后(render调用后)执行回调函数

新状态依赖原状态时通过该方式更新

  state = {count:0}
  add = ()=>{
  	//对象式的setState
  	//1.获取原来的count值
  	const {count} = this.state
  	//2.更新状态
  	this.setState( (state,pros) => {
  		return {count:state.count + 1}
  	})
  }