React中setState学习总结
react中setState方法到底是异步还是同步，其实这个是分在什么条件下是异步或者同步。
1.先来回顾一下react组件中改变state的几种方式：
import React, { Component } from 'react' class Index extends Component { state={ count:1 } test1 = () => { // 通过回调函数的形式 this.setState((state,props)=>({ count:state.count+1 })); console.log('test1 setState()之后',this.state.count); } test2 = () => { // 通过对象的方式(注意：此方法多次设置会合并且只调用一次！) this.setState({ count:this.state.count+1 }); console.log('test2 setState()之后',this.state.count); } test3 = () => { // 不能直接修改state的值，此方法强烈不建议！！！因为不会触发重新render this.state.count += 1; } test4 = () => { // 在第二个callback拿到更新后的state this.setState({ count:this.state.count+1 },()=>{// 在状态更新且页面更新(render)后执行 console.log('test4 setState()之后',this.state.count); }); } render() { console.log('render'); return ( <div> <h1>currentState:{this.state.count}</h1> <button onClick={this.test1}>测试1</button> <button onClick={this.test2}>测试2</button> <button onClick={this.test3} style={{color:'red'}}>测试3</button> <button onClick={this.test4}>测试4</button> </div> ) } } export default Index;2.setState()更新状态是异步还是同步：
需要判断执行setState的位置
同步：在react控制的回调函数中：生命周期钩子/react事件监听回调
import React, { Component } from 'react' class Index extends Component { state={ count:1 } /* react事件监听回调中，setState()是异步状态 */ update1 = () => { console.log('update1 setState()之前',this.state.count); this.setState((state,props)=>({ count:state.count+1 })); console.log('update1 setState()之后',this.state.count); } /* react生命周期钩子中，setState()是异步更新状态 */ componentDidMount() { console.log('componentDidMount setState()之前',this.state.count); this.setState((state,props)=>({ count:state.count+1 })); console.log('componentDidMount setState()之后',this.state.count); } render() { console.log('render'); return ( <div> <h1>currentState:{this.state.count}</h1> <button onClick={this.update1}>测试1</button> <button onClick={this.update2}>测试2</button> </div> ) } } export default Index;异步：非react控制的异步回调函数中：定时器回调/原生事件监听回调/Promise
import React, { Component } from 'react' class Index extends Component { state={ count:1