为什么 cancelledPromise 模式被认为比 isMounted() “反模式"更好?在反应? [英] Why is the cancelledPromise pattern considered better than the isMounted() "antipattern" in React?

问题描述

参见此处:https://reactjs.org/blog/2015/12/16/ismounted-antipattern.html还有这里:如何取消对 componentWillUnmount 的提取在这里:ismounted antipattern，跟踪自己的财产

See here: https://reactjs.org/blog/2015/12/16/ismounted-antipattern.html And also here: How to cancel a fetch on componentWillUnmount And here: ismounted antipattern, track own property

在这两种情况下，他们都提到了 3 种方法:

In both cases they mention 3 approaches:

• 在您的 promise.resolve 中检查 this.IsMounted()，如果`Compounted Has Unmounted
，React 将为您正确返回
• 在您的 promise.resolve 中检查 _isMounted，这是您在 ComponentWillUnmount() 方法中手动跟踪的.
• 使用可取消的承诺，以便您承诺永远不会解决.这将解决您的所有问题并使其变得可爱.

• In your promise.resolve check this.IsMounted(), which React will return correctly for you, if the `Compounted Has Unmounted
• In your promise.resolve check _isMounted, which you have manually tracked in ComponentWillUnmount() method.
• Use cancellable promises, so that you promise doesn't ever resolve. And this will solve all your problems and make it lovely.

除了，在第三种情况下，您的 promise 将 error()，但在其他情况下也可能 error()(例如 API挂了).

Except, in the 3rd case your promise will error(), but might also error() in other cases (e.g. the API is down).

所以实际上第三个选项归结为:- 在您的 promise.error 检查 errorPayload.IsCancelled，您已在 cancellablePromise 对象中手动跟踪该对象，该对象又由在 ComponentWillUnmount 中手动调用.

So in reality the 3rd option boils down to: - In your promise.error check errorPayload.IsCancelled, which you have manually tracked in the cancellablePromise object, which has in turn been triggered by a manual call in ComponentWillUnmount.

所以这三个几乎完全相同:

So all three are pretty much identical:

在处理 promise 结果时，请检查此变量的值，该变量与组件是否已经卸载 直接相关.

When you are handling your promise outcomes, check the value of this variable that is directly tied to whether the component has already unmounted.

为什么他们断言第三个选项比其他两个更好，而第一个选项是反模式.

Why do they assert that the 3rd option is better than the other 2, and that the 1st option is an antipattern.

推荐答案

这里的关键元素是 if (this.isMounted()) { setState(...) } 是一个反模式 一般.它可能导致有用警告的抑制，因此应该怀疑它的出现，因为在大多数情况下，它代表了掩盖实际问题的机会.因此，即使在其行为在功能上与其他方法相同的情况下，其他方法也是可取的.

The key element here is that if (this.isMounted()) { setState(...) } is an antipattern in general. It can lead to the supression of useful warnings, and so its appearance should be treated with suspicion since, in the majority of cases, it represents an opportunity to mask real issues. As such, even in cases where its behaviour is functionally the same as some other approach, that other approach is preferable.

在 API 调用的情况下，您可能想要忽略承诺的结果是完全合理的，因为它不再相关.使用已取消的承诺在语法和语义上将是否忽略结果的逻辑与 API 调用相关联，从而防止未来开发人员在其他上下文中意外使用代码并可能抑制有意义的警告的任何可能性.

In the case of API calls, it is entirely reasonable that you might want to ignore the results of a promise because it is no longer relevant. The use of a canceled promise syntactically and semantically ties the logic of whether to ignore the result specifically to the API call, which prevents any possibility of future developers accidentally making use of the code in another context and potentially supressing meaningful warnings.

虽然差异可能是语义上的，但语义本身对可维护性具有价值.在这种情况下，可取消的承诺用于在结构上并置关注点，将可能是一般问题的行为附加到正常的特定情况.

Though the difference may be semantic, the semantics themselves have value to maintainability. In this case, the cancelable promise serves to structurally colocate concerns, attaching a behaviour that can be a problem in general to the specific situation in which it is okay.

这篇关于为什么 cancelledPromise 模式被认为比 isMounted() “反模式"更好?在反应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！