Mobx性能

Question

我从不同的来源了解到mobx优于react渲染器，并且比redux更快。然而，如果我做了几个测试，就会发现向mobx可观测数据添加新数据的速度相当慢。在react原生环境中，每一毫秒都很重要，使用解决方案是很棘手的，因为我真的很喜欢mobx，即使循环超过200个元素和填充数组也需要超过100ms。我希望有人能看一看测试代码，并给我一些提示-我做错了什么，以及如何提高性能。

import {observable, transaction,autorun} from 'mobx'; 
class Runner {

list = observable([]);

run() {


    const start = new Date().getTime();
    transaction(() => {
        for (let i = 0; i < 200; i++) {
            this.list.push({
                id: observable(i),
                one: observable('1'),
                two: '2',
                three: 3,
                x: 'xxxxx',
                y: 'yyyyy',
                z: 'zzzzz',
                z1: 'zzzzz',
                z2: 'zzzzz',
                z3: 'zzzzz',
                z4: 'zzzzz',

            });
        }
    });

    console.log('Execution time: ' + (new Date().getTime() - start) + 'ms services ');
}
}
const runner = new Runner();
autorun(() => console.log(runner.list));
runner.run();

在我的笔记本电脑上，它需要大约120ms才能完成。如果没有-s，它只需要不到1毫秒

Answer 1

你根本没有做错什么(除了，正如Robert已经指出的，目前所有的属性都是可观察的，因为默认情况下，可观察的递归是在普通数据结构上进行的)。

主要的问题是你还没有真正使用MobX :)你的测试结果是正确的，可观察的数据结构比普通结构要昂贵得多。这有点像比较苹果和橙子。或者更好的类比；这就像基准测试连接字符串来生成HTML，而不是使用DOM来生成HTML。弦总是会赢的。

然而，在一个完整的应用程序的更大图景中，事情是不同的。假设您需要更改元素的边框颜色。那么DOM可能会突然变得更高效，因为它只允许您更改HTML中非常特定的一部分，并且DOM足够智能，可以精确地决定需要在屏幕上重新绘制哪些像素。如果你只有一个空的字符串，这一切都会变得困难得多。

MobX是类似的，它的性能不是从快速的数据结构中获得的，而是从它们的智能中获得的。如果可观察到的数组被修改，MobX会精确地指出需要呈现哪些操作、哪些组件以与您编写的任何计算保持一致。因为MobX能够建立比手工编写这种东西更细粒度的“事件侦听器”，而且MobX可以优化依赖树，而人类程序员可能不会费心去做的事情，MobX可以非常快。但你必须在你的状态的完整生命周期的更大图景中看到它。如果你只是想快速创建一些对象和数组，没有什么比普通数组和构造函数更好的了。

我推荐通过@lavrton https://medium.com/@lavrton/how-to-optimise-rendering-of-a-set-of-elements-in-react-ad01f5b161ae#.enlk3n68g来阅读这个博客。它很好地演示了手动优化时需要跳过的所有障碍，只是为了接近MobX更新组件的速度。

我希望这能解释你的结果！

附注:目前有一些已知的情况，在排序或清理大型集合时，MobX可能会很慢。不过，这些问题将在即将发布的2.4.0版本中得到解决。

Answer 2

observable()使您(递归地)推入数组的所有值都是可观察的，这可能不是您所需要的。

例如，从示例代码中可以看出，您只想观察id和a属性的更改，而不是其他属性的更改。在这种情况下，您可以在可观察数组上使用asFlat modifier：

const { observable, autorun, transaction, asFlat } = mobx;
....
list = observable(asFlat([]));

这将允许您观察对list本身的更改(添加新项、删除项等)，或者对列表项的id和a属性的更改，而不是其他更改。

这大大加快了我的测试速度:从35ms提高到大约5ms。

Answer 3

不使用push而使用replace，您将看到性能提高了许多倍。

在评估库并尝试数千条记录(以突破限制)时，加载会冻结浏览器。我把它改成了replace，只有几毫秒的时间。