呵呵哒的猫

最近在做项目的时候发现一个错误：ExpressionChangedAfterItHasBeenCheckedError。 经过Google后了解到，这个是只有dev环境下才会报的错误，跟变更检测有关。 大意是：angular 在render页面时某个属性已赋值，然而在render结束后 AfterViewChecked 的时候属性值却发生了变化，这可能导致给用户显示的信息是错误的，所以爆出该错误。 1.1. 情景再现： template: 父组件 aComponent 内循环输出子组件 bComponent。 <div *ngfor(let item of list; index of i)> <bComponent [img]="imgData[i]"></bComponent> </div> aComponent.ts ngAfterViewInit() { 异步获取list->then(()=>{ 获取imgData[]; ) } bComponent.ts @Input() imgData; images: string[] = []; ngAfterViewInit() { this.images = imgData; } 在我加了一些log后发现执行顺序： aComponent ngOnInit() aComponent ngAfterViewInit() bComponent ngOnInit() bComponent ngAfterViewInit() 因为刚开始异步获取list还没得到结果，所以父组件 ngOnInit-> ngAfterViewInit; 等到获得到list， 页面才会循环渲染输出子组件，执行其生命周期。 因为我将 this.images = imgData; 操作放在了ngAfterViewInit()生命周期里， 根据组件变更检测的执行顺序(digest cycle)： 更新所有子组件/指令的绑定属性 调用所有子组件/指令的三个生命周期钩子：ngOnInit，OnChanges，ngDoCheck 更新当前组件的 DOM ...

react 的一个常见优化方式是使用 shouldComponentUpdate 生命周期对不需要更新的组件调停，但当组件多起来就非常麻烦，那有没有更合理方便的方式呢？

最近在看 React，大家都说 React 通过 diff 算法比对新旧 DOM树，patch变更应用到真实 DOM实现 UI 同步，所以 React 的 Virtual DOM 效率高。

腾讯云的服务器都快过期了还没杂用，感觉血亏。在过期前搭个饥荒服务器玩玩吧~ 需要用到的: 腾讯云 linuxgsm termius