ngrx/store에서 항목을 변경할 때 항목이 다시 렌더링됩니까

Question

관찰 가능 항목에 todos bund 목록이있는 경우 todos 중 하나를 변경하면 모든 항목이 다시 렌더링됩니까?

Answer 1

각도 2와 ngrx/store로 작성된 todo 플 런커가 있습니다. 변경된 항목 만 렌더링되는 웹 브라우저 devtools에서 쉽게 볼 수 있습니다. 따라서 각도와 반응은 동일합니다. 각도 V2에서

"plnkr.co/edit/Hb4pJP3jGtOp6b7JubzS?p=preview"

Answer 2

우리는 구성 요소 상태 보존 형 (스마트)와 Statless의 2 개 종류가있다. 수단 (벙어리)

상태 : 일이 어떻게 진행되는지에 관심이 있습니다.

Stateless : 사물의 모양과 관련이 있습니다.

ChangeDetectionStrategy :

당신이 당신의 구성 요소에 어떤 전략을 정의하지 않습니다

의 ChangeDetection이는 항상 "다시 실행"이 구성 요소. 전략 OnPush의 경우 입력 내용이 변경되면 업데이트 만되지만이 경우에는 문자열, 객체가 아닌 수 또는 배열과 같은 Immutables에서만 작동합니다.

그래서 ngrx/저장 및 ES6 당신은 불변의 배열 (안 유일한 방법)

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

등을 만들 수 있습니다 그럼 당신은 구성 요소, 수행 할 작업 및 할 일을 만듭니다이 구성 요소

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

것 todos 목록을 가져 와서 두 번째 구성 요소 인 Todo를 다시 렌더링하십시오.

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

이 구성 요소는 벙어리이며 데이터 만 표시합니다.
ChangeDetectionStrategy.OnPush를 제공하여 할 일이 업데이트 될 때 업데이트 만 허용해야합니다. 그리고 새로운 todo를 추가하면 ngFor는 새로운 구성 요소 Todo를 표시하고 목록의 나머지 부분은 업데이트되지 않습니다.

는 코드없이