为什么用React Fibre多次调用componentWillMount? [英] Why might componentWillMount be called multiple times with React Fibre?

问题描述

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

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

为什么会这样?

推荐答案

Fibre旨在支持的事情之一是高优先级与低优先级更新.例如，动画是高优先级更新(因为很容易注意到60fps动画中的混乱)，而从api调用进行的更改将是低优先级(谁会在需要等待的时间上多花100毫秒的时间)还是要秒?).

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并进行其他协调.工作.时间不多了，它会暂停以让事件循环恢复.没有高优先级的内容，因此在下一个空闲回调中，它从上次中断的地方开始，完成对帐并提交更新.没有多余的componentWillMounts.

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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！