state 状态 以及setState()方法

状态 state

state状态又称为数据，是组件内部私有的数据，只能在组件内部使用

初始化state

class Abc extends React.Component{
constructor(){
    super()
  // 初始化state 
  this.state = {
      name:'老李'
  }
}
render(){
    return (<div>{this.state.name}</div>)
}
}

简写形式

class Abc extends React.Component{
  // 初始化state 
 state = {
      name:'老李'
  }
render(){
    return (<div>{this.state.name}</div>)
}
}

setState() 修改状态

使用setState()方法修改state的状态 参数为一个对象,对象的键为state中的属性,值为state修改后的值

class Abc extends React.Component{
  // 初始化state 
 state = {
      num:0
  }
render(){
    return (<div onClick={
        ()=>{
          this.setState({num:this.state.num++},()=>{
              // 这个方法在setState执行完成后执行，避免在更新DOM异步的情况下计算出错
          })
        }
      }>加1</div>)
}
}

抽离事件处理程序

使用以上方式对state进行修改,JSX的结构变得不清晰,需要对事件抽离程序进行抽离

// 使用这种方式将事件处理程序抽离  但这种方法存在错误,在事件抽离程序中this的指向为undefined
// 会报错
class Abc extends React.Component{
  // 初始化state 
 state = {
      num:0
  }
handleIncrease(){
    this.setState({{num:this.state.num++})
}
render(){
    return (<div onClick={this.handleIncrease}>加1</div>)
}
}

解决this指向问题

箭头函数方式

依据箭头函数没有this,this指向外部的特点,在箭头函数中调用事件抽离程序

class Abc extends React.Component{
  // 初始化state 
 state = {
      num:0
  }
handleIncrease = ()=>(){
    this.setState({num:this.state.num++})
}
render(){
    return (<div onClick={this.handleIncrease}>加1</div>)
}
}

bind方法

通过bind方法改变事件处理程序中this.指向

class Abc extends React.Component{
  constrtor(){
      super()
   // 初始化state 
     state = {
      num:0
  }
 // 改变this指向
   this.handleIncrease = this.handleIncrease.bind(this)
 }
handleIncrease(){
    this.setState({{num:this.state.num++})
}
render(){
    return (<div onClick={this.handleIncrease}>加1</div>)
}
}

calss实例方法 (推荐使用)

此方法也利用到了箭头函数的特性,使this指向了class类

class Abc extends React.Component{
  // 初始化state 
 state = {
      num:0
  }
handleIncrease=()=>{
    this.setState({{num:this.state.num++})
}
render(){
    return (<div onClick={this.handleIncrease}>加1</div>)
}
}