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

Posted 2023-02-22

【中文标题】Angular 5.0 变更检测策略 VS React 的变更检测策略

【英文标题】：Angular 5.0 change detection strategy VS React's change detection strategy

【发布时间】：2018-05-03 08:11:29

【问题描述】：

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

谁能帮助我了解 React 中的相同原理以及它与 Angular 的区别有多大？

【问题讨论】：

Reacts 使用 Virtual DOM 进行变更检测。查一下！ :)

【参考方案1】：

React 和 Angular 的变更检测不同，但它们有一个非常重要的共同点——从内存（而不是 DOM）中区分当前和以前的状态，并仅渲染已更改的内容。

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

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

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

在 React 中是这样的：

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

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

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

【讨论】：

我会比较 ChangeDetectionStrategy.OnPush 和 React Pure 组件，因为在这两种情况下都会进行浅层状态检查

任何对 Angular 的引用都在使用虚拟 dom？

@Andy 我错了，但想法基本相同 - 比较内存中的值并只进行必要的更新。

【参考方案2】：

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

1) 何时开始：每当调用组件的 setState 方法时，就会开始比较（而 Angular 会在触发 Dom 事件、运行 setInterval/setTimeout 回调时以及无论何时ajax 回调运行）

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

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