第12题:为什么有时连续多次setState只有一次生效?
例如下面的代码,两次打印出的结果是相同的:
componentDidMount() { this.setState({ index: this.state.index + 1 }, () => { console.log(this.state.index); }) this.setState({ index: this.state.index + 1 }, () => { console.log(this.state.index); }) }
原因就是 React 会批处理机制中存储的多个 setState 进行合并,来看下 React 源码中的 _assign 函数,类似于 Object 的 assign:
_assign(nextState, typeof partial === 'function' ? partial.call(inst, nextState, props, context) : partial);
如果传入的是对象,很明显会被合并成一次,所以上面的代码两次打印的结果是相同的:
Object.assign( nextState, {index: state.index+ 1}, {index: state.index+ 1} )
注意, assign 函数中对函数做了特殊处理,处理第一个参数传入的是函数,函数的参数 preState 是前一次合并后的结果,所以计算结果是准确的:
componentDidMount() { this.setState((state, props) => ({ index: state.index + 1 }), () => { console.log(this.state.index); }) this.setState((state, props) => ({ index: state.index + 1 }), () => { console.log(this.state.index); }) }
所以上面的代码两次打印的结果是不同的。
最佳实践
React 会对多次连续的 setState 进行合并,如果你想立即使用上次 setState 后的结果进行下一次 setState,可以让 setState 接收一个函数而不是一个对象。这个函数用上一个 state 作为第一个参数,将此次更新被应用时的 props 做为第二个参数。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 第12题:为什么有时连续多次setState只有一次生效?
码云笔记 » 第12题:为什么有时连续多次setState只有一次生效?