"原子性状态更新"这个词可以很好地概括 runInAction 的核心功能,即将一组相关的状态更新作为一个整体,要么全部成功,要么全部失败。这种特性对于复杂的异步操作和状态管理非常重要。可以帮助我们构建更加可靠和可预测的 React 应用程序。
怎么理解原子性操作
"原子性操作"是一个非常重要的概念,它描述了一组操作要么全部成功,要么全部失败,中间不会出现部分成功的情况。这样可以确保系统的一致性和完整性。
在MobX中,使用runInAction来包裹状态更新操作(把一组状态放在一起包起来),就是为了确保这些操作是原子性的。下面来看2个例子。
例1: 计数器应用
举一个更简单的例子来解释runInAction的作用
假设我们有一个简单的计数器应用,当我们点击按钮时,计数器的值会增加。但是,我们希望在增加计数之前,先模拟一个1秒钟的异步操作。
这里是使用runInAction的例子:
import { observable, action } from 'mobx';
class CounterStore {
@observable count = 0;
@action
increaseCount = () => {
// 模拟一个1秒钟的异步操作
setTimeout(() => {
// 在这里使用 runInAction 包裹状态更新
runInAction(() => {
this.count++;
});
}, 1000);
};
}
const counterStore = new CounterStore();
// 在组件中使用
import { observer } from 'mobx-react-lite';
const CounterComponent = observer(() => {
return (
<div>
<p>当前计数: {counterStore.count}</p>
<button onClick={counterStore.increaseCount}>增加计数</button>
</div>
);
});
在这个例子中,当我们点击"增加计数"按钮时,会触发increaseCountaction。这个action中有一个模拟的1秒钟异步操作,在这个操作完成后,我们使用runInAction来更新count状态。
为什么要使用runInAction呢?主要有以下两个原因:
-
确保状态更新的原子性: 如果不使用
runInAction,当异步操作完成时,count的更新可能会与组件的重新渲染发生竞争条件,导致界面不一致。而runInAction可以确保状态更新是一个原子性操作。 -
自动追踪依赖: 当在
runInAction中更新状态时,MobX会自动追踪这些状态的依赖关系。这意味着,只有依赖于count状态的组件,才会在count更新时重新渲染。
例2: 列表加载时显示、隐藏动画
下面是一个示例,展示了如何在异步操作中使用runInAction:
import { runInAction, observable } from 'mobx';
class TodoStore {
@observable todos = [];
@observable loading = false;
@observable error = null;
async fetchTodos() {
this.loading = true;
try {
const response = await fetch('/api/todos');
const data = await response.json();
runInAction(() => {
this.todos = data;
this.loading = false;
this.error = null;
});
} catch (err) {
runInAction(() => {
this.error = err.message;
this.loading = false;
});
}
}
}
在这个例子中,当fetchTodos方法被调用时,它会先设置loading状态为true。然后,在异步操作完成后,将结果数据更新到todos状态,并将loading和error状态分别设置为false和null。
值得注意的是,这些状态更新都是在runInAction中完成的,这确保了状态更新的原子性,同时也确保了相关的观察者会自动更新。
runInAction的主要作用
-
原子性操作:
runInAction确保了在执行内部代码时,状态的更新是原子性的,即要么全部执行成功,要么全部失败。这有助于避免部分状态更新导致的一致性问题（如异步中的状态更新可能会与组件的重新渲染发生竞争条件,导致界面不一致）。而runInAction可以确保状态更新是一个原子性操作。 -
自动追踪依赖: 当在
runInAction中访问可观察状态时,MobX会自动追踪这些依赖关系。这意味着当这些依赖发生变化时,相关的观察者(如React组件)会自动更新。 -
异步代码的状态管理: 在异步操作中,我们通常需要维护一些状态,如加载状态、错误状态等。使用
runInAction可以将这些状态的更新包裹在一个原子性操作中,使得状态管理更加清晰和可靠。
总之,runInAction是MobX中一个非常有用的工具,它可以帮助我们在异步操作中更好地管理状态,提高代码的可靠性和可维护性。
