react setState 异步执行问题

link

如果同步执行 的话

console.log(this.state.value) // 0
this.setState({ value: this.state.value + 1 });
console.log(this.state.value) // 1
this.setState({ value: this.state.value + 1 });
console.log(this.state.value) // 2

通常共享状态需要做状态提升

-this.setState({ value: this.state.value + 1 });
+this.props.onIncrement(); // Does the same thing in a parent

这就回打乱我们代码,props只会在父组件更新时更新

console.log(this.props.value) // 0
this.props.onIncrement();
console.log(this.props.value) // 0
this.props.onIncrement();
console.log(this.props.value) // 0

在同步这种情况下,会立即刷新this.state,但不会刷新this.props。我们无法在不重新渲染父级的情况下立即刷新this.props(如果同步刷新,性能大大降低)

if you’re mixing data from props (not yet flushed) and state (proposed to be flushed immediately) to create a new state

那么React今天如何解决这个问题呢?在React中,this.state和都this.props仅在协调和冲洗之后更新,因此您会看到0在重构前后都被打印。这使提升状态安全。

Leave a Reply

Your email address will not be published. Required fields are marked *