Angular 2 是否有重新渲染优化?
Does Angular 2 have re-rendering optimization?
几个月来我一直在使用 React,React 不会简单地完全重新渲染组件,而是会发现差异并进行这些更改。 Angular 2 会做这样的事情吗?
而且每当检测到状态变化时,Angular 2 会重新渲染根节点中的所有组件,还是仅重新渲染那些检测到变化的特定组件及其子树?
Angular 仅在检测到变化的地方呈现。
AFAIK 在 *ngFor
中有一些改进的空间,它有时会重新渲染太多的项目,而有些项目 added/removed 在中间或开头,但这是一个已知问题,将会最终修复。
来自我下面的评论
In fact Angular doesn't need re-rendering optimization because it only does anything when bound values change and then it only changes the DOM where it is bound to the changed value. Angular doesn't have a virtual DOM that it needs to mirror to the actual DOM.
Angular 没有像 React 那样使用虚拟 DOM。在 Angular.
的上下文中不需要这样做
如果您有 <input>
并且需要在运行时将其值设置为其他值,则无需更改它周围的所有 DOM。您只需对该元素调用 setValue() 即可。
这同样适用于任何其他 DOM 元素。例如,如果你有这个:
<div>{{someVar}}</div>
和 Angular 检测到 someVar 已更改,它将仅更改特定 <div>
.
的内容
Angular2 使用 zone.js 进行 onChange 渲染。通常当检测到变化时,它会触发 changeDetection 该组件和所有子组件,但您也可以控制更改它,强制渲染某些东西或在您不渲染时不渲染不喜欢 angular2 的行为。
这里有一个很好的讲讲如何Angular2 change detection works : https://www.youtube.com/watch?v=CUxD91DWkGM
LE:澄清一下,它不会重新渲染组件和所有子组件,它会检测并触发所有这些组件的更改,但只会渲染必要的组件。
React doesn't simply re-rendering a component completely instead it finds the difference and makes those changes. Does Angular 2 does something like this?
概念上是的,它不会重新渲染整个组件。
Angular 为每个 component/directive 构建一个变化检测器对象。在这些变化检测器对象中跟踪模板绑定(包括输入 属性 绑定)。当更改检测运行时,默认情况下,每个绑定都会进行脏检查以查找更改。如果发现更改,更改的值将传播到子组件(如果输入 属性 已更改)或传播到 DOM。而已。整个 template/view 没有重新渲染。 DOM 中仅更新更改的值。 Angular 更改检测完成后,浏览器会注意到 DOM 更改并更新我们在屏幕上看到的内容。
whenever a change in state is detected does Angular 2 re-render all the components from the root node or does it only re-render those specific components and their sub-tree whose change is detected?
Angular 未检测到某些 model/data 对象的更改。相反,它只检测模板绑定的更改。
默认情况下,每次运行更改检测时,它都会从根组件开始,并使用这些更改检测器对象按深度优先顺序检查所有组件的更改。如上所述,仅更新具有更改的模板绑定。所以,我不会说 Angular 曾经重新渲染一个组件......它只会修改 DOM 中模板绑定发生变化的那些部分。
您可以将组件配置为使用 OnPush
更改检测策略来限制何时检查该组件及其后代是否有更改。您还可以完全 detach() 更改检测器树中的一个组件,这意味着在您重新附加 () 之前,不会检测到该组件及其后代的更改。
几个月来我一直在使用 React,React 不会简单地完全重新渲染组件,而是会发现差异并进行这些更改。 Angular 2 会做这样的事情吗?
而且每当检测到状态变化时,Angular 2 会重新渲染根节点中的所有组件,还是仅重新渲染那些检测到变化的特定组件及其子树?
Angular 仅在检测到变化的地方呈现。
AFAIK 在 *ngFor
中有一些改进的空间,它有时会重新渲染太多的项目,而有些项目 added/removed 在中间或开头,但这是一个已知问题,将会最终修复。
来自我下面的评论
In fact Angular doesn't need re-rendering optimization because it only does anything when bound values change and then it only changes the DOM where it is bound to the changed value. Angular doesn't have a virtual DOM that it needs to mirror to the actual DOM.
Angular 没有像 React 那样使用虚拟 DOM。在 Angular.
的上下文中不需要这样做如果您有 <input>
并且需要在运行时将其值设置为其他值,则无需更改它周围的所有 DOM。您只需对该元素调用 setValue() 即可。
这同样适用于任何其他 DOM 元素。例如,如果你有这个:
<div>{{someVar}}</div>
和 Angular 检测到 someVar 已更改,它将仅更改特定 <div>
.
Angular2 使用 zone.js 进行 onChange 渲染。通常当检测到变化时,它会触发 changeDetection 该组件和所有子组件,但您也可以控制更改它,强制渲染某些东西或在您不渲染时不渲染不喜欢 angular2 的行为。
这里有一个很好的讲讲如何Angular2 change detection works : https://www.youtube.com/watch?v=CUxD91DWkGM
LE:澄清一下,它不会重新渲染组件和所有子组件,它会检测并触发所有这些组件的更改,但只会渲染必要的组件。
React doesn't simply re-rendering a component completely instead it finds the difference and makes those changes. Does Angular 2 does something like this?
概念上是的,它不会重新渲染整个组件。
Angular 为每个 component/directive 构建一个变化检测器对象。在这些变化检测器对象中跟踪模板绑定(包括输入 属性 绑定)。当更改检测运行时,默认情况下,每个绑定都会进行脏检查以查找更改。如果发现更改,更改的值将传播到子组件(如果输入 属性 已更改)或传播到 DOM。而已。整个 template/view 没有重新渲染。 DOM 中仅更新更改的值。 Angular 更改检测完成后,浏览器会注意到 DOM 更改并更新我们在屏幕上看到的内容。
whenever a change in state is detected does Angular 2 re-render all the components from the root node or does it only re-render those specific components and their sub-tree whose change is detected?
Angular 未检测到某些 model/data 对象的更改。相反,它只检测模板绑定的更改。
默认情况下,每次运行更改检测时,它都会从根组件开始,并使用这些更改检测器对象按深度优先顺序检查所有组件的更改。如上所述,仅更新具有更改的模板绑定。所以,我不会说 Angular 曾经重新渲染一个组件......它只会修改 DOM 中模板绑定发生变化的那些部分。
您可以将组件配置为使用 OnPush
更改检测策略来限制何时检查该组件及其后代是否有更改。您还可以完全 detach() 更改检测器树中的一个组件,这意味着在您重新附加 () 之前,不会检测到该组件及其后代的更改。