不要被angular状态管理误导，掌握它需要3小时
2023-11-20 21:24:59
在使用诸如react,vue之类的框架时随着项目的不断变大和复杂化，已经不能通过组件通讯等来表达处理数据，你可能会引用redux ,mobx,vuex等优秀的开源的状态管理的库来管理全局的数据状态，但我也觉得很复杂。但是在angular里，是隐藏了一个状态管理的机制，这得益于脏检查，通过它来保证我们的数据是更新的。
脏检查
Angular的状态管理机制是基于脏检查的。脏检查是一种检测组件状态是否发生变化的机制。当组件的状态发生变化时，Angular会自动更新组件的视图。
脏检查的原理很简单。Angular会在每个组件中创建一个脏检查器。脏检查器会跟踪组件的状态。当组件的状态发生变化时，脏检查器会将组件标记为脏组件。
在每个事件循环中，Angular会检查所有脏组件。如果某个组件是脏组件，Angular会更新组件的视图。
脏检查是一种非常高效的状态管理机制。它只会在组件的状态发生变化时更新组件的视图。这可以避免不必要的渲染，从而提高应用程序的性能。
依赖注入
Angular的状态管理机制还依赖于依赖注入。依赖注入是一种将对象及其依赖关系分离的技术。在Angular中，你可以使用依赖注入来管理组件的状态。
你可以使用@Injectable()装饰器来将一个类标记为可注入。然后，你可以在组件的构造函数中使用@Inject()装饰器来注入这个类。
import { Injectable } from '@angular/core';
@Injectable()
export class UserService {
private users: User[];
constructor() {
this.users = [];
}
getUsers(): User[] {
return this.users;
}
addUser(user: User) {
this.users.push(user);
}
}
import { Component, Inject } from '@angular/core';
import { UserService } from './user.service';
@Component({
selector: 'my-app',
template: `
<ul>
<li *ngFor="let user of users">{{ user.name }}</li>
</ul>
`,
})
export class AppComponent {
users: User[];
constructor(@Inject(UserService) private userService: UserService) {
this.users = userService.getUsers();
}
}
在上面的示例中，UserService类被标记为可注入。然后，AppComponent类中的构造函数使用@Inject()装饰器来注入UserService类。这允许AppComponent类访问UserService类的方法和属性。
RxJS
Angular的状态管理机制还可以使用RxJS来实现。RxJS是一个响应式编程库。它可以帮助你处理异步数据流。
你可以使用RxJS来创建可观察对象。可观察对象是一种可以发出值的源。当可观察对象发出值时，订阅者会收到通知。
import { Observable, of } from 'rxjs';
const observable = of(1, 2, 3);
observable.subscribe(value => {
console.log(value);
});
在上面的示例中，observable是一个可观察对象。它发出值1、2和3。订阅者是一个函数，它在收到值时被调用。
你可以使用RxJS来管理组件的状态。你可以创建可观察对象来跟踪组件的状态。当组件的状态发生变化时，可观察对象会发出值。然后，你可以使用订阅者来侦听可观察对象发出的值，并在组件的视图中更新数据。
变更检测策略
Angular提供了三种变更检测策略：
- OnPush：OnPush策略只会在组件的输入属性发生变化时更新组件的视图。
- Default：Default策略会在每个事件循环中更新组件的视图。
- OnChanges：OnChanges策略只会在组件的输入属性发生变化时更新组件的视图，但它还会在组件的初始化时更新组件的视图。
你可以根据组件的具体情况选择合适的变更检测策略。
Zone.js
Angular使用Zone.js来实现脏检查和依赖注入。Zone.js是一个库，它可以让你在单独的区域中执行代码。
当Angular创建一个组件时，它会创建一个新的Zone。这个Zone被称为组件的Zone。组件的Zone是独立于应用程序的Zone的。这意味着，组件的Zone中的代码不会影响应用程序的Zone中的代码。
Angular使用Zone.js来实现脏检查和依赖注入。当组件的状态发生变化时，Angular会在组件的Zone中执行脏检查。当组件的输入属性发生变化时，Angular会在组件的Zone中执行依赖注入。
总结
Angular的状态管理机制是基于脏检查的。它可以帮助你管理组件的状态。通过了解脏检查和依赖注入的工作原理，你可以更好地理解Angular的状态管理机制。文中还提供了有关如何使用RxJS来管理状态的建议。
