Question

我正在使用Angular2和Redux开始一个新项目。

作为一个不可变对象，当状态被更改时，我们创建一个新对象，Angular再次重绘所有DOM。如果操作是由输入元素调度的，则焦点丢失。
我已经分叉了一个示例插件来重现行为：http://plnkr.co/yb53ij

在真正的应用程序中，我使用了表单API中的“.debounceTime（）”，但这对用户体验来说似乎不太好。有办法避免这种情况或者我错过了什么吗？

reducer代码：

export const todos = (state = [{text: 'Edit my input...'}], {type, payload}) => {
  switch(type){
    case ADD_TODO: ...
    case UPDATE_TODO: ...
    case COMPLETE_TODO: ...
    case DELETE_TODO: ...
    case 'REPEAT_TODO':
      // Creates new state:
      return state.map(todo => {
        return todo.id !== payload.todo.id ?
          todo :
          Object.assign({}, todo, {times: payload.times})
      });
    default:
      return state;
  }

谢谢！

Answer 1

要解决此问题，我们需要使用*ngFor指令的trackBy函数。所以我们可以告诉Angular不再渲染DOM。对于像我这样的不知情的开发者来说，这可能是一个性能陷阱！ = P

@Component({
  selector: 'todo-list',
  template: `
    <div>
      <todo-list-item 
        *ngFor="#todo of todos; trackBy:custom"
        ...
      ></todo-list-item>
    </div>
  `,
  directives: [TodoListItem]
})
export class TodoList {
  ...

  custom(index,item){
    return index;
  }
}

以下是工作的plunker演示：http://plnkr.co/1ffRPD6F1vHw0EmHh5er

Angular2 with Redux - DOM协调

1 个答案: