Strategy OnPush 是什么意思？

Question

我是使用 TypeScript 的 Angular2 新手。我目前正在做一个项目，不幸的是，无法理解 OnPush 的作用：

changeDetection : ChangeDetectionStrategy.OnPush

我搜索了很多，但没有找到（没看懂）正确答案。

谁能给我解释一下？例子可能是值得赞赏的。

Answer 1

On push change detection 意味着组件上的变化检测运行仅当输入发生变化时，并且当输入发生变化时，它们的整个对象必须发生变化。这意味着如果只有引用发生变化，变化检测将不会是运行.

例如，如果您在数组组件上输入：

@Input() testArray: Item[] = [];

如果您在父组件中使用 push 修改该数组，更改检测将不会在子组件上运行。但是如果你这样做：

array = [...array, newItem];

<test-component [testArray]="array"></test-component>

更改检测将运行。这用于提高您的应用程序性能，因为它大大减少了更改检测运行的次数。它通常与 不可变 数据结构配对，尤其是 Redux 具有 store 的模式，例如 @ngrx/store.

Answer 2

我觉得举个例子更容易理解：

您有一个具有输入属性的组件：

type Person {
  name: string;
  surname: string;
}
@Component({
    selector: 'my-component',
    changeDetection: ChangeDetectionStrategy.OnPush,
    template: `<p> {{person.name}} {{person.surname}} </p>`
})
class myComponent {
  ...
  @Input() person: Person;
  ...
}

如果你用类似

的东西修改人的初始值

person.name="changed";

Angular 不会检测到该更改，因为它认为对象本身是相同的。您更改了对象的属性，而不是对象本身。您需要更改整个对象（引用）以使 Angular 检测到此更改：

person={name:'changed',surname:'something else'};

所以这就像 angular 将输入元素视为不可变对象，并且它们内部的任何更改都将被忽略。

Strategy OnPush 是什么意思？

What does Strategy OnPush mean?

angular2-changedetection

angular