11

我了解更改检测在Angular 5.0中的工作原理。

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

4

2 回答 2

18

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 中它有点复杂。检查一下。
  4. Dom 已更新。

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

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

于 2018-05-06T16:37:50.187 回答
7

React 变更检测或多或少与 Angular 相同，除了以下三点：

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

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

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

于 2018-05-29T04:18:09.597 回答