javascript - 我应该如何使用 MobX 实现惰性行为？

Question

以下代码旨在在添加新用户后立即打印反向的用户列表，但它不起作用。自动运行正在监听惰性计算的变量(_userArrayRev)，但如何启用该变量的重新计算？自动运行只执行一次，而我希望它运行三次

而且，为什么当 enforceactions (useStrict) 设置为 true 时，MobX 允许我修改 AddUser() 中可观察的 userArray 变量？

import { useStrict, configure, autorun } from 'mobx';
import { observable, action, computed } from 'mobx';


configure({ enforceActions: true });


class Test {
    @observable _userArray = [];
    @observable _userArrayRev = undefined;
    userCount = 0;

    addUser() {
        console.log("Adduser");
        this._userArray.push('user' + this.userCount);
        this.invalidateCache();
    }

//  returns reversed array
    getUsersArrayRev() {
        if (this._userArrayRev == undefined) {
//          console.log("recalculating userArray");
            // TODO: should be reversed
            this._userArrayRev = this._userArray;
        }
        return this._userArrayRev;
    }

    invalidateCache() {
        this._usersArrayRev = undefined;
    }

}

var t = new Test();

autorun(function test () {
    console.log("users: ", t.getUsersArrayRev());
});
t.addUser();
t.addUser();

Answer 1

我建议您使用计算而不是自动运行。当您想要基于可观察对象创建只读惰性变量时，compated 更适合。

注意:我使用 slice() 返回一个普通数组。 Observable 数组是一个对象而不是数组，请注意这一点。

import React from 'react';
import { render } from 'react-dom';
import { observer } from 'mobx-react';
import { observable, action, computed } from 'mobx';

class Test {
  @observable _userArray = [];

  @computed get userCount() {
    return this._userArray.length;
  }

  @computed get usersArrayRev() {
    return this._userArray.slice().reverse();
  }

  @action
  addUser() {
    console.log("Adduser");
    const id = this.userCount + 1;
    this._userArray.push(`user${id}`);
    console.log("Reversed users: ", this.usersArrayRev);
  }
}

@observer
class App extends React.Component {
  t = new Test();

  render() {
    return (
      <div>
        {this.t.usersArrayRev.map(user => <div key={user}>{user}</div>)}
        <button onClick={() => { this.t.addUser(); }}>Add user</button>
      </div>
    );
  }
}

代码演示在这里: