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

Angular 5.0 change detection strategy VS React's change detection strategy

我了解 变更检测 在 Angular 5.0.

中的工作原理

谁能帮我理解在 React 中是如何工作的以及它与 Angular 的[=19 有何不同？ =] ?

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

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

更改检测由区域中每个调用堆栈末尾的 zone.js 触发。这意味着在执行到每个异步操作（点击、http 请求、超时）的回调后，将触发更改检测。您也可以手动触发更改检测，甚至“关闭”zone.js，但让我们坚持最常见的情况。

更改检测从根组件开始，向下遍历组件树（同样，您可以在任何组件上手动触发它，但这不是最常见的情况）。

遍历组件树，它检查组件模板中的哪些值需要更新并更新DOM。

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

在 React 中它看起来像这样：

异步操作回调后不会触发更改检测。它是通过调用组件上的方法 setState 触发的。

更改检测不是从根组件开始，而是从调用 setState 的组件开始。

协调阶段开始 - 遍历组件及其后代以检查哪些值需要实际更新 DOM。所以，从概念上讲，这一点与Angular非常相似。然而在 React 16 中它有点复杂。 Check it.

Dom 已更新。

注意：类似于 Angular 的 ChangeDetectionStrategy.OnPush，在 React 中我们有 class React.PureComponent。我们可以使用这个 class 来避免不必要的变化检测。

当然还有很多差异，但在高层次上，我认为这些是最重要的。

React 变更检测与 Angular 大致相同，除了以下三点：

1) 何时开始： 差异在组件的 setState 方法被调用时开始（而 Angular 差异在 Dom 事件被调用时开始触发，只要 setInterval/setTimeout 回调是运行，只要 ajax 回调是运行)

2) 从哪里开始： 差异从调用了 setState 的组件开始，然后是它的子组件，然后是层次结构（而 Angular 从最上面的组件）

3) 比较什么： diffing比较当前HTML的虚拟DOM和状态后的虚拟DOM改变。（而 Angular 使用模板中使用的数据绑定值，用于比较之前和之后）

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

Angular 5.0 change detection strategy VS React's change detection strategy

angular

reactjs

angular2-changedetection

virtual-dom