如何原子性更新Mobx Observable？让React组件仅在全量更新后重渲染

一、实现所有Observable设置完成后再触发组件重渲染 #

Mobx的事务机制支持批量合并状态变更，避免组件因中间状态重复渲染，你可以通过以下两种方式实现需求：

• 给main方法添加@action装饰器：当main被标记为action后，内部调用的method1、method2会被纳入同一个事务，所有Observable的变更会在main执行完毕后一次性提交，组件只会触发一次重渲染。
• 用runInAction包裹变更逻辑：如果不想给main加@action，也可以用Mobx提供的runInAction函数，把多个action调用包裹起来，同样能实现批量更新效果。

修改后的代码示例（方式一） #

class myStore {
    @observable var1;
    @observable var2;

    @action method1(val) {
        this.var1 = val;
    }

    @action method2(val) { // 修正拼写错误：原代码为mathod2
        this.var2 = val;
    }

    @action main() {
        this.method1("some random value 1");
        this.method2("some random value 2");
        // 所有状态变更完成后才会触发组件重渲染
    }
}

修改后的代码示例（方式二） #

import { runInAction } from "mobx";

class myStore {
    @observable var1;
    @observable var2;

    @action method1(val) {
        this.var1 = val;
    }

    @action method2(val) {
        this.var2 = val;
    }

    main() {
        runInAction(() => {
            this.method1("some random value 1");
            this.method2("some random value 2");
        });
        // runInAction执行完毕后触发组件重渲染
    }
}

二、main方法能否添加@action？标准实践是什么 #

完全可以给main方法添加@action装饰器，哪怕它没有直接修改Observable值。

这类场景的标准实践是：所有协调多个状态变更、或者触发多个action的方法，都应该标记为@action。这样做的核心价值在于：

• 确保内部所有状态变更被合并到单个事务中，避免组件因中间状态多次重渲染，提升应用性能。
• 明确标记出引发状态变更的"动作"入口，让代码逻辑更清晰，符合Mobx的状态管理设计理念。

另外需要注意：如果main方法是被外部（比如React组件）直接调用的，标记为@action尤为关键；如果main仅作为内部方法被其他action调用，即使不加@action也不会影响批量更新，但添加装饰器能让代码更规范。

内容的提问来源于stack exchange，提问作者Prashant