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

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

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

Answer 2

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

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

2）从哪里开始：差异从具有setState的组件开始，然后从其子级开始，直至层次结构（而Angular从最顶层的组件开始）

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