Angular 2 有重新渲染优化吗？

Question

我已经使用 React 几个月了，React 并没有简单地重新渲染一个组件，而是找到差异并进行这些更改。 Angular 2 会做这样的事情吗？

而且每当检测到状态变化时，Angular 2 是否会重新渲染根节点中的所有组件，还是只重新渲染那些特定组件及其检测到更改的子树？

Answer 1

React 不会简单地重新渲染一个组件，而是会发现差异并进行这些更改。 Angular 2 会做这样的事情吗？

从概念上讲是的，它不会重新渲染整个组件。

Angular 为每个组件/指令构建一个变更检测器对象。模板绑定（包括输入属性绑定）在这些更改检测器对象中进行跟踪。当更改检测运行时，默认情况下，每个绑定都会对更改进行脏检查。如果发现更改，更改的值将传播到子组件（如果输入属性更改）或 DOM。而已。整个模板/视图不会重新渲染。只有更改的值会在 DOM 中更新。当 Angular 更改检测完成时，浏览器会注意到 DOM 更改并更新我们在屏幕上看到的内容。

每当检测到状态变化时，Angular 2 是重新渲染根节点中的所有组件，还是只重新渲染那些检测到更改的特定组件及其子树？

Angular 不会检测到某些模型/数据对象的更改。相反，它只检测模板绑定的更改。

默认情况下，每次更改检测运行时，它都会从根组件开始，并使用这些更改检测器对象以深度优先顺序检查所有组件的更改。如上所述，仅更新具有更改的模板绑定。所以，我不会说 Angular 会重新渲染组件……它只会修改 DOM 中模板绑定发生变化的那些部分。

您可以将组件配置为使用OnPush 更改检测策略来限制检查该组件及其后代的更改时间。您也可以完全detach() 来自更改检测器树的组件，这意味着在您 reattach() 之前不会检测到该组件及其后代。

Answer 2

Angular 不像 React 那样使用虚拟 DOM。在 Angular 的上下文中不需要这样做。

如果您有<input> 并且需要在运行时将其值设置为其他值，则您无需更改它周围的所有 DOM。您只需在该元素上调用 setValue() 即可。

这同样适用于任何其他 DOM 元素。例如，如果你有这个：

<div>{{someVar}}</div>

并且 Angular 检测到 someVar 已更改，它将仅更改特定 <div> 的内容。

Answer 3

Angular 只在它检测到变化的地方渲染。

AFAIK 在*ngFor 中有一些改进的空间，当在中间或开头添加/删除一些项目时，它有时会重新渲染太多项目，但这是一个已知问题，最终将得到解决。

来自我下面的评论

事实上，Angular 不需要重新渲染优化，因为它只在绑定值更改时才做任何事情，然后它只更改绑定到更改值的 DOM。 Angular 没有需要镜像到实际 DOM 的虚拟 DOM。

Answer 4

Angular2 使用 zone.js 进行 onChange 渲染。通常当检测到更改时，它会触发 changeDetection 该组件和所有子组件，但您也可以控制更改它，强制渲染某些内容或在您不喜欢 angular2 时不渲染行为。

这是一个关于Angular2 change detection如何工作的很好的演讲：https://www.youtube.com/watch?v=CUxD91DWkGM

LE：澄清一下，它不会重新渲染组件和所有子组件，它会检测并触发所有这些更改，但只会渲染必要的部分。