Angular 生命周期钩子中的数据流
Data flow in Angular lifecycle hook
我在看Angular Lifecycle Hook的官方文档。让我感到困惑的是以下解释:
Angular's unidirectional data flow rule forbids updates to the view
after it has been composed ...... postpones the log update for one turn of the browser's JavaScript cycle and that's just long enough.
因为页面已经呈现,所以禁止更新听起来很合理,但是为什么推迟更新一个tick就可以解决问题呢?打勾后view不是还在composed吗?
请像我5岁一样给我解释一下。
每次事件发生时(例如,当 setTimeout 的延迟已经过去,并且执行其回调函数时),Angular 开始更改检测并将必要的更改应用到 DOM 相应地。
禁止的是在事件发生时不更新组件的状态,从而更新视图。禁止的是更新组件的状态,因此在变更检测仍在进行时更新它们的视图,在它们已经被检查过之后。
例如,如果您尝试在子组件的 ngAfterViewChecked 挂钩中修改父组件的状态,您会收到来自 Angular 的错误,因为这是被禁止的:Angular 有刚刚检测到父项和子项的更改,并且您在更改检测期间同步地对父项进行更改。另一方面,调用 setTimeout()
会安排稍后更改,并且将再次检测到该更改,并开始新的更改检测。
我在看Angular Lifecycle Hook的官方文档。让我感到困惑的是以下解释:
Angular's unidirectional data flow rule forbids updates to the view after it has been composed ...... postpones the log update for one turn of the browser's JavaScript cycle and that's just long enough.
因为页面已经呈现,所以禁止更新听起来很合理,但是为什么推迟更新一个tick就可以解决问题呢?打勾后view不是还在composed吗?
请像我5岁一样给我解释一下。
每次事件发生时(例如,当 setTimeout 的延迟已经过去,并且执行其回调函数时),Angular 开始更改检测并将必要的更改应用到 DOM 相应地。
禁止的是在事件发生时不更新组件的状态,从而更新视图。禁止的是更新组件的状态,因此在变更检测仍在进行时更新它们的视图,在它们已经被检查过之后。
例如,如果您尝试在子组件的 ngAfterViewChecked 挂钩中修改父组件的状态,您会收到来自 Angular 的错误,因为这是被禁止的:Angular 有刚刚检测到父项和子项的更改,并且您在更改检测期间同步地对父项进行更改。另一方面,调用 setTimeout()
会安排稍后更改,并且将再次检测到该更改,并开始新的更改检测。