1

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

作为一个不可变对象，当状态改变时，我们会创建一个新对象，Angular 会重新绘制所有 DOM。如果操作是由输入元素分派的，则失去焦点。
我已经分叉了一个示例 plunk 来重现该行为： http: //plnkr.co/yb53ij

在实际应用中，我使用了表单 API 中的“.debounceTime()”，但这对用户体验来说似乎不太好。有一种方法可以避免这种情况，或者我错过了什么？

减速机代码：

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;
  }

谢谢！

4

1 回答 1

1

为了解决这个问题，我们需要使用指令的trackBy函数*ngFor。所以我们可以告诉 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

于 2016-07-28T17:18:55.750 回答