为什么设置状态()异步的反应?

还是同步?

3分钟阅读 2020年11月20日

- - -

图片由布鲁斯火星Unsplash

这个问题

在反应中,我们使用设置状态()更新任何组件的状态。现在设置状态()不立即改变这个状态,而是创建一个等待状态转换。后立即调用访问状态设置状态()返回现有的值,而不是一个更新。作为反应的初学者,我相信大多数人会经常面临这个问题。

没有保证的同步操作设置状态()并调用可能会分批处理的性能改善。人们很容易忘记的设置状态()是异步的,使我们棘手的代码调试问题。的设置状态()也不返回一个承诺。使用异步/等待或任何类似的将不会工作。还有另一个案例中,我们倾向于使用多个设置状态()函数在同一块,有时政府不适当的更新。

可能的解决方案

通常我们所说的设置状态()有一个参数,但实际上,支持两个参数的方法。第二个参数,您可以传递一个回调函数,总是会执行后的状态已经更新。

让我们看一看问题的一个例子:


状态={值:5}

/ /——错误的方式——/ /这一点。设置状态({值:this.state。值+ 1})
console.log (this.state.value) / /打印5和6

写一个更好的解决方案设置状态函数是:

/ /——正确的方法——/ /this.setState ((prevState) = > ({
值:prevState。值+ 1}),()= > {
console.log (this.state.value)});
/ /设置状态作为第二个参数提供一个回调

正确的方式来更新状态和访问上面给出的更新值。我们通过一个回调函数作为第二个参数设置状态()函数调用后的状态已经更新。还应该指出的是,使用一个函数作为第一个参数,返回一个对象是一个很好的方式编写代码,反应可以得到的当前值状态(prevState)。这也是一个很好的实践使用设置状态()函数在一块时避免问题状态更新。

这为什么会发生?

如果你看一看里面的代码设置状态()功能反应的代码,你会发现设置状态()不是一个异步函数,它总是同步的。它只是调用enqueueStateenqueueCallback当更新在幕后,因此其执行感觉它是异步。

那么,什么是同步或异步调用的影响设置状态()在反应和解算法的虚拟DOM比较和调用渲染更新DOM。

反应批量更新和冲出来一次每帧由于性能的原因。但是,在某些情况下反应没有控制配料,因此同步更新是可用的,例如在AJAX,setTimeOut ()等。

结论

通常,更新状态发生在接下来的呈现,但它有时会成批的性能。这批处理可能不受反应控制,因此设置状态()可能不会总是顺序。所以,使用第二个参数如果你想顺序更新状态。

我希望你学到新的东西从这个!感谢你的阅读!

- - -

- - -

工程师,摄影师,科技博客。对于开发人员构建产品和写道。我喜欢和爱帮助别人代码:)

建议从媒介betway娱乐官网

列表

看到更多的建议
Baidu