Question

我用mobx / react构建两个小部件，其中所有逻辑都位于商店内。两者都分享了大部分设计规则，因此他们的商店有95％的相同。有没有一种聪明的方法来处理这种情况？例如，是否可以创建这样的继承？

class Animal { 
  @observable name = "";

  constructor(name) {
    this.name = name;
  }

  @computed get sentence() {
    console.log(this.name + ' makes a noise.');
  }
}

class Dog extends Animal {
  @observable isBarking = false;
  @computed get bark() {
    if (this.isBarking){
        console.log('The dog is barking');
    }
  }
  @action
    setIsBarking(isBarking) {
    this.isBarking = isBarking;
  }  
}

Answer 1

您是否考虑使用MobX State Tree（https://github.com/mobxjs/mobx-state-tree）来管理您的两个班级Animal和Dog？

这将为您提供强大的compose功能，可以使用它来代替继承。

这里可能是你最有用的部分：＆＃34;通过使用类型组合模拟继承＆＃34; https://github.com/mobxjs/mobx-state-tree#simulate-inheritance-by-using-type-composition

Answer 2

是的，你可以，但你必须像这样构造它，使用不使用装饰器的新 Mobx 模式：

（使用打字稿）


import {observable, action, computed, makeObservable} from "mobx";

const animalProps = {
   name: observable,
   sentence: computed
};

class abstract Animal { 
  name = "";

  constructor(name) {
    this.name = name;
  }

  get sentence() {
    console.log(this.name + ' makes a noise.');
  }
}

class Dog extends Animal {
  
   isBarking = false;

   constructor(){
     makeObservable(this, {
       ...animalProps,
       isBarking: observable,
       bark: computed,
       setIsBarking: action
     });
   }
  
   get bark() {
    if (this.isBarking){
        console.log('The dog is barking');
    }
  }

    setIsBarking(isBarking) {
       this.isBarking = isBarking;
  }  
}

如果您的应用中需要一个 Animal 实例，那么 Mobx-State-Tree 是更好的选择。因为让 prop observable/actionable/computable 两次（父类和子类）会抛出错误。

是否有可能在两个mobx商店之间创建继承？

2 个答案: