Angular 5.0 的变更检测策略 VS React 的变更检测策略

Question

我了解 变化检测 在 Angular 5.0 中的工作原理。

有人可以帮助我理解 React 中的相同工作原理以及它与 Angular 的不同之处吗？

Answer 1

React 和 Angular 的变化检测是不同的，但它们有一个非常重要的共同点——从内存(而不是从 DOM)中区分当前和以前的状态，并只渲染发生变化的部分。

在 Angular 中，在高层次上它是这样工作的:

1. 更改检测由区域中每个调用堆栈末尾的 zone.js 触发。这意味着在执行到每个异步操作(点击、http 请求、超时)的回调后，将触发更改检测。您也可以手动触发更改检测，甚至“关闭”zone.js，但让我们坚持使用最常见的场景。
2. 变更检测从根组件开始，向下遍历组件树(同样，您可以在任何组件上手动触发它，但这不是最常见的情况)。
3. 遍历组件树，检查组件模板中的哪些值需要更新并更新 DOM。

注意:请注意，如果您使用 ChangeDetectionStrategy.OnPush , 一些组件及其后代 在树遍历期间可能会被省略。它可以是很好的优化。

在 React 中它看起来像这样:

1. 在异步操作回调后不会触发更改检测。它由调用方法触发 setState在组件上。
2. 变更检测不是从根组件开始，而是从调用了 setState 的组件开始。
3. 协调阶段开始 - 遍历组件及其后代，以检查在真实 DOM 中哪些值需要更新。所以，从概念上讲，这一点与 Angular 非常相似。然而在 React 16 中它有点复杂。 Check it .
4. Dom 已更新。

注意:类似于 Angular 的 ChangeDetectionStrategy.OnPush，在 React 中我们有类 React.PureComponent .我们可以使用此类来避免不必要的更改检测。

当然还有很多不同之处，但从高层次上讲，我认为这些是最重要的。