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. 遍历组件树，它会检查组件模板中的哪些值需要更新。
4. 它根据前一点的结果更新DOM值。

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

在React中它看起来像这样：

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

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

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

Answer 2

反应变化检测与Angular大致相同，除了三件事：

1）何时开始：每当调用组件的setState方法时，diffing就会开始（而无论何时触发Dom事件，每当运行setInterval / setTimeout回调时，Angular都会进行差异化，并且每当运行ajax回调）

2）从哪里开始：差异从已调用setState的组件开始，然后是子组件，并从层次结构开始（而Angular从最顶层组件开始）

3）要比较的内容：差异将状态更改后的当前HTML的虚拟DOM与虚拟DOM进行比较。 （而Angular使用模板中使用的数据绑定值，用于比较之前和之后）