提出一个问题({value:this.state.value+1})console.log(this.state.value)//首先输出this.setState({value:this.state.value+1})console.log(this.state.value)//第二个输出setTimeout(()=>{this.setState({value:this.state.value+1})console.log(this.state.value)//第三个输出this.setState({value:this.state.value+1})console.log(this.state.value)//第四个输出},0);this.refs.button.addEventListener('click',this.click)}click=()=>{this.setState({value:this.state.index+1})this.setState({value:this.state.index+1})}render(){return(
value:{this.state.value}index:{this.props.index}点击{this.setState({value:this.state.value+1})console.log(this.state.value)//第三个输出this.setState({value:this.state.value+1})console.log(this.state.value)//第四个输出},0);这两次this.state的值是同步更新的；同步更新：对于React触发的事件处理（例如：onClick触发的事件处理），调用setState会异步更新this.state；异步更新：其他setState调用会同步执行this.setState。“除此之外”指的是：绕过React通过addEventListener直接添加的事件处理器和setTimeout/setInterval产生的异步调用。this.setState更新机制示意图：setState每次产生一个新的state，都会依次存入一个队列，然后根据isBathingUpdates变量判断是直接更新this.state还是放入dirtyComponent中。isBatchingUpdates默认为false，也就是说setState会同步更新this.state。但是，当React在调用事件处理函数之前先调用batchedUpdates时，这个函数会把isBatchingUpdates变为true，结果就是React控制的事件处理进程setState不会同步更新this.state。同步更新(functionalsetState)如果this.setState的参数不是对象而是函数，这个函数会接收两个参数，第一个是当前状态值，第二个是当前props，这个函数应该返回一个对象代表你想要对this.state进行的更改；也就是说，之前你要传给this.setState的对象参数是什么，这个函数中返回的是什么对象。不过这个对象的计算方式有点变化，不再依赖this.state，而是依赖入参state。functionincrement(state,props){return{count:state.count+1};}functionincrementMultiple(){this.setState(increment);this.setState(增量);this.setState(increment);}如果当前this.state.count的值为0，第一次调用this.setState(increment)，传递给increment的state参数为0，第二次调用，state参数为1、第三次调用，参数为2，最后incrementMultiple使this.state.count变为3。对于多次调用函数setState的情况，React会保证每次调用increment时，state已经合并了以前的状态修改结果。需要注意的是，在调用自增函数时，this.state并没有发生变化。尽管如此，在重新执行渲染函数之前（或在shouldComponentUpdate函数返回false之后），它不会被更改。同步和异步setState混合使用functionincrementMultiple(){this.setState(increment);this.setState(增量);this.setState({count:this.state.count+1});this.setState(increment);}在几个函数式setState调用中插入一个传统的setState调用最终会将this.state.count增加2而不是4。这是因为React将顺序合并setState的所有效果。虽然前两次函数式setState调用的效果是count加2，但是中间有一个传统的setState调用，强行一次性清空累积的效果。1更换。所以传统的setState和函数式的setState一定不能混用。摘自：掘金（无洗碗工作室）