问题描述

我已经阅读了多个来源，现在使用 react Fiber(异步渲染)componentWillMount() 可能会被多次调用.

I've read on multiple sources now that with react Fibre (async rendering) componentWillMount() may be called multiple times.

为什么会这样?

推荐答案

Fiber 旨在支持的一件事是高优先级与低优先级更新.例如，动画是高优先级更新(因为很容易注意到 60fps 动画中的抖动)，而来自 api 调用的更改将是低优先级(谁会注意到你必须等待的东西多出一百毫秒)还是第二个?).

One of the things Fibre is intended to support is high priority vs low priority updates. For example, animations are high priority updates (since jankiness in a 60fps animation is easily noticed), while a change from an api call would be be low priority (who's going to notice a extra hundred milliseconds on something you've got to wait a second for anyway?).

因此，一个简单的示例，仅对 componentWillMount 进行标准调用，如下所示:我们进行低优先级更新，并且协调器开始遍历组件树，在它们上调用 componentWillMount，并进行其他协调工作.由于时间不足，它会暂停以让事件循环恢复.没有高优先级的东西，所以在下一次空闲回调时，它会从中断的地方继续，完成协调并提交更新.没有额外的组件WillMounts.

So a straightforward example with just the standard one call to componentWillMount is as follows: We do a low priority update, and the reconciler begins working its way through the component tree, calling componentWillMount on them, as well as doing its other reconciliation work. Having run short on time, it pauses to let the event loop resume. There's no high priority stuff, so on the next idle callback, it picks up where it left off, finishes the reconciliation and commits the update. There are no extra componentWillMounts.

下一个示例:低优先级更新开始，并且和之前一样，协调器通过树对它们调用 componentWillMount 进行工作.和以前一样，它会暂停执行，但这次有高优先级更新.所以当协调恢复时，react 会将注意力转移到高优先级更新上.它协调该更新并提交它.现在可以自由地恢复低优先级更新，但它已经完成的工作需要丢弃，因为高优先级更新可能已经做出了影响低优先级更新将计算的内容的更改.由于它必须重新开始，它需要再次调用 componentWillUpdate.

Next example: Low priority update starts, and as before the reconciler works through the tree calling componentWillMount on them. As before, it pauses execution, but this time a high priority update comes in. So when reconciliation resumes, react turns its attention to the high priority update. It reconciles that update, and commits it. It's now free to resume the low priority update, but the work it has already done needs to be thrown away, because the high priority update may have made changes that affect what the low priority update will calculate. Since it has to start over, it will need to make those calls to componentWillUpdate again.

这篇关于为什么 React Fibre 会多次调用 componentWillMount?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！