更改项目和ngrx / store中的项目时是否重新呈现

Question

如果我有一个todos Bund的列表到一个observable然后更改其中一个todos将所有项目重新渲染？

Answer 1

在Angular V2中，我们有两种类型的组件有状态（智能）和无状态。手段（哑）

有状态：关注事物的运作方式。

无统计：关注事物的外观。

ChangeDetectionStrategy：

如果您未对组件定义任何策略，则ChangeDetection将始终重新运行＆＃34;这个组件。 在策略OnPush的情况下，如果任何输入发生变化，他只会更新自己，但这种情况仅适用于像String，Number not for Objects或Arrays这样的Immutable。

所以使用ngrx / store和ES6你可以创建不可变数组（不是唯一的方法） 像

case ADD_TODO:
 return [...state, action.payload];
case UPDATE_TODO:
 return state.map(todo => todo.id === action.payload.id ? action.payload : todo);

然后你将创建组件todos和todo

<todos [todos]="todosNgRx$ | async"></todos>

此组件将获取待办事项列表，并重新呈现Todo的第二个组件。

<todo *ngFor="let todo of todos" [todo] = "todo"></todo>

这个组件很笨，只显示数据 您需要提供ChangeDetectionStrategy.OnPush，以便在更新todo时仅更新。如果你添加一个新的待办事项，ngFor将会有一个新的组件Todo，而且列表的其余部分将不会更新。

希望有所帮助

Answer 2

我发现了一个用角度2和ngrx / store创建的todo plunker。 在您的webbrowsers devtools中很容易看到，只有更改的项目才会被渲染。所以在这方面，角度和反应是相同的。

＆＃34; plnkr.co/edit/Hb4pJP3jGtOp6b7JubzS P =预览＆＃34;