react中setState设置值失效

在学react小书, 练习时遇到问题:

有一只狗，不允许别人摸它，一旦摸它就会叫，然后就跑了；这只狗跑一段时间（2s）以后就会停下来，也不叫了。 完成 Dog组件，当用户点击的时候会执行自身的 bark 和 run 方法。给这个 Dog 组件加上状态 isRunning 和 isBarking，在进行相应的动作的时候设置为 true，停下来的时候设置为 false。

class Dog2 extends Component{
   constructor () {
        super()
        this.state={isRunning:false,isBarking:false}
      }
      
      bark () {
        this.setState({
            isBarking: !this.state.isBarking,
        })
        console.log(this.state.isBarking ? "barking" : "stopbarking")              
      }
      
      run () {
        this.setState({
            isRunning: !this.state.isRunning,
        })
        console.log(this.state.isRunning ? "running" : "stoprunning")
      }
      
     //如果不使用setTimeout定时为0, 则setState无法更新值
     //也就是isRunning的值仍然是false (stoprunning)
     onclickChangeState(){
        setTimeout(()=>this.bark(),0)	//使用setTimeout, isRunning值变为true
        setTimeout(()=>this.run(),0)

		// this.bark()	//不使用setTimeout, isRunning值仍然为false
        // this.run()
        
        setTimeout(()=>{	//使用setTimeout
            this.bark()
            this.run()
        },2000)
     }
    
    render () {
    return (
        <div onClick={this.onclickChangeState.bind(this)}>DOG</div>
        )
    }
}

利用setTimeout可以解决问题, 但是不太懂其中的原理, 应该是react的生命周期的问题(大概率), 如果有人懂, 还请赐教.