怎样建网站 阿里云,优品ppt模板免费下载网站,石嘴山网站seo,陕西城乡建设网官网react中setState是同步还是异步困扰了好久#xff0c;今天终于有了答案#xff1b;它既是同步的#xff0c;也是异步的#xff1b; 批量更新#xff1a; 加入我在页面上写三个setState去分别 componentDidMount() {this.setState({ val: this.state.val 1 }) console.log…react中setState是同步还是异步困扰了好久今天终于有了答案它既是同步的也是异步的 批量更新 加入我在页面上写三个setState去分别 componentDidMount() {this.setState({ val: this.state.val 1 }) console.log(1)this.setState({ val: this.state.val 1 }) console.log(2)this.setState({ val: this.state.val 1 }) console.log(3)
} 在render中打印出的值是3这就说明setstate是同步的 加入我想输入val值在执行其他可以使用setTimeout或者使用setstate的第二个参数callback 在 setState 的时候react内部会创建一个 updateQueue 通过 firstUpdate 、 lastUpdate 、 lastUpdate.next 去维护一个更新的队列在最终的 performWork 中相同的key会被覆盖 state { val: 0 }
componentDidMount() {
setTimeout(_ { this.setState({ val: this.state.val 1 })console.log(this.state.val) // 输出更新后的值 -- 1 }, 0)
} componentDidMount() { this.setState({ val: this.state.val 1 }) console.log(this.state.val) // 输出的还是更新前的值 -- 0 } 其实还是和合成事件一样当 componentDidmount 执行的时候react内部并没有更新执行完componentDidmount 后才去 commitUpdateQueue 更新。这就导致你在 componentDidmount 中 setState 完去console.log拿的结果还是更新前的值。 所以要在componentwillmount中更新state; setState 只在合成事件和钩子函数中是“异步”的在原生事件和 setTimeout 中都是同步的。setState的“异步”并不是说内部由异步代码实现其实本身执行的过程和代码都是同步的只是合成事件和钩子函数的调用顺序在更新之前导致在合成事件和钩子函数中没法立马拿到更新后的值形式了所谓的“异步”当然可以通过第二个参数 setState(partialState, callback) 中的callback拿到更新后的结果。setState 的批量更新优化也是建立在“异步”合成事件、钩子函数之上的在原生事件和setTimeout 中不会批量更新在“异步”中如果对同一个值进行多次 setState setState 的批量更新策略会对其进行覆盖取最后一次的执行如果是同时 setState 多个不同的值在更新时会对其进行合并批量更新。 链接https://juejin.im/post/5b45c57c51882519790c7441 转载于:https://www.cnblogs.com/naniandongzhi/p/9813088.html
