Mobx Performance

Question

I read from various sources that mobx is superior to the renderer response and faster than shrinking. However, if I did a couple of tests, this shows that adding new data to the observed mobx is rather slow. In environments with a reaction-environment, every millisecond is calculated, and it’s difficult to use a solution where even a cycle of more than 200 elements and a filling array takes more than 100 ms. Since I really like mobx, I hope someone can take a look at the test code and give me some Tips - what I am doing wrong and how to improve productivity.

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();

It takes about 120 ms on my laptop. Without observables, s takes less than 1 ms

Answer 1

( , , , , ).

, 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 .

, !

P.S. , MobX . , 2.4.0.

Answer 2

observable() , () , , .

, , id a, . asFlat :

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

list ( , ..) id a , .

: 35 5 .

Answer 3

, 35 . , for() , , , Array.map() 1000 , ~ 59 ( ):

const { observable, autorun, transaction } = mobx;

class Runner {

  @observable list = [];

  run() {
    const start = new Date().getTime();
    transaction(() => {
     this.list = new Array(1000).fill(0).map((row, i) => {
        return {
          id: observable(i),
          a: 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 ');
    console.log('list observable->', this.list);
  }
}
const runner = new Runner();
autorun(() => console.log(runner.list));
runner.run();

jsFiddle

React Redux, Mobx .

Answer 4

, ?

const start = new Date().getTime();
const newItems = [];
for (let i = 0; i < 200; i++) {
    newItems.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',

    });
}
transaction(() => {
    Array.prototype.push.apply(this.items, newItems)
});

observable id one, ( this.items Array.prototype.push...)

Answer 5

push, replace, .

( ) . replace, .